/* ============================================================
   Design tokens. Every value used by a component lives here.
   Dark theme is a token remap on the same names — not a second
   stylesheet. Contrast ratios are documented in README.md.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Spacing: 4pt base grid ------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Radius ---------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* --- Type ramp ------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans Arabic", "Noto Kufi Arabic", sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-display: 32px;   --lh-display: 40px;
  --text-title: 20px;     --lh-title: 28px;
  --text-subtitle: 17px;  --lh-subtitle: 24px;
  --text-body: 16px;      --lh-body: 24px;
  --text-caption: 14px;   --lh-caption: 20px;

  --weight-regular: 400;
  --weight-medium: 550;
  --weight-bold: 700;

  /* --- Motion ---------------------------------------------- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* --- Elevation ------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --shadow-2: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-3: 0 12px 24px -6px rgba(16, 24, 40, 0.16), 0 4px 8px -4px rgba(16, 24, 40, 0.08);

  /* --- Sizing ---------------------------------------------- */
  --target-min: 44px;          /* minimum touch/click target */
  --nav-height: 64px;
  --content-max: 720px;

  /* --- Color: light ---------------------------------------- */
  --c-bg: #FFFFFF;
  --c-surface: #F6F7F9;
  --c-surface-raised: #FFFFFF;
  --c-text: #14181F;
  --c-text-muted: #5A6373;
  --c-accent: #0F7A46;
  --c-accent-text: #FFFFFF;
  --c-accent-soft: #E4F3EA;
  --c-danger: #B3261E;
  --c-danger-text: #FFFFFF;
  --c-danger-soft: #FBE9E7;
  --c-warn: #8A5300;
  --c-warn-soft: #FCF0DC;
  --c-border: #6B7280;        /* interactive boundaries, >= 3:1 */
  --c-divider: #D3D8E0;       /* decorative separators only */
  --c-focus: #0B57D0;
  --c-track: #E3E7EC;
  --c-overlay: rgba(20, 24, 31, 0.48);
}

/* Dark as a token remap. Applied when the OS asks for it and the user has
   not forced light, or when the user explicitly picks dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: #0E1116;
    --c-surface: #161B22;
    --c-surface-raised: #1C222C;
    --c-text: #E8EBF0;
    --c-text-muted: #A3ADBD;
    --c-accent: #3DD68C;
    --c-accent-text: #0E1116;
    --c-accent-soft: #123527;
    --c-danger: #FF7B72;
    --c-danger-text: #0E1116;
    --c-danger-soft: #3A1A18;
    --c-warn: #F2B25C;
    --c-warn-soft: #3A2A10;
    --c-border: #6E7A8F;
    --c-divider: #2A313C;
    --c-focus: #7AA7FF;
    --c-track: #2A313C;
    --c-overlay: rgba(3, 6, 10, 0.64);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-2: 0 4px 8px -2px rgba(0, 0, 0, 0.48);
    --shadow-3: 0 12px 24px -6px rgba(0, 0, 0, 0.56);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0E1116;
  --c-surface: #161B22;
  --c-surface-raised: #1C222C;
  --c-text: #E8EBF0;
  --c-text-muted: #A3ADBD;
  --c-accent: #3DD68C;
  --c-accent-text: #0E1116;
  --c-accent-soft: #123527;
  --c-danger: #FF7B72;
  --c-danger-text: #0E1116;
  --c-danger-soft: #3A1A18;
  --c-warn: #F2B25C;
  --c-warn-soft: #3A2A10;
  --c-border: #6E7A8F;
  --c-divider: #2A313C;
  --c-focus: #7AA7FF;
  --c-track: #2A313C;
  --c-overlay: rgba(3, 6, 10, 0.64);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 4px 8px -2px rgba(0, 0, 0, 0.48);
  --shadow-3: 0 12px 24px -6px rgba(0, 0, 0, 0.56);
}