/* =========================================================================
   Fireside Ventures — Design Tokens
   Colors + typography. Kept minimal on purpose. Airy, modern, tech-forward.
   The warmth lives in the name and in one accent. Don't try to encode
   "fireside" across the whole visual system.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------------------------------------------------------------------
     Neutrals — the page lives here. Near-white paper, near-black ink.
     Warmed a hair (hue ~40) so whites don't read cold-blue next to ember.
     --------------------------------------------------------------------- */
  --paper:            #FAF7F2;   /* page background, warm off-white */
  --paper-elev:       #FFFFFF;   /* cards / sheets on top of paper */
  --ink:              #171513;   /* body text, near-black, warm */
  --ink-2:            #45403A;   /* secondary text */
  --ink-3:            #736B61;   /* tertiary / captions · darkened from #8A8279 to pass WCAG AA (4.54:1) */
  --rule:             #E8E2D8;   /* hairlines, borders */
  --rule-2:           #D6CFC2;   /* stronger dividers */
  --wash:             #F2EDE4;   /* subtle fill for blocks */

  /* ---------------------------------------------------------------------
     Accent — the single warm moment. "Ember."
     Used for links, key emphasis, the logo glyph, one number on a page.
     If you find yourself using it more than twice on a page, stop.
     --------------------------------------------------------------------- */
  --ember:            #C2410C;   /* primary accent, deep ember orange */
  --ember-hover:      #9A330A;   /* hover / pressed state */
  --ember-soft:       #FBE8D9;   /* tinted background for callouts */
  --ember-ink:        #7C2D12;   /* text on ember-soft */
  --ember-on-dark:    #E8662E;   /* brighter ember for use on dark surfaces */
  --ember-on-dark-2:  #FF7A36;   /* even brighter — for links on dark */

  /* ---------------------------------------------------------------------
     Utilities — used sparingly, mostly in pilot reports + dashboards.
     Muted on purpose. No neon.
     --------------------------------------------------------------------- */
  --ok:               #3F6B4A;   /* success green, muted */
  --ok-soft:          #E3EDE4;
  --flag:             #9A6E0F;   /* flag amber, muted · darkened from #B78512 to pass WCAG AA (4.52:1) */
  --flag-soft:        #F6EBC9;
  --stop:             #A02A2A;   /* kill-criteria red, muted */
  --stop-soft:        #F4DDDB;

  /* ---------------------------------------------------------------------
     Dark surface (rare). For cover pages, dark hero sections, footers.
     --------------------------------------------------------------------- */
  --ink-surface:      #1A1815;
  --ink-surface-2:    #26231F;
  --ink-on-dark:      #F5F0E6;
  --ink-on-dark-2:    #B8B0A3;
  --rule-on-dark:     #36322C;

  /* ---------------------------------------------------------------------
     Type families
     - Sans: Inter. Substitute for Söhne / GT America if licensed.
     - Mono: JetBrains Mono. This is where numbers live.
     --------------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* ---------------------------------------------------------------------
     Type scale — modest range. Document-first, not hero-page-first.
     Line-heights tight on display, generous on body.
     --------------------------------------------------------------------- */
  --t-display:   48px;   --lh-display: 1.05;   --tr-display: -0.02em;
  --t-h1:        32px;   --lh-h1:      1.15;   --tr-h1:      -0.015em;
  --t-h2:        22px;   --lh-h2:      1.25;   --tr-h2:      -0.01em;
  --t-h3:        16px;   --lh-h3:      1.35;   --tr-h3:      -0.005em;
  --t-body:      15px;   --lh-body:    1.55;   --tr-body:     0;
  --t-small:     13px;   --lh-small:   1.5;    --tr-small:    0;
  --t-caption:   12px;   --lh-caption: 1.4;    --tr-caption:  0.01em;
  --t-kicker:    11px;   --lh-kicker:  1.3;    --tr-kicker:   0.08em;    /* uppercase eyebrow */
  --t-mono-lg:   28px;   --lh-mono-lg: 1.1;    --tr-mono-lg: -0.02em;    /* for before/after numerals */
  --t-mono:      13px;   --lh-mono:    1.5;    --tr-mono:     0;

  /* Spacing scale — 4pt base. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* Radii — small. This system is not rounded-soft. */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  /* Shadows — almost never. Prefer hairlines. */
  --shadow-1: 0 1px 2px rgba(23, 21, 19, 0.04), 0 0 0 1px rgba(23, 21, 19, 0.04);
  --shadow-2: 0 4px 12px rgba(23, 21, 19, 0.06), 0 0 0 1px rgba(23, 21, 19, 0.04);

  /* Content measure — for long-form copy. */
  --measure: 68ch;

  /* ---------------------------------------------------------------------
     Web primitives — added 2026-06-17 for the website build.
     Print/deck artifacts ignore these. --t-display stays fixed (48px) so
     PDFs are unaffected; use --t-display-fluid for responsive hero type.
     --------------------------------------------------------------------- */
  --t-display-fluid: clamp(32px, 6vw, 48px);   /* responsive hero display */
  --container:      1080px;                     /* max content width on site */
  --container-wide: 1200px;
  --focus-ring:     0 0 0 3px rgba(194, 65, 12, 0.35);   /* ember, :focus-visible */
  --bp-sm: 640px;   --bp-md: 768px;   --bp-lg: 1024px;   /* breakpoints (reference) */
  --z-base: 0;   --z-sticky: 100;   --z-overlay: 1000;   /* z-index scale */
}

/* =========================================================================
   Semantic type classes — what most components should use.
   Prefer these over raw --t-* variables.
   ========================================================================= */

.fs-display {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--ink);
}
.fs-h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  color: var(--ink);
}
.fs-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  color: var(--ink);
}
.fs-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  color: var(--ink);
}
.fs-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.fs-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: var(--lh-small);
  color: var(--ink-2);
}
.fs-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
  color: var(--ink-3);
}
.fs-kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-kicker);
  line-height: var(--lh-kicker);
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  color: var(--ink-3);
}
.fs-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-mono);
  line-height: var(--lh-mono);
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.fs-mono-lg {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-mono-lg);
  line-height: var(--lh-mono-lg);
  letter-spacing: var(--tr-mono-lg);
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}

/* Links — ember, underline on hover only. */
.fs-link {
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.fs-link:hover {
  border-bottom-color: var(--ember);
  color: var(--ember-hover);
}

/* Baseline reset for pages that import this file directly. */
.fs-page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* =========================================================================
   Web components — added 2026-06-17. The README described button behavior
   but no class implemented it. These are the canonical implementations.
   ========================================================================= */

/* Keyboard focus — applies the ember ring, never removes the outline blindly. */
.fs-page :focus-visible,
.fs-btn:focus-visible,
.fs-btn-ghost:focus-visible,
.fs-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* Primary button — ember fill, darken one step on hover, no shrink on press. */
.fs-btn {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--paper-elev);
  background: var(--ember);
  border: 1px solid var(--ember);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.fs-btn:hover { background: var(--ember-hover); border-color: var(--ember-hover); }
.fs-btn:active { background: var(--ember-hover); }

/* Ghost button — hairline border, ember label. Secondary action. */
.fs-btn-ghost {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ember);
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.fs-btn-ghost:hover { border-color: var(--ember); background: var(--wash); }

/* Site container — centers content at the page max-width. */
.fs-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}