/* ============================================================
   PLUMB DESIGN SYSTEM — tokens
   Vendored from the Plumb design system (claude.ai/design):
   colors + typography + spacing + effects. Fonts are loaded via a
   <link> in the page head. This is the single token file the page links.
   ============================================================ */

/* ------------------------------------------------------------
   COLOR SYSTEM
   A precision-instrument palette: cool graphite + paper, an
   electric "signal" green reserved for live / in-true data, and a
   whisper of brass (the plumb bob) for warmth.
   ------------------------------------------------------------ */
:root {
  /* --- Graphite (cool neutral ramp) --- */
  --graphite-950: oklch(0.205 0.012 256);  /* dark instrument panel   */
  --graphite-900: oklch(0.255 0.012 256);
  --graphite-800: oklch(0.325 0.011 256);
  --graphite-700: oklch(0.420 0.010 256);
  --graphite-600: oklch(0.520 0.009 256);
  --graphite-500: oklch(0.620 0.008 256);
  --graphite-400: oklch(0.720 0.006 256);
  --graphite-300: oklch(0.825 0.005 256);
  --graphite-200: oklch(0.900 0.004 256);
  --graphite-100: oklch(0.950 0.003 256);
  --graphite-50:  oklch(0.975 0.0025 256);
  --paper:        oklch(0.988 0.0015 256);  /* page background */
  --white:        #ffffff;

  /* --- Signal green (the "in true" / live data accent) --- */
  --signal-700: oklch(0.500 0.130 159);
  --signal-600: oklch(0.585 0.150 159);
  --signal-500: oklch(0.680 0.158 159);     /* brand signal */
  --signal-400: oklch(0.770 0.150 159);
  --signal-300: oklch(0.855 0.100 159);
  --signal-100: oklch(0.945 0.040 159);

  /* --- Brass (plumb bob — rare warm accent) --- */
  --brass-600: oklch(0.640 0.105 73);
  --brass-500: oklch(0.740 0.108 75);
  --brass-400: oklch(0.805 0.100 77);
  --brass-100: oklch(0.940 0.038 78);

  /* --- Semantic data signals --- */
  --good:   var(--signal-500);             /* balanced / in true   */
  --warn:   oklch(0.800 0.140 76);         /* drifting / asymmetry */
  --warn-100: oklch(0.950 0.045 78);
  --alert:  oklch(0.605 0.205 25);         /* offloaded / fault    */
  --alert-100: oklch(0.945 0.050 25);
  --info:   oklch(0.660 0.110 235);
  --info-100: oklch(0.950 0.030 235);

  /* --- Semantic aliases (use these in components) --- */
  /* Surfaces */
  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-sunken:  var(--graphite-50);
  --surface-inset:   var(--graphite-100);
  --surface-panel:   var(--graphite-950);  /* dark "instrument" surface */
  --surface-panel-2: var(--graphite-900);

  /* Text */
  --text-strong: var(--graphite-950);
  --text-body:   var(--graphite-800);
  --text-muted:  var(--graphite-500);
  --text-faint:  var(--graphite-400);
  --text-on-panel:       var(--graphite-100);
  --text-on-panel-muted: var(--graphite-400);
  --text-on-accent:      var(--graphite-950);

  /* Lines & borders */
  --border:        var(--graphite-200);
  --border-strong: var(--graphite-300);
  --border-faint:  var(--graphite-100);
  --border-panel:  oklch(0.310 0.010 256);
  --axis:          var(--graphite-300);    /* the plumb / datum line */

  /* Actions — primary action is confident graphite, not the accent */
  --action:        var(--graphite-950);
  --action-hover:  var(--graphite-800);
  --action-press:  var(--graphite-900);
  --action-text:   var(--white);

  /* Accent (functional / live) */
  --accent:        var(--signal-500);
  --accent-strong: var(--signal-600);
  --accent-soft:   var(--signal-100);
  --focus-ring:    var(--signal-500);

  /* ------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------ */
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  --text-display-xl: 76px;
  --text-display-lg: 56px;
  --text-display-md: 42px;
  --text-h1: 34px;
  --text-h2: 26px;
  --text-h3: 20px;
  --text-h4: 17px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 13px;
  --text-micro: 11px;

  --lh-tight: 1.02;
  --lh-snug: 1.12;
  --lh-normal: 1.5;
  --lh-relaxed: 1.62;

  --track-tight: -0.02em;
  --track-normal: 0em;
  --track-wide: 0.04em;
  --track-label: 0.14em;

  /* ------------------------------------------------------------
     SPACING, RADII, LAYOUT (4px base grid)
     ------------------------------------------------------------ */
  --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;

  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --stroke-hair: 1px;
  --stroke: 1.5px;
  --stroke-bold: 2px;

  --container: 1180px;
  --gutter: 24px;

  /* ------------------------------------------------------------
     EFFECTS: shadows, glows, motion
     ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px oklch(0.205 0.012 256 / 0.06);
  --shadow-sm: 0 1px 3px oklch(0.205 0.012 256 / 0.07), 0 1px 2px oklch(0.205 0.012 256 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.205 0.012 256 / 0.08), 0 2px 4px oklch(0.205 0.012 256 / 0.05);
  --shadow-lg: 0 12px 32px oklch(0.205 0.012 256 / 0.12), 0 4px 8px oklch(0.205 0.012 256 / 0.06);
  --shadow-panel: 0 24px 60px oklch(0.205 0.012 256 / 0.30);

  --glow-signal: 0 0 0 1px oklch(0.680 0.158 159 / 0.30), 0 0 18px oklch(0.680 0.158 159 / 0.35);

  --ring: 0 0 0 3px oklch(0.680 0.158 159 / 0.35);
  --inset-well: inset 0 1px 2px oklch(0.205 0.012 256 / 0.10);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}