/* Design tokens v2 — «Ink & Teal», the single source of truth for the portal.
 *
 * Three tiers (W3C DTCG): GLOBAL primitives → ALIAS semantics → components use
 * ONLY aliases. Loaded before portal.css.
 *
 * v2 rationale (research-backed, see .info/tasks/design-audit/DESIGN_LANGUAGE.md):
 *  - Neutrals = Untitled UI gray ramp (#FCFCFD…#0C111D) — the industry-standard
 *    cool scale; each step has a fixed ROLE (bg / border / muted / text), never
 *    "gray by eye" (Vercel Geist principle).
 *  - Accent = deep teal (Attio-style pairing with a slate-950 sidebar), replacing
 *    the default Tailwind indigo #4f46e5. Teal stays distinct from every semantic
 *    hue (success-green, danger-red, warning-amber, info-blue).
 *  - Chrome = ink sidebar (#0C111D) with light content — Stripe/Retool/Metabase
 *    pattern: chrome separates from data.
 *  - Shadows are hairline-quiet (not "material"); color is dosed — the UI is
 *    ~99% grayscale, accent appears only where action lives (Stripe ledger).
 * Dark mode later = override the ALIAS tier only.
 */
:root {
  /* ============ 1. GLOBAL primitives (never used directly in components) ============ */

  /* neutral ramp — Untitled UI grays */
  --n-0:   #ffffff;
  --n-25:  #fcfcfd;
  --n-50:  #f9fafb;  /* page background; table row hover */
  --n-100: #f2f4f7;  /* pressed/hover surfaces, chips */
  --n-150: #eaecf0;  /* BORDERS / dividers (gray-200) */
  --n-200: #d0d5dd;  /* control borders (gray-300) */
  --n-300: #b8c0ce;  /* stronger border / hover-border */
  --n-400: #98a2b3;  /* DECORATIVE / icons only — MUST NOT carry text */
  --n-500: #667085;  /* muted text — 4.8:1 (AA) */
  --n-600: #475467;  /* secondary text */
  --n-700: #344054;
  --n-800: #1d2939;
  --n-900: #101828;  /* primary text */

  /* ink — the dark chrome (sidebar), approved concept v3 values */
  --ink:          #101828;               /* softened: gray-900, not 950 */
  --ink-hover:    rgba(255, 255, 255, .06);
  --ink-active:   rgba(45, 212, 191, .13);   /* teal-tinted active pill */
  --ink-hairline: rgba(255, 255, 255, .07);
  --ink-thread:   rgba(255, 255, 255, .09);  /* group guide line */
  --ink-text:     #c6ceda;               /* resting nav text */
  --ink-text-hi:  #f7f8f8;               /* hover/active nav text */
  --ink-muted:    #9aa4b6;               /* group (subsection) headers */
  --ink-label:    #566173;               /* role labels — dimmest tier */
  --ink-icon:     #7a8496;               /* resting nav icons */

  /* brand accent — deep teal */
  --p-50:  #f0fdfa;
  --p-100: #ccfbf1;
  --p-200: #99f6e4;
  --p-300: #5eead4;
  --p-400: #2dd4bf;  /* active icon on ink */
  --p-500: #14b8a6;
  --p-600: #0d9488;  /* focus hue */
  --p-700: #0f766e;  /* PRIMARY action / links — 5.1:1 on white */
  --p-800: #115e59;  /* hover */
  --p-900: #134e4a;  /* text-on-tint */

  /* semantic hues (badges themselves stay Bootstrap -subtle/-emphasis) */
  --g-success: #16a34a;
  --g-warning: #d97706;
  --g-danger:  #dc2626;
  --g-info:    #2563eb;
  --g-star:    #f59e0b;  /* favourite — deliberate warm accent */

  /* radius scale — 6 controls / 8 inputs / 12 cards (Linear system) */
  --radius-xs:    4px;    /* chips / code */
  --radius-sm:    6px;    /* small controls / menu items */
  --radius-md:    8px;    /* buttons / inputs / nav-link */
  --radius-lg:    12px;   /* cards / panels / menus */
  --radius-pill:  999px;
  --radius-round: 50%;

  /* spacing — 4px grid */
  --space-0-5: 2px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;

  /* type scale */
  --text-2xs:  11px;  /* section labels */
  --text-xs:   12px;  /* table th / chips */
  --text-sm:   13px;  /* dense body / controls */
  --text-base: 14px;  /* body / table cells */
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  26px;  /* KPI numbers */
  /* Geist + Geist Mono (loaded in base.html) — the approved concept typeface;
     system stack fallback. Mono carries SKUs, prices, KPI digits. */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", ui-monospace, "Menlo", monospace;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* elevation — hairline-quiet (research: borders carry separation, not shadows) */
  --shadow-xs:  0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm:  0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-pop: 0 12px 16px -4px rgba(16, 24, 40, .10), 0 4px 6px -2px rgba(16, 24, 40, .05);
  --shadow-md:  0 20px 24px -4px rgba(16, 24, 40, .10), 0 8px 8px -4px rgba(16, 24, 40, .04);
  /* soft no-shift focus ring (Untitled pattern: 4px accent-tinted halo) */
  --focus-ring: 0 0 0 4px rgba(13, 148, 136, .18);

  /* motion — Emil-grade curves; UI stays under 250ms */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:      120ms;   /* hover / color */
  --dur-press:     140ms;   /* button press feedback */
  --dur-pop:       160ms;   /* dropdowns / popovers */
  --dur-modal:     220ms;

  /* ============ 2. ALIAS semantics (the ONLY layer components should use) ============ */

  --surface:        var(--n-0);
  --surface-sunken: var(--n-50);   /* page background */
  --surface-hover:  var(--n-50);
  --surface-brand:  var(--p-50);

  --border:         var(--n-150);  /* dividers, card borders */
  --border-control: var(--n-200);  /* inputs / selects — gray-300 convention */

  --text-primary:   var(--n-900);
  --text-secondary: var(--n-600);
  --text-muted:     var(--n-500);  /* FLOOR for text — never --n-400 */
  --text-on-brand:  var(--n-0);

  --accent:         var(--p-700);  /* actions, links, active states */
  --accent-hover:   var(--p-800);
  --accent-tint:    var(--p-50);
  --accent-soft:    var(--p-200);  /* soft borders / selection */

  --success: var(--g-success);
  --warning: var(--g-warning);
  --danger:  var(--g-danger);
  --info:    var(--g-info);
  --star:    var(--g-star);

  /* Bootstrap bridge — anchors & focus pick the brand up automatically */
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color-rgb: 17, 94, 89;

  /* back-compat: v1 names resolve through the token layer */
  --hub-primary: var(--accent);
  --hub-bg:      var(--surface-sunken);
}