/* ─────────────────────────────────────────────────────────────────
   Helm — colors & type foundations
   Source: Helm Design Tokens v1 (PDF) + LandingPage/styles.css
   ───────────────────────────────────────────────────────────────── */

/* Webfonts: Montserrat (primary sans) + JetBrains Mono (numerics & meta).
   Loaded from Google Fonts; matches the tokens spec exactly.
   ───────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Font families ────────────────────────────────────────────── */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ── Brand · primary (navy) ───────────────────────────────────── */
  --navy:            #0B1F3F;
  --navy-hover:      #14305B;
  --card-tint:       #EEF2F8;
  --card-tint-rule:  #D7E0EC;

  /* ── Neutrals · light theme (default) ─────────────────────────── */
  --bg:        #FFFFFF;
  --ink:       #111111;
  --ink-2:     #1F2024;
  --gray-6:    #3B3F46;
  --gray-5:    #6B6F77;
  --gray-4:    #9CA0A8;
  --gray-3:    #D7D8DB;
  --gray-2:    #EDEDEE;
  --gray-1:    #F7F7F8;
  --rule:      #E6E7EA;
  --rule-2:    #EFEFF1;

  /* ── Accents · steel & forest ─────────────────────────────────── */
  --accent:       #4B5563;   /* steel — links, citation refs, eyebrows */
  --accent-2:     #5C6B7D;   /* steel hover */
  --accent-bg:    #EEF2F6;   /* tinted backgrounds for active state */
  --accent-bg-2:  #E4EBF2;
  --ok:           #5F7A6B;   /* forest — synced / healthy / positive */
  --ok-bg:        #EDF1ED;

  /* ── Semantic foreground / surface aliases ────────────────────── */
  --fg-1: var(--ink);       /* primary text */
  --fg-2: var(--ink-2);     /* secondary text in body copy */
  --fg-3: var(--gray-5);    /* muted body / labels */
  --fg-4: var(--gray-4);    /* faint metadata, placeholders */
  --surface-1: var(--bg);
  --surface-2: var(--gray-1);
  --surface-3: var(--gray-2);

  /* ── Radii ────────────────────────────────────────────────────── */
  --r-cell:    2px;   /* table cells */
  --r-mark:    4px;   /* wordmark glyph */
  --r-tag:     5px;   /* small inline pills, tags */
  --r-ctrl:    6px;   /* buttons, inputs */
  --r-card:    8px;   /* cards */
  --r-media:   10px;  /* feature media */

  /* ── Signature 4-layer card shadow ────────────────────────────── */
  --shadow-card:
    inset 0  1px 0 #FFFFFF,
    inset 0 -1px 0 #C9D4E3,
    0 1px 2px rgba(20, 34, 64, 0.04),
    0 8px 24px -12px rgba(20, 34, 64, 0.12);
  --shadow-frame:
    0 0 0 1px rgba(17, 17, 17, 0.01),
    0 1px 1px rgba(17, 17, 17, 0.02);
}

/* ── Dark theme (per tokens PDF, section 03) ──────────────────── */
[data-theme="dark"] {
  --bg:     #0B0B0D;
  --ink:    #F2F2F3;
  --ink-2:  #DADBDF;
  --gray-1: #131316;
  --gray-2: #1B1C20;
  --gray-3: #2C2D32;
  --gray-4: #5A5E66;
  --gray-5: #8B8F97;
  --gray-6: #B5B8BE;
  --rule:   #232428;
  --rule-2: #1B1C20;
  --card-tint:      #131826;
  --card-tint-rule: #1E2740;
  --accent-bg:      #161B22;
  --accent-bg-2:    #1B222B;
  --ok-bg:          #131A14;
}

/* ─────────────────────────────────────────────────────────────────
   Base type — applies sensible defaults to bare HTML elements.
   ───────────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* H1 hero — Montserrat 600 / 56 / -0.035em */
h1, .h-hero {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 22px;
  text-wrap: balance;
}

/* H1 (non-hero) section headline — 44 / -0.03em */
.h-section {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 18px;
}

/* H2 — 30 / -0.025em */
h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 16px;
}

/* H3 — card / sub-section title 22 / -0.02em */
h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Lede — 16.5 / 1.5, gray-5 */
.lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--gray-5);
  margin: 0 0 24px;
  text-wrap: pretty;
}

/* Body */
p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  margin: 0 0 12px;
}

/* Small — captions / helper text */
.small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-5);
}

/* Mono — metadata, numeric tabular content */
code, .mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--gray-5);
  letter-spacing: 0;
}

/* Eyebrow — JetBrains Mono 500 / 11 / .06em uppercase / accent */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--navy); }

::selection { background: var(--card-tint); color: var(--ink); }