/* Rabexa design tokens.
 *
 * Every colour, space, radius, shadow and type step the panel uses is declared
 * here and nowhere else. `app.css` may reference a token; it may not contain a
 * literal colour. A test enforces that, because the value of this file is
 * entirely in being the only place to look — the day the agency arrives with a
 * brand, changing it is editing this file, not hunting through twenty
 * templates.
 *
 * Two layers on purpose:
 *
 *   --blue-600      a *primitive*. A colour. Means nothing on its own.
 *   --accent        a *semantic* token. What that colour is for.
 *
 * Components only ever use the semantic layer, which is what makes dark mode a
 * redefinition of a dozen tokens rather than a second stylesheet.
 */

:root {
  /* --- Primitives: neutrals ------------------------------------------------
   * Very slightly cool. A pure grey next to the blue reads faintly brown. */
  --n-0: #ffffff;
  --n-25: #fbfcfe;
  --n-50: #f6f8fa;
  --n-100: #eef1f6;
  --n-200: #e1e7ef;
  --n-300: #cbd4e1;
  --n-400: #9aa6b8;
  --n-500: #6b7789;
  --n-600: #4d5768;
  --n-700: #39424f;
  --n-800: #242b35;
  --n-900: #161b22;
  --n-950: #0d1117;

  /* --- Primitives: brand (hi-vis amber) ------------------------------------
   * The signature colour, shared with the worker app: a works-site amber, not
   * the old office blue. Kept in the --b-* slots so every accent token that
   * reads from this scale turns amber in one edit. Close in hue to the --a-*
   * warning ramp on purpose — they never share a role: amber is identity (nav,
   * links, the selected thing); --a-* is only ever a warning badge. */
  --b-50: #fdf6e7;
  --b-100: #f7e6bd;
  --b-200: #eecf86;
  --b-300: #e6b23c;
  --b-400: #d99a1f;
  --b-500: #c88a10;
  --b-600: #b8790c;
  --b-700: #935f08;
  --b-800: #7a4f07;
  --b-900: #613f06;
  --b-950: #3a2603;

  /* --- Primitives: status -------------------------------------------------- */
  --g-50: #e8f7ef;
  --g-100: #c9ecd9;
  --g-500: #12a150;
  --g-600: #0d8a44;
  --g-700: #0a6b36;

  --a-50: #fff7e6;
  --a-100: #ffeab8;
  --a-500: #d99000;
  --a-600: #b87700;
  --a-700: #8f5c00;

  --r-50: #fdecec;
  --r-100: #fad4d5;
  --r-500: #e0464a;
  --r-600: #c8353a;
  --r-700: #a12a2e;

  /* --- Semantic: surfaces -------------------------------------------------- */
  --canvas: var(--n-50);
  --surface: var(--n-0);
  --surface-raised: var(--n-0);
  --surface-sunken: var(--n-100);
  --surface-hover: var(--n-50);
  --surface-active: var(--b-50);

  --border: var(--n-200);
  --border-strong: var(--n-300);

  /* --- Semantic: text ------------------------------------------------------ */
  --text: var(--n-800);
  --text-muted: var(--n-500);
  --text-faint: var(--n-400);
  /* Dark ink, not white: text and icons sit on the amber accent (buttons, the
   * brand mark), and white on amber fails contrast where dark brown passes. */
  --text-on-accent: #2a1d04;

  /* --- Semantic: accent ---------------------------------------------------- */
  --accent: var(--b-600);
  --accent-hover: var(--b-700);
  --accent-soft: var(--b-50);
  --accent-soft-border: var(--b-100);
  --accent-text: var(--b-700);

  /* --- Semantic: status ---------------------------------------------------- */
  --ok: var(--g-600);
  --ok-soft: var(--g-50);
  --ok-border: var(--g-100);

  --warn: var(--a-600);
  --warn-soft: var(--a-50);
  --warn-border: var(--a-100);

  --bad: var(--r-600);
  --bad-soft: var(--r-50);
  --bad-border: var(--r-100);

  --focus: var(--b-500);

  /* The dim behind a drawer or modal — dark in both themes; it sits over the
   * page, not on a surface. */
  --scrim: rgb(13 17 23 / 45%);

  /* --- Type ----------------------------------------------------------------
   * Hebrew and Arabic faces come first in the stack; the Latin fallbacks are
   * the fallback, not the other way round. */
  --font: ui-sans-serif, -apple-system, "Segoe UI", "Noto Sans Hebrew",
    "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* 14px base: this is a console somebody reads all day, not a landing page. */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* --- Space: a 4px rhythm ------------------------------------------------- */
  --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;

  /* --- Shape --------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Layered rather than one blur: a single large shadow reads as a drop
   * shadow, two read as depth. */
  --shadow-sm: 0 1px 2px rgb(13 17 23 / 5%);
  --shadow: 0 1px 2px rgb(13 17 23 / 6%), 0 2px 8px rgb(13 17 23 / 4%);
  --shadow-lg: 0 2px 4px rgb(13 17 23 / 6%), 0 12px 28px rgb(13 17 23 / 8%);

  /* --- Motion --------------------------------------------------------------
   * Short. On a screen refreshed every thirty seconds, anything slower reads
   * as lag rather than polish. */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --fast: 100ms;
  --normal: 160ms;

  --sidebar-width: 15rem;
  --topbar-height: 3.5rem;

  color-scheme: light;
}

/* --- Dark ------------------------------------------------------------------
 * The dark *values* are declared once, as `--dk-*` primitives. The two blocks
 * below only map semantic tokens onto them, so editing a dark colour is one
 * edit and the explicit choice and the system default cannot drift apart. A
 * test asserts the two mappings stay identical.
 *
 * Not an inversion: dark surfaces are lifted rather than pure black, because a
 * black panel beside a white spreadsheet is what actually causes eye strain,
 * and the accent is lightened because --b-600 fails contrast on a dark surface.
 */

:root {
  --dk-canvas: var(--n-950);
  --dk-surface: var(--n-900);
  --dk-surface-raised: var(--n-800);
  --dk-surface-sunken: #0a0e13;
  --dk-surface-hover: var(--n-800);
  --dk-surface-active: rgb(230 178 60 / 16%);
  --dk-border: #232b36;
  --dk-border-strong: #313b48;
  --dk-text: var(--n-100);
  --dk-text-muted: var(--n-400);
  --dk-text-faint: var(--n-500);
  --dk-accent: var(--b-400);
  --dk-accent-hover: var(--b-300);
  --dk-accent-soft: rgb(230 178 60 / 15%);
  --dk-accent-soft-border: rgb(230 178 60 / 30%);
  --dk-accent-text: var(--b-300);
  --dk-ok: #35c46f;
  --dk-ok-soft: rgb(18 161 80 / 15%);
  --dk-ok-border: rgb(18 161 80 / 30%);
  --dk-warn: #e8a825;
  --dk-warn-soft: rgb(217 144 0 / 15%);
  --dk-warn-border: rgb(217 144 0 / 30%);
  --dk-bad: #f2686c;
  --dk-bad-soft: rgb(224 70 74 / 15%);
  --dk-bad-border: rgb(224 70 74 / 32%);
  --dk-scrim: rgb(0 0 0 / 60%);
  --dk-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --dk-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 30%);
  --dk-shadow-lg: 0 2px 4px rgb(0 0 0 / 40%), 0 12px 28px rgb(0 0 0 / 45%);
}

/* DARK-MAP-START */
:root[data-theme="dark"] {
  --canvas: var(--dk-canvas);
  --surface: var(--dk-surface);
  --surface-raised: var(--dk-surface-raised);
  --surface-sunken: var(--dk-surface-sunken);
  --surface-hover: var(--dk-surface-hover);
  --surface-active: var(--dk-surface-active);
  --border: var(--dk-border);
  --border-strong: var(--dk-border-strong);
  --text: var(--dk-text);
  --text-muted: var(--dk-text-muted);
  --text-faint: var(--dk-text-faint);
  --accent: var(--dk-accent);
  --accent-hover: var(--dk-accent-hover);
  --accent-soft: var(--dk-accent-soft);
  --accent-soft-border: var(--dk-accent-soft-border);
  --accent-text: var(--dk-accent-text);
  --ok: var(--dk-ok);
  --ok-soft: var(--dk-ok-soft);
  --ok-border: var(--dk-ok-border);
  --warn: var(--dk-warn);
  --warn-soft: var(--dk-warn-soft);
  --warn-border: var(--dk-warn-border);
  --bad: var(--dk-bad);
  --bad-soft: var(--dk-bad-soft);
  --bad-border: var(--dk-bad-border);
  --scrim: var(--dk-scrim);
  --focus: var(--dk-accent);
  --shadow-sm: var(--dk-shadow-sm);
  --shadow: var(--dk-shadow);
  --shadow-lg: var(--dk-shadow-lg);
  color-scheme: dark;
}
/* DARK-MAP-END */

/* "System" means the device decides. Scoped to [data-theme="system"] so an
 * explicit light choice is not overridden by a dark laptop. */
@media (prefers-color-scheme: dark) {
  /* SYSTEM-MAP-START */
  :root[data-theme="system"] {
    --canvas: var(--dk-canvas);
    --surface: var(--dk-surface);
    --surface-raised: var(--dk-surface-raised);
    --surface-sunken: var(--dk-surface-sunken);
    --surface-hover: var(--dk-surface-hover);
    --surface-active: var(--dk-surface-active);
    --border: var(--dk-border);
    --border-strong: var(--dk-border-strong);
    --text: var(--dk-text);
    --text-muted: var(--dk-text-muted);
    --text-faint: var(--dk-text-faint);
    --accent: var(--dk-accent);
    --accent-hover: var(--dk-accent-hover);
    --accent-soft: var(--dk-accent-soft);
    --accent-soft-border: var(--dk-accent-soft-border);
    --accent-text: var(--dk-accent-text);
    --ok: var(--dk-ok);
    --ok-soft: var(--dk-ok-soft);
    --ok-border: var(--dk-ok-border);
    --warn: var(--dk-warn);
    --warn-soft: var(--dk-warn-soft);
    --warn-border: var(--dk-warn-border);
    --bad: var(--dk-bad);
    --bad-soft: var(--dk-bad-soft);
    --bad-border: var(--dk-bad-border);
    --scrim: var(--dk-scrim);
    --focus: var(--dk-accent);
    --shadow-sm: var(--dk-shadow-sm);
    --shadow: var(--dk-shadow);
    --shadow-lg: var(--dk-shadow-lg);
    color-scheme: dark;
  }
  /* SYSTEM-MAP-END */
}