/* ============================================================
   Boiler Green — Design Tokens
   colors, type, spacing, radii, shadow, motion.
   Import this once at the top of any HTML/UI kit.
   ============================================================ */

/* -------- Webfonts (Google Fonts; can be swapped for licensed) -------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Palette: anchors ---------- */
  --color-ink:        #0E1411;   /* near-black, primary fg / dark bg */
  --color-ink-2:      #1A211D;   /* one step lighter (hover on ink bg) */
  --color-paper:      #F4F1EA;   /* warm off-white, primary bg */
  --color-paper-2:    #ECE7DC;   /* sunken paper */

  /* ---------- Palette: neutrals (steel scale on paper) ---------- */
  --color-steel-100:  #1A1F1C;
  --color-steel-200:  #2E342F;
  --color-steel-300:  #4A524C;
  --color-steel-400:  #6F7770;
  --color-steel-500:  #8E948D;
  --color-steel-600:  #B0B4AC;
  --color-steel-700:  #CBCDC4;
  --color-steel-800:  #DEDED5;
  --color-steel-900:  #E8E4DA;

  /* ---------- Ink alphas (use on paper) ---------- */
  --color-ink-04:     rgb(14 20 17 / 0.04);
  --color-ink-06:     rgb(14 20 17 / 0.06);
  --color-ink-08:     rgb(14 20 17 / 0.08);
  --color-ink-12:     rgb(14 20 17 / 0.12);
  --color-ink-24:     rgb(14 20 17 / 0.24);
  --color-ink-40:     rgb(14 20 17 / 0.40);
  --color-ink-60:     rgb(14 20 17 / 0.60);
  --color-ink-80:     rgb(14 20 17 / 0.80);

  /* ---------- Paper alphas (use on ink) ---------- */
  --color-paper-08:   rgb(244 241 234 / 0.08);
  --color-paper-12:   rgb(244 241 234 / 0.12);
  --color-paper-24:   rgb(244 241 234 / 0.24);
  --color-paper-60:   rgb(244 241 234 / 0.60);
  --color-paper-80:   rgb(244 241 234 / 0.80);

  /* ---------- Brand accent ---------- */
  --color-signal:     #1F8A5B;   /* signal green (deep, not mint) */
  --color-signal-2:   #186E48;   /* hover/pressed */
  --color-signal-soft:#D9E8DF;   /* soft fill on paper, very rare */

  /* ---------- Operational accents (boiler state) ---------- */
  --color-ember:      #D86A2C;   /* combustion / fuel mode */
  --color-ember-soft: #F2DACA;
  --color-arc:        #5B8FB9;   /* electricity / arc mode */
  --color-arc-soft:   #D8E3EE;

  /* ---------- Semantic ---------- */
  --color-success:    var(--color-signal);
  --color-warning:    #C99114;
  --color-danger:     #B23B2C;
  --color-info:       var(--color-arc);

  /* ---------- Surfaces ---------- */
  --bg-page:          var(--color-paper);
  --bg-surface:       var(--color-paper);
  --bg-sunken:        var(--color-paper-2);
  --bg-inverse:       var(--color-ink);

  --fg-default:       var(--color-ink);
  --fg-muted:         var(--color-steel-300);
  --fg-subtle:        var(--color-steel-400);
  --fg-on-inverse:    var(--color-paper);
  --fg-on-inverse-muted: rgb(244 241 234 / 0.64);

  --border-default:   var(--color-ink-12);
  --border-subtle:    var(--color-ink-08);
  --border-strong:    var(--color-ink-24);

  /* ---------- Type families ---------- */
  --font-sans:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (px-equivalents at 16px root) ---------- */
  --fs-display-1:    clamp(72px, 8vw, 104px);  /* H1 — hero */
  --fs-display-2:    clamp(56px, 6vw, 80px);   /* section opener */
  --fs-h1:           clamp(44px, 4.4vw, 60px); /* page H1 */
  --fs-h2:           clamp(32px, 3vw, 40px);
  --fs-h3:           24px;
  --fs-h4:           20px;
  --fs-body-lg:      18px;
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      13px;
  --fs-mono-sm:      12px;
  --fs-eyebrow:      12px;

  /* ---------- Type weights ---------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Tracking ---------- */
  --tracking-tightest: -0.04em;
  --tracking-tighter:  -0.03em;
  --tracking-tight:    -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-eyebrow:  0.10em;

  /* ---------- Leading ---------- */
  --leading-display: 0.95;
  --leading-heading: 1.08;
  --leading-snug:    1.25;
  --leading-body:    1.55;
  --leading-loose:   1.7;

  /* ---------- Spacing (8px baseline) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 88px;
  --space-12: 120px;
  --space-13: 160px;
  --space-14: 200px;

  /* ---------- Radii ---------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;  /* status dots / avatars only */

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgb(14 20 17 / 0.04), 0 4px 12px rgb(14 20 17 / 0.04);
  --shadow-2: 0 4px 16px rgb(14 20 17 / 0.08), 0 32px 64px rgb(14 20 17 / 0.16);
  --shadow-3: 0 -1px 0 var(--color-ink-08), 0 -8px 24px rgb(14 20 17 / 0.04);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.1, 1);     /* default — long deceleration */
  --ease-in:     cubic-bezier(0.4, 0, 0.9, 0.4);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;
  --dur-xslow:   800ms;

  /* ---------- Layout ---------- */
  --grid-max:       1440px;
  --grid-gutter:    88px;
  --section-pad-y:  var(--space-13);
  --content-max:    65ch;

  /* ---------- Focus ring (accessibility, brand-correct) ---------- */
  --focus-ring: 0 0 0 3px var(--color-paper), 0 0 0 5px var(--color-signal);
}

/* ===================== BASE ===================== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===================== SEMANTIC TYPE ===================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

.display-1 {
  font-size: var(--fs-display-1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tightest);
  line-height: var(--leading-display);
}
.display-2 {
  font-size: var(--fs-display-2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-display);
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); }
h4, .h4 { font-size: var(--fs-h4); letter-spacing: var(--tracking-tight); }

p, .p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  max-width: var(--content-max);
  text-wrap: pretty;
}

.lead { font-size: var(--fs-body-lg); line-height: var(--leading-snug); color: var(--fg-default); }
.body-sm { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
}

.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: opacity var(--dur-base) var(--ease-out);
}
a:hover { opacity: 0.7; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-1); }

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

/* ===================== UTIL ===================== */
.surface-paper   { background: var(--color-paper); color: var(--color-ink); }
.surface-paper-2 { background: var(--color-paper-2); color: var(--color-ink); }
.surface-ink     { background: var(--color-ink); color: var(--color-paper); }
.surface-ink .eyebrow,
.surface-ink .caption { color: var(--fg-on-inverse-muted); }

.hairline { border: 1px solid var(--border-default); }
.divider  { height: 1px; background: var(--border-default); border: 0; }

.grid-bg {
  background-image:
    linear-gradient(to right, var(--color-ink-06) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-ink-06) 1px, transparent 1px);
  background-size: 88px 88px;
}