/* ============================================================
   HELM DESIGN SYSTEM — Core tokens
   Typography, color, spacing, radii, shadow.
   Load this BEFORE any component CSS.
   ============================================================ */

/* Geist and Geist Mono (Vercel, SIL Open Font License 1.1; licence text in
   fonts/LICENSE-Geist.txt), bundled locally so neither mode makes an external
   request. Variable fonts: one file per family covers every weight. */
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;

  /* Type scale — fixed, predictable. Dashboards = dense but legible on
     1920/2560 panels: 14 px body, 13 px tables (Helm v2, WP-005). */
  --text-2xs:  11px;   /* table heads, legends */
  --text-xs:   12px;   /* metadata, captions, hints */
  --text-sm:   13px;   /* table body, chips, buttons */
  --text-base: 14px;   /* body default */
  --text-md:   15px;   /* form inputs, section titles */
  --text-lg:   18px;   /* drawer titles */
  --text-xl:   20px;   /* KPI value, small heading */
  --text-2xl:  24px;   /* page heading */
  --text-3xl:  32px;   /* hero KPI */
  --text-4xl:  44px;   /* hero metric */
  --text-5xl:  64px;   /* full-bleed display */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-base:  1.5;
  --leading-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-base:    0em;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.06em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- COLOR — NEUTRAL (zinc, Helm v2 "P3") ----------
     Contrast on white, measured 2026-11-04: ink-50 4.83:1 (the lightest
     tone for text that carries meaning), ink-60 7.73:1, ink-90 17.7:1;
     ink-40 (3.25:1) and lighter are decorative only. */
  --ink-0:    #FFFFFF;  /* page, cards, header */
  --ink-5:    #FAFAFA;  /* tint: banners, editor body, secondary panels */
  --ink-10:   #F4F4F5;  /* row hover, chip and count fills */
  --ink-15:   #E4E4E7;  /* lines: card borders, row rules */
  --ink-20:   #D4D4D8;  /* strong lines: inputs, table head rule */
  --ink-30:   #A1A1AA;  /* disabled, decorative */
  --ink-40:   #8E8E96;  /* placeholders, decorative — never meaning */
  --ink-50:   #71717A;  /* captions, hints, meta */
  --ink-60:   #52525B;  /* secondary text, IDs, table heads */
  --ink-70:   #3F3F46;  /* labels */
  --ink-80:   #27272A;
  --ink-90:   #18181B;  /* text, KPI values */
  --ink-100:  #09090B;

  /* ---------- COLOR — BRAND (deep teal / forest) ---------- */
  --brand-50:  #ECF4F1;
  --brand-100: #D2E5DD;
  --brand-200: #A6CABA;
  --brand-300: #6FA791;
  --brand-400: #3F8770;
  --brand-500: #1F6A55;  /* primary brand */
  --brand-600: #155446;
  --brand-700: #0E4136;
  --brand-800: #0A2F27;
  --brand-900: #06201A;

  /* Secondary accent — warm copper, used sparingly */
  --accent-300: #E2B07A;
  --accent-500: #B57A36;
  --accent-700: #7E5121;

  /* ---------- COLOR — STATUS / SEMANTIC (RAG) ---------- */
  /* Green = on track. Moved from 154° to 142° (Helm v2) so "good" no longer
     sits 9° from the brand teal: 500 for edges and dots, 600/700 for text. */
  --green-50:  #E3F3E8;
  --green-100: #C6E6D1;
  --green-500: #228B48;
  --green-600: #16703A;
  --green-700: #0E5A2C;

  /* Amber = watch / monitor */
  --amber-50:  #FBF1DF;
  --amber-100: #F6E0B5;
  --amber-500: #C77A1C;
  --amber-600: #A6620F;
  --amber-700: #7E4A07;

  /* Red = critical / blocked */
  --red-50:   #FAE9E5;
  --red-100:  #F4CFC7;
  --red-500:  #B83A2A;
  --red-600:  #962A1C;
  --red-700:  #6E1D12;

  /* Blue — informational, links, "in progress" */
  --blue-50:  #E5EEF8;
  --blue-100: #C9DCEF;
  --blue-500: #2563A8;
  --blue-600: #1B4D83;
  --blue-700: #143C68;

  /* Purple — procurement / order-date */
  --purple-50:  #ECE7F4;
  --purple-100: #D5CAE6;
  --purple-500: #553096;
  --purple-700: #38205F;

  /* Neutral status (planned / gray / N-A) */
  --neutral-50:  #F4F4F5;
  --neutral-500: #71717A;

  /* ---------- SEMANTIC TOKENS ---------- */
  --color-bg-primary:   var(--ink-0);   /* the page is white (Helm v2) */
  --color-bg-secondary: var(--ink-5);
  --color-bg-tertiary:  var(--ink-10);
  --color-bg-elevated:  var(--ink-0);
  --color-bg-inverse:   var(--ink-90);
  --color-bg-hover:     var(--ink-10);
  --color-bg-selected:  var(--brand-50);

  /* Lines: 1 px, never 0.5 px (ghost edges at DPR 1). */
  --line:        1px solid var(--ink-15);
  --line-strong: 1px solid var(--ink-20);

  /* States (HELM.md §2): text in -fg, fills in -bg, edges and dots in -edge.
     Colour never carries meaning alone. */
  --state-good-fg: var(--green-700);  --state-good-bg: var(--green-50);  --state-good-edge: var(--green-500);
  --state-warn-fg: var(--amber-700);  --state-warn-bg: var(--amber-50);  --state-warn-edge: var(--amber-500);
  --state-bad-fg:  var(--red-700);    --state-bad-bg:  var(--red-50);    --state-bad-edge:  var(--red-500);
  --state-info-fg: var(--blue-700);   --state-info-bg: var(--blue-50);   --state-info-edge: var(--blue-500);
  --state-none-fg: var(--ink-60);     --state-none-bg: var(--neutral-50);--state-none-edge: var(--ink-30);

  /* Layout: the shell is edge to edge; blocks keep their own width budget. */
  --gutter: clamp(32px, 2.5vw, 64px);

  --color-bg-info:      var(--blue-50);
  --color-bg-success:   var(--green-50);
  --color-bg-warning:   var(--amber-50);
  --color-bg-danger:    var(--red-50);

  --color-text-primary:   var(--ink-90);
  --color-text-secondary: var(--ink-60);
  --color-text-tertiary:  var(--ink-50);
  --color-text-muted:     var(--ink-40);
  --color-text-inverse:   var(--ink-5);
  --color-text-info:      var(--blue-600);
  --color-text-success:   var(--green-600);
  --color-text-warning:   var(--amber-600);
  --color-text-danger:    var(--red-600);
  --color-text-brand:     var(--brand-600);
  --color-text-link:      var(--brand-600);

  --color-border-primary:   var(--ink-20);
  --color-border-secondary: var(--ink-15);
  --color-border-tertiary:  var(--ink-10);
  --color-border-strong:    var(--ink-30);
  --color-border-info:      var(--blue-500);
  --color-border-focus:     var(--brand-500);

  /* ---------- SPACING (4px base) ---------- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;

  /* ---------- RADIUS ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   5px;   /* default for chips, inputs */
  --radius-lg:   8px;   /* cards, modals */
  --radius-xl:   12px;
  --radius-full: 9999px;

  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);

  /* ---------- SHADOWS (very subtle — corporate, not floaty) ---------- */
  --shadow-none: none;
  --shadow-xs:   0 1px 0 rgba(11, 11, 7, 0.04);
  --shadow-sm:   0 1px 2px rgba(11, 11, 7, 0.05), 0 0 0 0.5px rgba(11, 11, 7, 0.04);
  --shadow-md:   0 2px 6px -1px rgba(11, 11, 7, 0.06), 0 0 0 0.5px rgba(11, 11, 7, 0.05);
  --shadow-lg:   0 8px 24px -8px rgba(11, 11, 7, 0.10), 0 0 0 0.5px rgba(11, 11, 7, 0.05);
  --shadow-xl:   0 16px 48px -12px rgba(11, 11, 7, 0.18);

  /* Kept for older consumers; new rules use `border: var(--line)` instead. */
  --hairline: inset 0 0 0 1px var(--ink-15);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  120ms;
  --duration-base:  180ms;
  --duration-slow:  280ms;

  /* ---------- Z-INDEX ---------- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    600;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Use these on raw tags, or extend in components.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h3, .h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

h4, .h4 {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text-primary);
}

small, .caption {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: var(--leading-snug);
}

.eyebrow, .label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "tnum", "zero";
}

.numeric, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero", "ss01";
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
}

a, .link {
  color: var(--color-text-link);
  text-decoration: none;
  border-bottom: 0.5px solid color-mix(in oklab, var(--color-text-link) 35%, transparent);
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover, .link:hover { color: var(--brand-700); border-bottom-color: var(--brand-700); }

::selection { background: var(--brand-100); color: var(--brand-800); }