/* house-console — foundation/tokens.css  (Layer 0: the ONLY file allowed to hold a bare
   hex/rgb literal). Everything downstream — components.css, patterns.css, proof CSS, mock.js —
   consumes var(--*) only, with NO fallback chains (never a comma-default inside a var lookup).

   Architecture:
   - The SPINE (01-shadcn-foundation) owns the semantic token *names* (--background, --foreground,
     --card, --primary, --muted-foreground, --danger, …). Those names are the stable public API and
     are NOT renamed here. The console skin changes their VALUES.
   - The industry-grade graft (02-radix-foundation) supplies the raw palette as 12-step scales with
     defined contrast roles, re-hued to this skin: neutral = Radix Slate, accent = Radix Cyan
     (MIT, WorkOS — see LICENSE-radix-colors.txt). Every semantic token below is a LOOKUP into those
     scales, not a hand-judged one-off, so contrast is known rather than guessed.
   - A short list of ADDED semantic tokens (never renames) carries the grafts the bare spine lacks:
     --surface-sunken, --primary-soft/-border, --text-on-accent, --selected, --accent-bright,
     --focus-ring-color/--shadow-focus-ring, --tooltip-bg/-text, --text-2xs, --sp-1-5/-2-5/-16,
     --border-width*, tracking + --shadow-overlay/--duration-instant. These are documented in
     content/README.md and HEALTH.md.

   Radix scale roles used here: step 9 = solid accent bg; 11 = accessible low-contrast text;
   12 = high-contrast text; 3 = soft tinted bg; 6 = soft border; alpha ramps = overlays/selection.
   NOTE on cyan: cyan is a *bright* Radix scale, so white-on-cyan-9 fails AA. The console skin
   anchors the white-text solid --primary at the teal end of the scale (≈ cyan 11/12 luminance) so
   `.btn--primary` clears AA, and exposes bright cyan-9 as --accent-bright for non-text accents
   (brand dot, focus glints). In dark the button flips to bright cyan with dark ink (--text-on-accent). */

:root {
  color-scheme: light;

  /* ---- raw scale: neutral (Radix Slate, light) ---- */
  --slate-1: #fcfcfd;
  --slate-2: #f9f9fb;
  --slate-3: #f0f0f3;
  --slate-4: #e8e8ec;
  --slate-5: #e0e1e6;
  --slate-6: #d9d9e0;
  --slate-7: #cdced6;
  --slate-8: #b9bbc6;
  --slate-9: #8b8d98;
  --slate-10: #80838d;
  --slate-10-5: #6b6f78; /* AA-safe faint-text tone: half-step between 10 and 11. 4.79:1 on --background, 5.04:1 on card (small text ≥4.5); stays lighter than slate-11 so the faint tier reads below muted. */
  --slate-11: #60646c;
  --slate-12: #1c2024;
  --slate-a3: #0000330f;
  --slate-a6: #00002f26;
  --slate-a8: #00083046;
  --slate-surface: #ffffffcc;

  /* ---- raw scale: accent (Radix Cyan, light) ---- */
  --cyan-1: #fafdfe;
  --cyan-2: #f2fcfd;
  --cyan-3: #e7f9fb;
  --cyan-4: #d8f3f6;
  --cyan-5: #c4eaef;
  --cyan-6: #aadee6;
  --cyan-7: #84cdda;
  --cyan-8: #3db9cf;
  --cyan-9: #00a2c7;
  --cyan-10: #0797b9;
  --cyan-11: #107d98;
  --cyan-12: #0d3c48;
  --cyan-a3: #00bcd918;
  --cyan-a5: #00a1bd3b;

  /* teal anchors — the AA-safe solid-accent end of the cyan family (white text passes) */
  --teal-9: #0e7490;
  --teal-10: #155e75;
  --teal-11: #164e63;

  /* ---- raw scale: status (proven AA values; light = dark-fill / light-tint) ---- */
  --red-solid: #dc2626;   --red-bg: #fef2f2;   --red-border: #fecaca;   --red-text: #b91c1c;
  --amber-solid: #b45309; --amber-bg: #fffbeb; --amber-border: #fde68a; --amber-text: #92400e;
  --green-solid: #15803d; --green-bg: #f0fdf4; --green-border: #bbf7d0; --green-text: #166534;

  /* black alpha ramp — theme-invariant, for overlay/shadow compositing */
  --black-a1: rgba(0, 0, 0, 0.04);
  --black-a2: rgba(0, 0, 0, 0.06);
  --black-a3: rgba(0, 0, 0, 0.10);

  /* ================= semantic (spine names — VALUES are the console skin) ================= */
  --background: var(--slate-2);
  --foreground: var(--slate-12);
  --card: #ffffff;
  --card-foreground: var(--slate-12);
  --popover: #ffffff;
  --popover-foreground: var(--slate-12);

  --primary: var(--teal-9);
  --primary-foreground: #ffffff;
  --primary-hover: var(--teal-10);
  --primary-active: var(--teal-11);
  --secondary: var(--slate-3);
  --secondary-foreground: var(--slate-12);
  --secondary-hover: var(--slate-4);

  --muted-foreground: var(--slate-11);
  --faint-foreground: var(--slate-10-5);
  --border: var(--slate-6);
  --border-strong: var(--slate-7);
  --input: var(--slate-7);
  --ring: var(--slate-12);
  --hover: var(--slate-3);
  --overlay: rgba(15, 23, 30, 0.30);
  --link: var(--cyan-11);

  /* added semantic tokens (grafts need these; not renames of spine tokens) */
  --surface-sunken: var(--slate-3);
  --accent-bright: var(--cyan-9);
  --primary-soft: var(--cyan-3);
  --primary-soft-border: var(--cyan-6);
  --selected: rgba(0, 162, 199, 0.10);
  --text-on-accent: #ffffff;
  --focus-ring-color: rgba(14, 116, 144, 0.35);
  --shadow-focus-ring: 0 0 0 3px var(--focus-ring-color);
  --tooltip-bg: var(--slate-12);
  --tooltip-text: var(--slate-1);

  /* status — always icon + label, never color alone */
  --danger: var(--red-solid);   --danger-bg: var(--red-bg);   --danger-border: var(--red-border);   --danger-text: var(--red-text);
  --warning: var(--amber-solid); --warning-bg: var(--amber-bg); --warning-border: var(--amber-border); --warning-text: var(--amber-text);
  --success: var(--green-solid); --success-bg: var(--green-bg); --success-border: var(--green-border); --success-text: var(--green-text);
  --info: var(--cyan-9);        --info-bg: var(--cyan-2);      --info-border: var(--cyan-6);         --info-text: var(--cyan-11);
  --neutral-bg: var(--slate-3); --neutral-border: var(--slate-6); --neutral-text: var(--slate-11);
  --skeleton: var(--slate-3);

  /* ---- type ---- */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-base: 1.5;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.04em;

  /* ---- spacing (dense scale) ---- */
  --sp-0-5: 0.125rem;
  --sp-1: 0.25rem;
  --sp-1-5: 0.375rem;
  --sp-2: 0.5rem;
  --sp-2-5: 0.625rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ---- shape (sharp corners, hairline borders) ---- */
  --radius-sm: 0.1875rem;
  --radius: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-full: 9999px;
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- depth (hairline over shadow — the console prefers borders) ---- */
  --shadow-xs: 0 1px 0 rgba(15, 23, 30, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 30, 0.06);
  --shadow-md: 0 4px 10px -2px rgba(15, 23, 30, 0.10), 0 2px 4px -2px rgba(15, 23, 30, 0.06);
  --shadow-lg: 0 10px 24px -6px rgba(15, 23, 30, 0.14), 0 4px 8px -4px rgba(15, 23, 30, 0.08);
  --shadow-overlay: 0 12px 32px -8px rgba(15, 23, 30, 0.22);

  /* ---- motion ---- */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ================= dark theme — explicit toggle ================= */
[data-theme="dark"] {
  color-scheme: dark;

  /* neutral (Radix Slate, dark) */
  --slate-1: #111113;
  --slate-2: #18191b;
  --slate-3: #212225;
  --slate-4: #272a2d;
  --slate-5: #2e3135;
  --slate-6: #363a3f;
  --slate-7: #43484e;
  --slate-8: #5a6169;
  --slate-9: #696e77;
  --slate-10: #777b84;
  --slate-10-5: #8b8f98; /* AA-safe faint-text tone (dark): 5.82:1 on --background, 5.43:1 on card; stays darker than slate-11 so the faint tier reads below muted. */
  --slate-11: #b0b4ba;
  --slate-12: #edeef0;
  --slate-a3: #ddeaf814;
  --slate-a6: #d6ebfd30;
  --slate-a8: #d9edff5d;
  --slate-surface: #1f212380;

  /* accent (Radix Cyan, dark) */
  --cyan-1: #0b161a;
  --cyan-2: #101b20;
  --cyan-3: #082c36;
  --cyan-4: #003848;
  --cyan-5: #004558;
  --cyan-6: #045468;
  --cyan-7: #12677e;
  --cyan-8: #11809c;
  --cyan-9: #00a2c7;
  --cyan-10: #23afd0;
  --cyan-11: #4ccce6;
  --cyan-12: #b6ecf7;
  --cyan-a3: #00c8f81e;
  --cyan-a5: #00caf73a;

  /* in dark the accent runs bright with dark ink; teal anchors track the bright end */
  --teal-9: #22d3ee;
  --teal-10: #67e8f9;
  --teal-11: #a5f3fa;

  --red-solid: #e5484d;   --red-bg: rgba(229, 72, 77, 0.14);   --red-border: rgba(229, 72, 77, 0.32);   --red-text: #ff9592;
  --amber-solid: #fbbf24; --amber-bg: rgba(251, 191, 36, 0.13); --amber-border: rgba(251, 191, 36, 0.30); --amber-text: #fcd34d;
  --green-solid: #4ade80; --green-bg: rgba(74, 222, 128, 0.13); --green-border: rgba(74, 222, 128, 0.30); --green-text: #86efac;

  --background: var(--slate-1);
  --foreground: var(--slate-12);
  --card: var(--slate-2);
  --card-foreground: var(--slate-12);
  --popover: var(--slate-3);
  --popover-foreground: var(--slate-12);

  --primary: var(--teal-9);
  --primary-foreground: #05252e;
  --primary-hover: var(--teal-10);
  --primary-active: var(--teal-11);
  --secondary: var(--slate-3);
  --secondary-foreground: var(--slate-12);
  --secondary-hover: var(--slate-4);

  --muted-foreground: var(--slate-11);
  --faint-foreground: var(--slate-10-5);
  --border: var(--slate-a6);
  --border-strong: var(--slate-a8);
  --input: var(--slate-7);
  --ring: var(--cyan-11);
  --hover: var(--slate-a3);
  --overlay: rgba(0, 0, 0, 0.55);
  --link: var(--cyan-11);

  --surface-sunken: var(--slate-1);
  --accent-bright: var(--cyan-11);
  --primary-soft: rgba(34, 211, 238, 0.14);
  --primary-soft-border: rgba(34, 211, 238, 0.30);
  --selected: rgba(34, 211, 238, 0.12);
  --text-on-accent: #05252e;
  --focus-ring-color: rgba(34, 211, 238, 0.40);
  --shadow-focus-ring: 0 0 0 3px var(--focus-ring-color);
  --tooltip-bg: var(--slate-12);
  --tooltip-text: var(--slate-1);

  --danger: var(--red-solid);   --danger-bg: var(--red-bg);   --danger-border: var(--red-border);   --danger-text: var(--red-text);
  --warning: var(--amber-solid); --warning-bg: var(--amber-bg); --warning-border: var(--amber-border); --warning-text: var(--amber-text);
  --success: var(--green-solid); --success-bg: var(--green-bg); --success-border: var(--green-border); --success-text: var(--green-text);
  --info: var(--cyan-11);       --info-bg: var(--cyan-3);      --info-border: var(--cyan-6);         --info-text: var(--cyan-11);
  --neutral-bg: var(--slate-3); --neutral-border: var(--slate-6); --neutral-text: var(--slate-11);
  --skeleton: var(--slate-4);

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50);
  --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.60), 0 4px 10px -4px rgba(0, 0, 0, 0.45);
  --shadow-overlay: 0 16px 40px -8px rgba(0, 0, 0, 0.60);
}

/* ================= dark theme — OS preference when no explicit theme set ================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;

    --slate-1: #111113;
    --slate-2: #18191b;
    --slate-3: #212225;
    --slate-4: #272a2d;
    --slate-5: #2e3135;
    --slate-6: #363a3f;
    --slate-7: #43484e;
    --slate-8: #5a6169;
    --slate-9: #696e77;
    --slate-10: #777b84;
    --slate-10-5: #8b8f98; /* AA-safe faint-text tone (dark): 5.82:1 on --background, 5.43:1 on card; stays darker than slate-11 so the faint tier reads below muted. */
    --slate-11: #b0b4ba;
    --slate-12: #edeef0;
    --slate-a3: #ddeaf814;
    --slate-a6: #d6ebfd30;
    --slate-a8: #d9edff5d;
    --slate-surface: #1f212380;

    --cyan-1: #0b161a;
    --cyan-2: #101b20;
    --cyan-3: #082c36;
    --cyan-4: #003848;
    --cyan-5: #004558;
    --cyan-6: #045468;
    --cyan-7: #12677e;
    --cyan-8: #11809c;
    --cyan-9: #00a2c7;
    --cyan-10: #23afd0;
    --cyan-11: #4ccce6;
    --cyan-12: #b6ecf7;
    --cyan-a3: #00c8f81e;
    --cyan-a5: #00caf73a;

    --teal-9: #22d3ee;
    --teal-10: #67e8f9;
    --teal-11: #a5f3fa;

    --red-solid: #e5484d;   --red-bg: rgba(229, 72, 77, 0.14);   --red-border: rgba(229, 72, 77, 0.32);   --red-text: #ff9592;
    --amber-solid: #fbbf24; --amber-bg: rgba(251, 191, 36, 0.13); --amber-border: rgba(251, 191, 36, 0.30); --amber-text: #fcd34d;
    --green-solid: #4ade80; --green-bg: rgba(74, 222, 128, 0.13); --green-border: rgba(74, 222, 128, 0.30); --green-text: #86efac;

    --background: var(--slate-1);
    --foreground: var(--slate-12);
    --card: var(--slate-2);
    --card-foreground: var(--slate-12);
    --popover: var(--slate-3);
    --popover-foreground: var(--slate-12);

    --primary: var(--teal-9);
    --primary-foreground: #05252e;
    --primary-hover: var(--teal-10);
    --primary-active: var(--teal-11);
    --secondary: var(--slate-3);
    --secondary-foreground: var(--slate-12);
    --secondary-hover: var(--slate-4);

    --muted-foreground: var(--slate-11);
    --faint-foreground: var(--slate-10-5);
    --border: var(--slate-a6);
    --border-strong: var(--slate-a8);
    --input: var(--slate-7);
    --ring: var(--cyan-11);
    --hover: var(--slate-a3);
    --overlay: rgba(0, 0, 0, 0.55);
    --link: var(--cyan-11);

    --surface-sunken: var(--slate-1);
    --accent-bright: var(--cyan-11);
    --primary-soft: rgba(34, 211, 238, 0.14);
    --primary-soft-border: rgba(34, 211, 238, 0.30);
    --selected: rgba(34, 211, 238, 0.12);
    --text-on-accent: #05252e;
    --focus-ring-color: rgba(34, 211, 238, 0.40);
    --shadow-focus-ring: 0 0 0 3px var(--focus-ring-color);
    --tooltip-bg: var(--slate-12);
    --tooltip-text: var(--slate-1);

    --danger: var(--red-solid);   --danger-bg: var(--red-bg);   --danger-border: var(--red-border);   --danger-text: var(--red-text);
    --warning: var(--amber-solid); --warning-bg: var(--amber-bg); --warning-border: var(--amber-border); --warning-text: var(--amber-text);
    --success: var(--green-solid); --success-bg: var(--green-bg); --success-border: var(--green-border); --success-text: var(--green-text);
    --info: var(--cyan-11);       --info-bg: var(--cyan-3);      --info-border: var(--cyan-6);         --info-text: var(--cyan-11);
    --neutral-bg: var(--slate-3); --neutral-border: var(--slate-6); --neutral-text: var(--slate-11);
    --skeleton: var(--slate-4);

    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50);
    --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.60), 0 4px 10px -4px rgba(0, 0, 0, 0.45);
    --shadow-overlay: 0 16px 40px -8px rgba(0, 0, 0, 0.60);
  }
}