/* ─────────────────────────────────────────────────────────────────
   Helm Design System — Core Tokens
   Brand: Helm (HelmOS · EMR Intelligence)
   Vibe: Precision Blue on a neutral grey foundation. Clinical, calm,
   confident. Heavy use of grey scale; blue is reserved for action,
   selection, focus, and brand moments.
   ───────────────────────────────────────────────────────────────── */

/* Font faces — PolySans Neutral is the brand UI face; Geist Mono is the
   brand mono face. Both are user-supplied and shipped from fonts/.
   SF Pro Text falls back to the system stack. */
@font-face {
  font-family: "PolySans";
  src: url("fonts/PolySans-Neutral.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Brand · Precision Blue ─────────────────────────────────── */
  --blue-50:  #EFF5FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #2563EB;  /* primary action, links, focus */
  --blue-600: #1D4ED8;  /* hover / pressed */
  --blue-700: #1E40AF;
  --blue-800: #1E3A8A;
  --blue-900: #172554;

  /* ─── Neutral · Grey Scale ───────────────────────────────────── */
  --white:    #FFFFFF;
  --grey-50:  #FAFAFA;   /* canvas behind cards */
  --grey-100: #F5F5F5;   /* subtle fills, hover ghost */
  --grey-200: #E5E5E5;   /* borders, dividers */
  --grey-300: #D4D4D4;
  --grey-400: #A3A3A3;   /* placeholder text */
  --grey-500: #737373;   /* secondary text, icons */
  --grey-600: #525252;   /* body text */
  --grey-700: #404040;   /* primary text */
  --grey-800: #262626;
  --grey-900: #171717;   /* strong primary buttons, headlines */
  --grey-950: #0A0A0A;   /* near-black; HelmOS logo bg */
  --black:    #000000;

  /* ─── Slate (used in some imagery captions) ──────────────────── */
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-700: #334155;

  /* ─── Semantic · Status ──────────────────────────────────────── */
  /* Success / Complete — saturated grass green */
  --success-bg:   #E7F8EE;
  --success-fg:   #00A63E;
  --success-500:  #00C950;
  --success-600:  #10B981;

  /* Warning / Partial / Missing — warm amber */
  --warn-bg:      #FEFCE8;
  --warn-fg:      #A65F00;
  --warn-stroke:  #FFDF20;

  /* Danger / Urgent / Error — clinical red */
  --danger-bg:    #FEF2F2;
  --danger-fg:    #C10007;
  --danger-stroke:#FFA2A2;

  /* Info / Submitted — uses Precision Blue */
  --info-bg:      var(--blue-50);
  --info-fg:      var(--blue-500);

  /* ─── Semantic · Surfaces ────────────────────────────────────── */
  --bg-canvas:    var(--grey-50);
  --bg-surface:   var(--white);
  --bg-sunken:    var(--grey-100);
  --bg-overlay:   rgba(10, 10, 10, 0.45);

  --fg-primary:   var(--grey-900);
  --fg-secondary: var(--grey-500);
  --fg-tertiary:  var(--grey-400);
  --fg-inverse:   var(--white);

  --border:       var(--grey-200);
  --border-strong:var(--grey-300);
  --border-focus: var(--blue-500);

  /* ─── Elevation ──────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:    0 1px 2px 0 rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.06);
  --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg:    0 10px 24px -4px rgba(0,0,0,0.10), 0 4px 8px -2px rgba(0,0,0,0.06);
  --shadow-xl:    0 24px 48px -12px rgba(0,0,0,0.18);
  --shadow-inset: inset 0 0 0 1px rgba(0,0,0,0.04);

  /* ─── Radius ─────────────────────────────────────────────────── */
  --radius-xs:    4px;
  --radius-sm:    6px;   /* small buttons, chips */
  --radius-md:    8px;   /* inputs, icon tiles, badges */
  --radius-lg:    12px;  /* cards, dialogs */
  --radius-xl:    16px;  /* large cards, command bar */
  --radius-2xl:   20px;
  --radius-pill:  999px;

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

  /* ─── Type · families ────────────────────────────────────────── */
  --font-sans: "PolySans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  --font-ui:   -apple-system, BlinkMacSystemFont, "SF Pro Text", "PolySans", "Inter", "Segoe UI", sans-serif;
  --font-display: "PolySans", "Inter", -apple-system, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", Menlo, monospace;

  /* ─── Type · base sizes (PolySans/SF mix) ────────────────────── */
  --text-2xs: 10px;   /* tiny captions, SF Pro Text */
  --text-xs:  11px;
  --text-sm:  12px;   /* table cells, secondary */
  --text-md:  14px;   /* default body */
  --text-lg:  16px;   /* body large */
  --text-xl:  20px;   /* H4 / section header */
  --text-2xl: 24px;   /* H3 */
  --text-3xl: 32px;   /* H2 */
  --text-4xl: 46px;   /* storyboard headline */
  --text-5xl: 48px;   /* H1 */

  /* ─── Type · line heights ────────────────────────────────────── */
  --leading-tight: 1.0;
  --leading-snug:  1.15;
  --leading-body:  1.2;     /* default for headings & body */
  --leading-loose: 1.5;

  /* ─── Motion ─────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;

  /* ─── Brand backgrounds ──────────────────────────────────────── */
  --bg-brand-gradient: radial-gradient(120% 80% at 0% 0%, #EFF5FF 0%, #93C5FD 35%, #2563EB 100%);
  --bg-brand-storyboard: linear-gradient(135deg, #DBEAFE 0%, #60A5FA 45%, #1D4ED8 100%);
}

/* ─────────────────────────────────────────────────────────────────
   Semantic typography classes — drop on any element to inherit the
   right family/size/weight/leading without re-declaring each rule.
   ───────────────────────────────────────────────────────────────── */
.helm-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  line-height: var(--leading-body);
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--fg-primary);
}
.helm-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: var(--leading-body);
  font-weight: 400;
  color: var(--fg-primary);
}
.helm-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  line-height: var(--leading-body);
  font-weight: 400;
  color: var(--fg-primary);
}
.helm-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--leading-body);
  font-weight: 400;
  color: var(--fg-primary);
}
.helm-display {
  /* Storyboard / hero typeface — PolySans, large, dense */
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  line-height: 1.0;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--fg-primary);
}
.helm-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--fg-primary);
}
.helm-body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg-primary);
}
.helm-ui {
  /* Native UI labels — match SF Pro feel */
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.2;
  color: var(--fg-primary);
  font-weight: 500;
}
.helm-caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--fg-secondary);
}
.helm-caption-upper {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.helm-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--fg-secondary);
}