/* ==========================================================================
   Rivetira — Design Tokens
   Enterprise Data Visualization design system (FLAT).
   Aerospace-graphite canvas, titanium accents. Dark slate is the default
   identity, and one value of it sits under every section of every page: no
   tone steps between chapters, no gradients, no shadows, no blur, no rules.
   Single source of truth: never hard-code hex/px outside this file.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------
     Background / surfaces — neutral graphite so the data pops
     --------------------------------------------------------------- */
  --bg-base:   #0b0e14;   /* the one canvas, under every section */
  --bg-900:    var(--bg-base);
  --bg-800:    var(--bg-base);
  --surface-1: #161c27;
  --surface-2: #1c2330;
  --surface-3: #232b3a;
  --surface-hover: #1a2130;

  /* ---------------------------------------------------------------
     Text
     --------------------------------------------------------------- */
  --text-primary:   #eef1f6;
  --text-secondary: #b3bccb;
  --text-muted:     #8893a5;
  --text-faint:     #737c8f;
  --text-on-accent: #06121f;

  /* ---------------------------------------------------------------
     Borders / gridlines — component edges + chart grid ONLY.
     Never used to divide page sections.
     --------------------------------------------------------------- */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --grid-line:      rgba(255, 255, 255, 0.07);
  --axis-line:      rgba(255, 255, 255, 0.18);
  --ring:           #5b9dff;

  /* ---------------------------------------------------------------
     Accent — titanium blue. Actions/links/focus only, kept OUT of series.
     --------------------------------------------------------------- */
  --accent:       #3f8cff;
  --accent-hover: #5a9dff;
  --accent-press: #2f6fe0;
  --accent-soft:  rgba(63, 140, 255, 0.14);

  /* ---------------------------------------------------------------
     Semantic / status — KPI states and deltas
     --------------------------------------------------------------- */
  --good:    #22c55e;  --good-soft:    rgba(34, 197, 94, 0.14);
  --bad:     #ef4444;  --bad-soft:     rgba(239, 68, 68, 0.14);
  --warn:    #f59e0b;  --warn-soft:    rgba(245, 158, 11, 0.14);
  --info:    #38bdf8;  --info-soft:    rgba(56, 189, 248, 0.14);
  --neutral: #94a3b8;  --neutral-soft: rgba(148, 163, 184, 0.14);

  /* ---------------------------------------------------------------
     Data-viz palettes
     --------------------------------------------------------------- */
  /* Categorical — distinct series, ordered so neighbours stay separable
     under deuteranopia/protanopia. Always ALSO label/dash/marker. */
  --cat-1: #5b9dff;  --cat-2: #f59e0b;  --cat-3: #22c55e;  --cat-4: #c084fc;
  --cat-5: #f472b6;  --cat-6: #2dd4bf;  --cat-7: #fb923c;  --cat-8: #94a3b8;

  /* Sequential — single hue, low → high (heatmaps, intensity) */
  --seq-1: #0b2545; --seq-2: #13386b; --seq-3: #1d4f93; --seq-4: #2f6fbd;
  --seq-5: #4f8ee0; --seq-6: #7db0f0; --seq-7: #b6d4f7;

  /* Diverging — below ↔ target ↔ above (gap variance vs nominal) */
  --div-neg-2: #ef4444; --div-neg-1: #f59e0b; --div-mid: #94a3b8;
  --div-pos-1: #34d399; --div-pos-2: #22c55e;

  /* Faint area fills under line charts */
  --fill-1: rgba(91, 157, 255, 0.14);
  --fill-2: rgba(245, 158, 11, 0.12);
  --fill-3: rgba(34, 197, 94, 0.12);
  --fill-grid: var(--grid-line);

  /* ---------------------------------------------------------------
     Typography
     --------------------------------------------------------------- */
  /* Chakra Petch carries the headlines: a squared technical grotesque with
     clipped corners, drawn for instrumentation and at home on an assembly
     jig. Asap carries running and interface text on a softer, rounder
     skeleton, and Martian Mono carries station IDs, torques and tolerances —
     a wide, engineered mono for short readouts. */
  --font-sans: "Asap", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Chakra Petch", "Asap", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Martian Mono is deliberately wide, which is right for a short station ID
     or a status chip and wrong for a six-figure price. So the engineered mono
     is the label voice, and large figures are set in the sans with tabular
     numerals, where the digits still align but the line still fits. */
  --font-mono: "Martian Mono", ui-monospace,
               SFMono-Regular, Menlo, Consolas, monospace;
  --font-num:  "Asap", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.5rem, 1.45rem + 4.2vw, 4.5rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  --fs-h3:      clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-h4:      clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-body-lg: 1.0625rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --fs-kpi:     clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --fs-kpi-lg:  clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
  --fs-price:   clamp(2.25rem, 1.8rem + 2vw, 3.25rem);

  /* ---------------------------------------------------------------
     Spacing — 4-pt base / 8-pt rhythm
     --------------------------------------------------------------- */
  --space-0: 0;     --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-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-28: 112px; --space-32: 128px; --space-40: 160px;

  --radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 10px;
  --radius-xl: 14px; --radius-pill: 999px;

  --container-sm: 680px;  --container-md: 840px;  --container-lg: 1080px;
  --container-xl: 1280px; --container-2xl: 1440px;
  --gutter: clamp(16px, 4vw, 40px);

  --section-y:    clamp(72px, 9vw, 136px);
  --section-y-lg: clamp(88px, 10vw, 160px);

  --dash-gap:   clamp(12px, 1.3vw, 20px);
  --card-pad:   clamp(20px, 2vw, 28px);
  --cell-pad-y: 10px;
  --cell-pad-x: 12px;
  --kpi-pad:    var(--space-5);
  --stack:      clamp(12px, 1.4vw, 20px);

  /* ---------------------------------------------------------------
     Elevation
     --------------------------------------------------------------- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* ---------------------------------------------------------------
     Motion
     --------------------------------------------------------------- */
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; --dur-chart: 700ms;
  --ease-out: cubic-bezier(0.2, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Grid */
  --grid-cols: 12;
  --grid-gap: var(--dash-gap);

  color-scheme: dark;
}

/* ==========================================================================
   Optional light theme — hangar-daylight. Dark slate remains the identity.
   ========================================================================== */
[data-theme="light"] {
  --bg-base:   #f7f9fc;   /* the one canvas in this theme too */
  --bg-900:    var(--bg-base);
  --bg-800:    var(--bg-base);
  --surface-1: #ffffff;
  --surface-2: #f4f6fb;
  --surface-3: #eaeff7;
  --surface-hover: #f0f3f9;

  --text-primary:   #0b0e14;
  --text-secondary: #3a4356;
  --text-muted:     #5d6678;
  --text-faint:     #646d7f;
  --text-on-accent: #ffffff;

  --border-subtle:  rgba(11, 14, 20, 0.06);
  --border-default: rgba(11, 14, 20, 0.12);
  --border-strong:  rgba(11, 14, 20, 0.20);
  --grid-line:      rgba(11, 14, 20, 0.08);
  --axis-line:      rgba(11, 14, 20, 0.22);

  --accent:       #1f6feb;
  --accent-hover: #2f7cf5;
  --accent-press: #1a5cc4;
  --accent-soft:  rgba(31, 111, 235, 0.10);

  --cat-1: #2563eb; --cat-2: #b45309; --cat-3: #15803d; --cat-4: #7c3aed;
  --cat-5: #be185d; --cat-6: #0f766e; --cat-7: #c2410c; --cat-8: #475569;

  --good: #15803d; --bad: #b91c1c; --warn: #b45309; --info: #0369a1;

  --fill-1: rgba(37, 99, 235, 0.12);
  --fill-2: rgba(180, 83, 9, 0.10);
  --fill-3: rgba(21, 128, 61, 0.10);

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  color-scheme: light;
}