/*
  Tokens in three tiers (design/PHILOSOPHY.md).
  Tier 1, primitives: the only hex values anywhere. The platform brand is the --brand-* ramp,
  which points at blue until the platform team picks the brand: swapping it is this file only.
  Tier 2, semantic: what a thing is, for light and dark. Components read only these.
  Tier 3, component: knobs a single component needs.
*/

/* ---- tier 1: primitives ------------------------------------------------------------------- */
:root {
  --blue-50: #eef3ff;
  --blue-100: #dce6ff;
  --blue-200: #bccfff;
  --blue-300: #8fb0ff;
  --blue-400: #6d8ff5;
  --blue-500: #3b66ea;
  --blue-600: #2451d6;
  --blue-700: #1d43b3;
  --blue-800: #1d388c;
  --blue-900: #1a2442;
  --blue-950: #121a33;

  --neutral-0: #ffffff;
  --neutral-25: #f8f9fb;
  --neutral-50: #f4f5f7;
  --neutral-100: #eef0f4;
  --neutral-200: #e3e6ec;
  --neutral-300: #d3d8e1;
  --neutral-400: #a7aebb;
  --neutral-500: #5d6576;
  --neutral-600: #4f5768;
  --neutral-700: #3a4252;
  --neutral-750: #323c4b;
  --neutral-800: #262f3c;
  --neutral-850: #222a37;
  --neutral-875: #1a212c;
  --neutral-900: #151b24;
  --neutral-950: #0d1117;
  --neutral-1000: #121826;
  --neutral-dark-text: #e8ebf1;
  --neutral-dark-text-2: #c2c8d3;
  --neutral-dark-muted: #8b93a3;

  --green-50: #e3f5ec;
  --green-400: #3cc98e;
  --green-700: #0b6b45;
  --green-950: #12291f;
  --amber-50: #fdf1dc;
  --amber-400: #e6a23c;
  --amber-800: #8a5300;
  --amber-950: #2b2112;
  --red-50: #fbe7e5;
  --red-400: #f07167;
  --red-600: #c2352b;
  --red-950: #2e1716;

  /* the platform brand: one ramp, today blue */
  --brand-50: var(--blue-50);
  --brand-300: var(--blue-300);
  --brand-400: var(--blue-400);
  --brand-600: var(--blue-600);
  --brand-700: var(--blue-700);
  --brand-900: var(--blue-900);

  --shadow-light-sm: 0 1px 2px rgb(18 24 38 / .06);
  --shadow-light: 0 1px 3px rgb(18 24 38 / .08), 0 8px 24px -12px rgb(18 24 38 / .14);
  --shadow-light-lg: 0 24px 48px -12px rgb(18 24 38 / .28);
  --shadow-dark-sm: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-dark: 0 8px 24px -12px rgb(0 0 0 / .6);
  --shadow-dark-lg: 0 24px 48px -12px rgb(0 0 0 / .7);
  --scrim-base: rgb(13 17 23 / .5);

  --font-latin: "IBM Plex Sans";
  --font-arabic: "Tajawal";
  /* chosen 2026-10-22 (D-051); compare others in the prototype panel */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-16: 64px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;
}

/* ---- tier 2: semantic, light ------------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg: var(--neutral-50);
  --panel: var(--neutral-0);
  --surface: var(--neutral-25);
  --surface-2: var(--neutral-100);
  --text: var(--neutral-1000);
  --text-2: var(--neutral-700);
  --muted: var(--neutral-500);
  --border: var(--neutral-200);
  --border-2: var(--neutral-300);
  --accent: var(--brand-600);
  --accent-soft: var(--brand-50);
  --accent-text: var(--brand-700);
  --accent-ink: var(--neutral-0);
  --ok: var(--green-700);
  --ok-soft: var(--green-50);
  --warn: var(--amber-800);
  --warn-soft: var(--amber-50);
  --bad: var(--red-600);
  --bad-soft: var(--red-50);
  --bad-ink: var(--neutral-0);
  --focus: var(--brand-600);
  --shade: var(--neutral-1000);
  --scrim: var(--scrim-base);
  --shadow-sm: var(--shadow-light-sm);
  --shadow: var(--shadow-light);
  --shadow-lg: var(--shadow-light-lg);
  --font: var(--font-latin), var(--font-arabic), system-ui, sans-serif;
}

:root[dir="rtl"] {
  --font: var(--font-arabic), var(--font-latin), system-ui, sans-serif;
}

/* ---- tier 2: semantic, dark (system preference unless overridden, and the explicit choice) - */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--neutral-950);
    --panel: var(--neutral-900);
    --surface: var(--neutral-875);
    --surface-2: var(--neutral-850);
    --text: var(--neutral-dark-text);
    --text-2: var(--neutral-dark-text-2);
    --muted: var(--neutral-dark-muted);
    --border: var(--neutral-800);
    --border-2: var(--neutral-750);
    --accent: var(--brand-400);
    --accent-soft: var(--brand-900);
    --accent-text: var(--brand-300);
    --accent-ink: var(--neutral-950);
    --ok: var(--green-400);
    --ok-soft: var(--green-950);
    --warn: var(--amber-400);
    --warn-soft: var(--amber-950);
    --bad: var(--red-400);
    --bad-soft: var(--red-950);
    --bad-ink: var(--neutral-950);
    --focus: var(--brand-400);
    --shadow-sm: var(--shadow-dark-sm);
    --shadow: var(--shadow-dark);
    --shadow-lg: var(--shadow-dark-lg);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--neutral-950);
  --panel: var(--neutral-900);
  --surface: var(--neutral-875);
  --surface-2: var(--neutral-850);
  --text: var(--neutral-dark-text);
  --text-2: var(--neutral-dark-text-2);
  --muted: var(--neutral-dark-muted);
  --border: var(--neutral-800);
  --border-2: var(--neutral-750);
  --accent: var(--brand-400);
  --accent-soft: var(--brand-900);
  --accent-text: var(--brand-300);
  --accent-ink: var(--neutral-950);
  --ok: var(--green-400);
  --ok-soft: var(--green-950);
  --warn: var(--amber-400);
  --warn-soft: var(--amber-950);
  --bad: var(--red-400);
  --bad-soft: var(--red-950);
  --bad-ink: var(--neutral-950);
  --focus: var(--brand-400);
  --shadow-sm: var(--shadow-dark-sm);
  --shadow: var(--shadow-dark);
  --shadow-lg: var(--shadow-dark-lg);
}

/* ---- tier 3: component knobs -------------------------------------------------------------- */
:root[dir="rtl"] {
  --lh-body: 1.8;
  --lh-head: 1.55;
  --lh-tight: 1.45;
}

:root {
  --control-h: 36px;
  --control-h-lg: 44px;
  --row-min-h: 56px;
  /* line heights: Arabic needs taller lines than Latin, or marks above and below touch */
  --lh-body: 1.5;
  --lh-head: 1.25;
  --lh-tight: 1.15;
  --sidebar-w: 248px;
  --content-max: 1120px;
}