/* Design tokens — Odonta */
/* Apple HIG aligned. Minimal. Single source of truth. */

:root {
  /* ===== Color — semantic ===== */
  --color-primary: #0F172A;
  --color-on-primary: #FFFFFF;
  --color-secondary: #334155;
  --color-accent: #0369A1;
  --color-accent-hover: #075985;
  --color-accent-active: #064971;
  --color-on-accent: #FFFFFF;
  --color-accent-tint: rgba(3, 105, 161, 0.10);   /* iOS tinted button bg */
  --color-accent-tint-strong: rgba(3, 105, 161, 0.18);

  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-secondary: #F1F5F9;             /* nested surfaces, inputs */
  --color-foreground: #020617;

  --color-muted: #E8ECF1;
  --color-muted-foreground: #64748B;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-divider: rgba(15, 23, 42, 0.06);

  --color-destructive: #DC2626;
  --color-destructive-tint: rgba(220, 38, 38, 0.10);
  --color-success: #059669;
  --color-success-tint: rgba(5, 150, 105, 0.10);
  --color-warning: #D97706;
  --color-warning-tint: rgba(217, 119, 6, 0.10);

  --color-ring: var(--color-accent);

  /* iOS-style grays (Apple system colors approximation) */
  --gray-1: #8E8E93;
  --gray-2: #AEAEB2;
  --gray-3: #C7C7CC;
  --gray-4: #D1D1D6;
  --gray-5: #E5E5EA;
  --gray-6: #F2F2F7;

  /* ===== Radius — iOS-feel ===== */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ===== Shadows — minimal, Apple-soft ===== */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.02);
  --shadow:    0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);

  /* ===== Motion — Apple spring ===== */
  --duration-fast: 150ms;
  --duration: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* expo-out */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);           /* expo-in */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);      /* Apple flagship spring */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);        /* MD standard */

  /* ===== Layout ===== */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --side-rail-width: 248px;
  --tab-bar-height: 64px;
  --top-bar-height: 56px;
  --content-max-width: 1280px;

  /* ===== Type ===== */
  /* Apple HIG: prefer system font for native feel; fall back to Plus Jakarta Sans
     on non-Apple platforms. On macOS/iOS this renders SF Pro automatically. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
               Menlo, Consolas, monospace;

  /* ===== Z-index scale ===== */
  --z-base: 0;
  --z-sticky: 20;
  --z-rail: 30;
  --z-overlay: 100;
  --z-modal: 101;
  --z-toast: 1000;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}