/* =========================================================================
   Design tokens
   Dark-only for v1. OKLCH neutrals tinted toward the accent hue 60 (orange).
   Fonts: IBM Plex Sans / Mono. Do NOT introduce Inter / Space Grotesk / JBM.
   NOTE this file is served BEFORE sign-in (the login form needs it), so keep it
   free of product names, internal paths and anything else that would tell an
   anonymous visitor what this deployment is.
   ========================================================================= */

:root {
  /* --- Graphite neutrals ------------------------------------------------
     Near-neutral with a barely-perceptible cool cast (hue 250, chroma
     <= 0.006). Reads as "clean dark gray" - no warm/brown undertone, no
     blue tilt. The orange accent is rare enough (~10% visual weight)
     that it lands hard against this quiet base.
     -------------------------------------------------------------------- */
  --color-bg-base:     oklch(0.10 0.003 250);
  --color-bg-surface:  oklch(0.14 0.003 250);
  --color-bg-elevated: oklch(0.18 0.004 250);
  --color-bg-overlay:  oklch(0.24 0.005 250);

  --color-border:        oklch(0.30 0.005 250);
  --color-border-subtle: oklch(0.22 0.004 250);
  --color-border-strong: oklch(0.42 0.006 250);

  --color-text-primary:   oklch(0.96 0.003 250);
  --color-text-secondary: oklch(0.76 0.004 250);
  --color-text-muted:     oklch(0.58 0.005 250);
  --color-text-disabled:  oklch(0.42 0.004 250);

  /* Modal / drawer / cmdk dim. One token so the three overlays share one
     value - they used to drift by a few percent across files. */
  --color-backdrop:       rgb(0 0 0 / 0.5);

  /* --- Color: accent (locked at #ff9b28 ≈ oklch 0.78 0.17 60) ---------- */
  --color-accent:        oklch(0.78 0.17 60);
  --color-accent-strong: oklch(0.70 0.19 50);
  --color-accent-subtle: oklch(0.78 0.17 60 / 0.12);
  --color-accent-muted:  oklch(0.78 0.17 60 / 0.20);
  /* Foreground for chrome ON the accent (primary CTA, confirmation banner).
     White-on-orange is too low-contrast - this dark warm matches the hue
     so the type reads as belonging to the button, not floating on it. */
  --color-on-accent:     oklch(0.15 0.02 60);

  /* --- Color: semantic (OKLCH-tuned) ----------------------------------- */
  --color-success:        oklch(0.74 0.15 145);
  --color-success-subtle: oklch(0.74 0.15 145 / 0.12);
  --color-success-border: oklch(0.74 0.15 145 / 0.25);

  --color-warning:        oklch(0.82 0.16 85);
  --color-warning-subtle: oklch(0.82 0.16 85 / 0.12);
  --color-warning-border: oklch(0.82 0.16 85 / 0.25);

  --color-danger:         oklch(0.65 0.21 25);
  --color-danger-strong:  oklch(0.58 0.22 25);
  --color-danger-subtle:  oklch(0.65 0.21 25 / 0.12);
  --color-danger-border:  oklch(0.65 0.21 25 / 0.25);

  --color-info:           oklch(0.66 0.14 225);
  --color-info-subtle:    oklch(0.66 0.14 225 / 0.12);
  --color-info-border:    oklch(0.66 0.14 225 / 0.25);

  /* --- Color: charts (6 series) ---------------------------------------- */
  --color-chart-1: oklch(0.74 0.15 145); /* green */
  --color-chart-2: oklch(0.66 0.14 225); /* blue */
  --color-chart-3: oklch(0.82 0.16 85);  /* amber */
  --color-chart-4: oklch(0.65 0.21 25);  /* red */
  --color-chart-5: oklch(0.68 0.17 305); /* purple */
  --color-chart-6: oklch(0.78 0.12 195); /* cyan */

  /* --- Typography ------------------------------------------------------ */
  --font-display: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* 6-step scale, body rooted at 16px for operator comfort on dark
     backgrounds. Steps pull apart aggressively so hierarchy stands out -
     panel title (lg) is 1.5x body, page title (xl) ~1.9x.
     `2xs` is reserved for tracked-out uppercase microlabels (status
     pills, deck strips, chart-panel kickers) - never for body text. */
  --text-2xs: 0.6875rem; /* 11 - tracked uppercase microlabels only */
  --text-xs:  0.8125rem; /* 13 - caption / meta */
  --text-sm:  1rem;      /* 16 - body */
  --text-md:  1.1875rem; /* 19 - subsection heading */
  --text-lg:  1.5rem;    /* 24 - panel title */
  --text-xl:  1.875rem;  /* 30 - page title */

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

  /* Dark-on-light text reads as slightly lighter weight; bump leading
     across the board vs. the default 1.5/1.625 that would sit on light. */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  /* --- Spacing (4pt scale) --------------------------------------------- */
  --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;

  /* --- Layout ---------------------------------------------------------- */
  --sidebar-width:      272px;
  --sidebar-collapsed:  72px;
  --content-max-width:  1440px;
  --topbar-height:      60px;
  --card-gap:           1.5rem;

  /* --- Radius ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- Shadow ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 8px 24px oklch(0.78 0.17 60 / 0.22);

  /* --- Motion ---------------------------------------------------------- */
  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-slow:   250ms;
  --duration-slower: 350ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Z-index --------------------------------------------------------- */
  --z-base:            0;
  --z-sticky:          10;
  --z-dropdown:        20;
  /* Expanded (full-screen) table. Above the sticky chrome, but BELOW the modal
     layer. Row menus opened while a table is expanded are lifted over it by
     raising --z-dropdown on the body: see components/table-expand.css. */
  --z-table-expand:    24;
  --z-modal-backdrop:  30;
  --z-modal:           31;
  --z-cmdk:            33;
  --z-toast:           40;
  --z-tooltip:         50;
}

/* Global type + form defaults so ported components inherit tabular-nums. */
html, body {
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-feature-settings: "cv02", "cv03";
}

table, .tabular-nums, .metric-value, .currency {
  font-variant-numeric: tabular-nums;
}