/* ==========================================================================
   DESIGN TOKENS
   Three tiers. Components only ever read tier 2 (semantic) and tier 3.
     1. Primitive  — raw values. Never referenced by components directly.
     2. Semantic   — intent (bg, text, border, accent…). Themed per mode.
     3. Component  — a handful of values shared by specific components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMITIVES
   -------------------------------------------------------------------------- */
:root {
  /* Neutral: warm graphite, hue 75. Steps tuned for even perceived lightness. */
  --gray-0:   oklch(0.995 0.002 75);
  --gray-25:  oklch(0.982 0.004 75);
  --gray-50:  oklch(0.965 0.005 75);
  --gray-100: oklch(0.935 0.006 75);
  --gray-200: oklch(0.885 0.007 75);
  --gray-300: oklch(0.80  0.008 75);
  --gray-400: oklch(0.68  0.009 75);
  --gray-500: oklch(0.56  0.010 75);
  --gray-600: oklch(0.46  0.010 75);
  --gray-700: oklch(0.36  0.010 75);
  --gray-800: oklch(0.26  0.009 75);
  --gray-850: oklch(0.215 0.008 75);
  --gray-900: oklch(0.18  0.007 75);
  --gray-950: oklch(0.145 0.006 75);

  /* Accent: oxide. Used for focus, markers and the single primary action. */
  --oxide-200: oklch(0.88 0.06 45);
  --oxide-300: oklch(0.80 0.10 45);
  --oxide-400: oklch(0.72 0.14 45);
  --oxide-500: oklch(0.64 0.16 42);
  --oxide-600: oklch(0.56 0.16 40);
  --oxide-700: oklch(0.48 0.14 38);

  --green-600: oklch(0.52 0.11 155);
  --green-300: oklch(0.78 0.11 155);
  --red-600:   oklch(0.53 0.17 27);
  --red-300:   oklch(0.75 0.13 27);

  /* Type families: one superfamily covers Latin, Arabic and mono. */
  --family-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --family-arabic: 'IBM Plex Sans Arabic', 'IBM Plex Sans', Tahoma, sans-serif;
  --family-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* --------------------------------------------------------------------------
   2. SEMANTIC — light (default)
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --color-bg:             var(--gray-25);
  --color-bg-subtle:      var(--gray-50);
  --color-surface:        var(--gray-0);
  --color-surface-hover:  var(--gray-50);
  --color-inverse-bg:     var(--gray-900);
  --color-inverse-text:   var(--gray-25);

  --color-text:           var(--gray-900);
  --color-text-muted:     var(--gray-600);
  --color-text-subtle:    var(--gray-500);

  --color-border:         var(--gray-200);
  --color-border-strong:  var(--gray-300);
  --color-border-focus:   var(--oxide-600);

  --color-accent:         var(--oxide-600);
  --color-accent-hover:   var(--oxide-700);
  --color-accent-text:    var(--oxide-700);   /* AA on bg for small text */
  --color-accent-subtle:  oklch(0.56 0.16 40 / 0.08);
  --color-on-accent:      var(--gray-0);

  --color-success:        var(--green-600);
  --color-danger:         var(--red-600);

  --shadow-raised: 0 1px 0 oklch(0.18 0.007 75 / 0.04), 0 8px 24px -12px oklch(0.18 0.007 75 / 0.18);
}

/* --------------------------------------------------------------------------
   2b. SEMANTIC — dark
   Applied by system preference unless the visitor chose light, or forced
   by data-theme="dark".
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg:             var(--gray-950);
    --color-bg-subtle:      var(--gray-900);
    --color-surface:        var(--gray-900);
    --color-surface-hover:  var(--gray-850);
    --color-inverse-bg:     var(--gray-50);
    --color-inverse-text:   var(--gray-950);
    --color-text:           var(--gray-50);
    --color-text-muted:     var(--gray-400);
    --color-text-subtle:    var(--gray-500);
    --color-border:         var(--gray-800);
    --color-border-strong:  var(--gray-700);
    --color-border-focus:   var(--oxide-400);
    --color-accent:         var(--oxide-400);
    --color-accent-hover:   var(--oxide-300);
    --color-accent-text:    var(--oxide-300);
    --color-accent-subtle:  oklch(0.72 0.14 45 / 0.12);
    --color-on-accent:      var(--gray-950);
    --color-success:        var(--green-300);
    --color-danger:         var(--red-300);
    --shadow-raised: 0 0 0 1px var(--gray-800), 0 12px 32px -16px oklch(0 0 0 / 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:             var(--gray-950);
  --color-bg-subtle:      var(--gray-900);
  --color-surface:        var(--gray-900);
  --color-surface-hover:  var(--gray-850);
  --color-inverse-bg:     var(--gray-50);
  --color-inverse-text:   var(--gray-950);
  --color-text:           var(--gray-50);
  --color-text-muted:     var(--gray-400);
  --color-text-subtle:    var(--gray-500);
  --color-border:         var(--gray-800);
  --color-border-strong:  var(--gray-700);
  --color-border-focus:   var(--oxide-400);
  --color-accent:         var(--oxide-400);
  --color-accent-hover:   var(--oxide-300);
  --color-accent-text:    var(--oxide-300);
  --color-accent-subtle:  oklch(0.72 0.14 45 / 0.12);
  --color-on-accent:      var(--gray-950);
  --color-success:        var(--green-300);
  --color-danger:         var(--red-300);
  --shadow-raised: 0 0 0 1px var(--gray-800), 0 12px 32px -16px oklch(0 0 0 / 0.6);
}

/* --------------------------------------------------------------------------
   2c. SEMANTIC — typography, space, layout, shape, motion (mode-independent)
   -------------------------------------------------------------------------- */
:root {
  --font-body: var(--family-sans);
  --font-heading: var(--family-sans);
  --font-mono: var(--family-mono);

  /* Type scale: major third (1.25) at body, fluid at display sizes. */
  --text-2xs: 0.6875rem;  /* 11 — mono labels */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-md:  1rem;       /* 16 — body */
  --text-lg:  1.125rem;   /* 18 — lead body */
  --text-xl:  1.25rem;    /* 20 */
  --text-2xl: clamp(1.375rem, 1.1rem + 0.9vw, 1.625rem);   /* 22→26 */
  --text-3xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);     /* 28→36 */
  --text-4xl: clamp(2.125rem, 1.4rem + 2.8vw, 3.25rem);    /* 34→52 */

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;
  --tracking-label: 0.08em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Space: 4px base. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* Layout */
  --container-max: 75rem;     /* 1200 */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --grid-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  --measure: 62ch;
  --header-height: 4rem;

  /* Shape */
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-width: 1px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layers */
  --z-header: 50;
  --z-skip: 100;
}

/* Arabic: swap family, drop negative tracking and uppercase-style spacing,
   and open the leading — Arabic needs room for ascenders and diacritics. */
:root[lang="ar"] {
  --font-body: var(--family-arabic);
  --font-heading: var(--family-arabic);
  --tracking-tight: 0;
  --tracking-snug: 0;
  --tracking-label: 0;
  --leading-tight: 1.4;
  --leading-snug: 1.55;
  --leading-body: 1.85;
}

/* --------------------------------------------------------------------------
   3. COMPONENT TOKENS
   -------------------------------------------------------------------------- */
:root {
  --control-height: 2.75rem;      /* 44px — touch target */
  --control-height-sm: 2.25rem;
  --control-padding-x: var(--space-5);
  --control-radius: var(--radius-sm);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-border-focus);
  --rule: var(--border-width) solid var(--color-border);
  --rule-strong: var(--border-width) solid var(--color-border-strong);
}

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