/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   Two layers:
     1. Primitives (--ds-<hue>-<step>)  — the raw palette. Rarely used directly.
     2. Semantics  (--ds-color-*, --ds-space-*, …) — what components and app
        code should reference. Re-theming means overriding layer 2 only.

   Tokens land on :root so components work with no provider. ThemeProvider
   sets [data-ds-theme] on a wrapper, which re-scopes the semantic layer for
   any subtree — that is the only thing the provider does.
   ========================================================================== */

:root {
  /* --- Primitives: neutral (cool grey) ---------------------------------- */
  --ds-neutral-0: #ffffff;
  --ds-neutral-25: #fcfcfd;
  --ds-neutral-50: #f8fafc;
  --ds-neutral-100: #f1f5f9;
  --ds-neutral-200: #e2e8f0;
  --ds-neutral-300: #cbd5e1;
  --ds-neutral-400: #94a3b8;
  --ds-neutral-500: #64748b;
  --ds-neutral-600: #475569;
  --ds-neutral-700: #334155;
  --ds-neutral-800: #1e293b;
  --ds-neutral-900: #0f172a;
  --ds-neutral-950: #020617;

  /* --- Primitives: brand (blue) ----------------------------------------- */
  --ds-blue-50: #eff6ff;
  --ds-blue-100: #dbeafe;
  --ds-blue-200: #bfdbfe;
  --ds-blue-300: #93c5fd;
  --ds-blue-400: #60a5fa;
  --ds-blue-500: #3b82f6;
  --ds-blue-600: #2563eb;
  --ds-blue-700: #1d4ed8;
  --ds-blue-800: #1e40af;
  --ds-blue-900: #1e3a8a;

  /* --- Primitives: green (success) -------------------------------------- */
  --ds-green-50: #ecfdf5;
  --ds-green-100: #d1fae5;
  --ds-green-200: #a7f3d0;
  --ds-green-400: #34d399;
  --ds-green-500: #10b981;
  --ds-green-600: #059669;
  --ds-green-700: #047857;
  --ds-green-800: #065f46;
  --ds-green-900: #064e3b;

  /* --- Primitives: amber (warning) -------------------------------------- */
  --ds-amber-50: #fffbeb;
  --ds-amber-100: #fef3c7;
  --ds-amber-200: #fde68a;
  --ds-amber-400: #fbbf24;
  --ds-amber-500: #f59e0b;
  --ds-amber-600: #d97706;
  --ds-amber-700: #b45309;
  --ds-amber-800: #92400e;
  --ds-amber-900: #78350f;

  /* --- Primitives: red (danger) ----------------------------------------- */
  --ds-red-50: #fef2f2;
  --ds-red-100: #fee2e2;
  --ds-red-200: #fecaca;
  --ds-red-400: #f87171;
  --ds-red-500: #ef4444;
  --ds-red-600: #dc2626;
  --ds-red-700: #b91c1c;
  --ds-red-800: #991b1b;
  --ds-red-900: #7f1d1d;

  /* --- Semantics: surfaces & text --------------------------------------- */
  --ds-color-bg: var(--ds-neutral-50);
  --ds-color-surface: var(--ds-neutral-0);
  --ds-color-surface-sunken: var(--ds-neutral-100);
  --ds-color-surface-hover: var(--ds-neutral-100);
  --ds-color-text: var(--ds-neutral-900);
  --ds-color-text-muted: var(--ds-neutral-500);
  --ds-color-text-subtle: var(--ds-neutral-400);
  --ds-color-text-inverse: var(--ds-neutral-0);
  --ds-color-border: var(--ds-neutral-200);
  --ds-color-border-strong: var(--ds-neutral-300);

  /* --- Semantics: accent ------------------------------------------------ */
  --ds-color-accent: var(--ds-blue-600);
  --ds-color-accent-hover: var(--ds-blue-700);
  --ds-color-accent-active: var(--ds-blue-800);
  --ds-color-accent-subtle: var(--ds-blue-50);
  --ds-color-accent-border: var(--ds-blue-200);
  --ds-color-accent-text: var(--ds-neutral-0);
  --ds-color-accent-on-subtle: var(--ds-blue-700);

  /* --- Semantics: status ------------------------------------------------ */
  --ds-color-success: var(--ds-green-600);
  --ds-color-success-subtle: var(--ds-green-50);
  --ds-color-success-border: var(--ds-green-200);
  --ds-color-success-text: var(--ds-green-800);

  --ds-color-warning: var(--ds-amber-500);
  --ds-color-warning-subtle: var(--ds-amber-50);
  --ds-color-warning-border: var(--ds-amber-200);
  --ds-color-warning-text: var(--ds-amber-800);

  --ds-color-danger: var(--ds-red-600);
  --ds-color-danger-hover: var(--ds-red-700);
  --ds-color-danger-subtle: var(--ds-red-50);
  --ds-color-danger-border: var(--ds-red-200);
  --ds-color-danger-text: var(--ds-red-800);

  --ds-color-info: var(--ds-blue-600);
  --ds-color-info-subtle: var(--ds-blue-50);
  --ds-color-info-border: var(--ds-blue-200);
  --ds-color-info-text: var(--ds-blue-800);

  /* --- Semantics: interaction ------------------------------------------- */
  --ds-color-focus-ring: rgb(59 130 246 / 45%);
  --ds-color-overlay: rgb(15 23 42 / 45%);

  /* --- Typography -------------------------------------------------------- */
  --ds-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --ds-text-xs: 12px;
  --ds-text-sm: 13px;
  --ds-text-md: 14px;
  --ds-text-lg: 16px;
  --ds-text-xl: 20px;
  --ds-text-2xl: 24px;
  --ds-text-3xl: 30px;

  --ds-leading-xs: 16px;
  --ds-leading-sm: 18px;
  --ds-leading-md: 20px;
  --ds-leading-lg: 24px;
  --ds-leading-xl: 28px;
  --ds-leading-2xl: 32px;
  --ds-leading-3xl: 38px;

  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;

  /* --- Spacing ----------------------------------------------------------- */
  --ds-space-none: 0;
  --ds-space-3xs: 2px;
  --ds-space-2xs: 4px;
  --ds-space-xs: 8px;
  --ds-space-sm: 12px;
  --ds-space-md: 16px;
  --ds-space-lg: 24px;
  --ds-space-xl: 32px;
  --ds-space-2xl: 48px;
  --ds-space-3xl: 64px;

  /* --- Radius ------------------------------------------------------------ */
  --ds-radius-sm: 4px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 10px;
  --ds-radius-xl: 16px;
  --ds-radius-full: 9999px;

  /* --- Elevation --------------------------------------------------------- */
  --ds-shadow-xs: 0 1px 2px rgb(15 23 42 / 6%);
  --ds-shadow-sm: 0 1px 3px rgb(15 23 42 / 8%), 0 1px 2px rgb(15 23 42 / 4%);
  --ds-shadow-md: 0 4px 8px rgb(15 23 42 / 8%), 0 2px 4px rgb(15 23 42 / 4%);
  --ds-shadow-lg: 0 12px 24px rgb(15 23 42 / 10%), 0 4px 8px rgb(15 23 42 / 5%);
  --ds-shadow-xl: 0 24px 48px rgb(15 23 42 / 16%);

  /* --- Layering ---------------------------------------------------------- */
  --ds-z-dropdown: 1000;
  --ds-z-sticky: 1100;
  --ds-z-overlay: 1200;
  --ds-z-modal: 1300;
  --ds-z-toast: 1400;

  /* --- Motion ------------------------------------------------------------ */
  --ds-duration-fast: 120ms;
  --ds-duration-base: 180ms;
  --ds-duration-slow: 260ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* --- Control sizing (shared by Button, Input, Select) ------------------- */
  --ds-control-height-sm: 28px;
  --ds-control-height-md: 36px;
  --ds-control-height-lg: 44px;
}

/* ==========================================================================
   Dark theme — semantic layer only.
   Applies to any subtree carrying [data-ds-theme="dark"] (ThemeProvider sets
   this), and to the whole document when the OS prefers dark, unless an
   ancestor has explicitly opted into light.
   ========================================================================== */

[data-ds-theme='dark'] {
  --ds-color-bg: var(--ds-neutral-950);
  --ds-color-surface: var(--ds-neutral-900);
  --ds-color-surface-sunken: var(--ds-neutral-950);
  --ds-color-surface-hover: var(--ds-neutral-800);
  --ds-color-text: var(--ds-neutral-50);
  --ds-color-text-muted: var(--ds-neutral-400);
  --ds-color-text-subtle: var(--ds-neutral-500);
  --ds-color-text-inverse: var(--ds-neutral-950);
  --ds-color-border: var(--ds-neutral-800);
  --ds-color-border-strong: var(--ds-neutral-700);

  --ds-color-accent: var(--ds-blue-500);
  --ds-color-accent-hover: var(--ds-blue-400);
  --ds-color-accent-active: var(--ds-blue-300);
  --ds-color-accent-subtle: rgb(37 99 235 / 18%);
  --ds-color-accent-border: rgb(59 130 246 / 40%);
  --ds-color-accent-text: var(--ds-neutral-950);
  --ds-color-accent-on-subtle: var(--ds-blue-200);

  --ds-color-success: var(--ds-green-500);
  --ds-color-success-subtle: rgb(16 185 129 / 15%);
  --ds-color-success-border: rgb(52 211 153 / 35%);
  --ds-color-success-text: var(--ds-green-200);

  --ds-color-warning: var(--ds-amber-400);
  --ds-color-warning-subtle: rgb(245 158 11 / 15%);
  --ds-color-warning-border: rgb(251 191 36 / 35%);
  --ds-color-warning-text: var(--ds-amber-200);

  --ds-color-danger: var(--ds-red-500);
  --ds-color-danger-hover: var(--ds-red-400);
  --ds-color-danger-subtle: rgb(239 68 68 / 15%);
  --ds-color-danger-border: rgb(248 113 113 / 35%);
  --ds-color-danger-text: var(--ds-red-200);

  --ds-color-info: var(--ds-blue-400);
  --ds-color-info-subtle: rgb(59 130 246 / 15%);
  --ds-color-info-border: rgb(96 165 250 / 35%);
  --ds-color-info-text: var(--ds-blue-200);

  --ds-color-overlay: rgb(2 6 23 / 65%);

  --ds-shadow-xs: 0 1px 2px rgb(0 0 0 / 40%);
  --ds-shadow-sm: 0 1px 3px rgb(0 0 0 / 45%), 0 1px 2px rgb(0 0 0 / 30%);
  --ds-shadow-md: 0 4px 8px rgb(0 0 0 / 45%), 0 2px 4px rgb(0 0 0 / 30%);
  --ds-shadow-lg: 0 12px 24px rgb(0 0 0 / 50%), 0 4px 8px rgb(0 0 0 / 35%);
  --ds-shadow-xl: 0 24px 48px rgb(0 0 0 / 60%);
}