/* Springfield Design Tokens v4 — green mosaic + navy wordmark
   Brand: pixelated green mosaic mark + "Springfield" navy wordmark.
   Palette = greens from the mosaic + deep navy from the wordmark.
*/

:root {
  /* SF Pro covers display, body and editorial accent */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "SF Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro",
                  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Brand navy (wordmark) */
  --c-navy: #16223D;
  --c-navy-soft: #2A3A57;

  /* Green mosaic ramp (lime → mint) */
  --g-lime:    #A4D233;   /* brightest chartreuse, center of mark */
  --g-green:   #62BC46;   /* primary brand green */
  --g-leaf:    #7BC74A;   /* light leaf green */
  --g-emerald: #3CA85B;   /* deeper green */
  --g-teal:    #35B89A;   /* green-teal */
  --g-mint:    #8FD4B0;   /* soft mint (outer pixels) */
  --g-mist:    #CFE9D6;   /* faintest mint tint */

  /* Light surfaces (Apple-style: soft grey page, white floating cards) */
  --bg: #FFFFFF;          /* cards / surfaces */
  --bg-page: #F4F6F3;     /* page behind cards — soft, faintly green grey */
  --bg-alt: #FBFCFB;
  --bg-elev: #EEF1EE;     /* filled inputs / wells */
  --line: #ECEEEA;        /* hairlines — very light, used sparingly now */
  --line-strong: #DEE1DC;
  --text: #16223D;        /* navy — matches wordmark */
  --text-mute: #5A6472;
  --text-faint: #9AA3AE;

  /* Radii — generous, Apple-like */
  --radius-card: 18px;
  --radius-soft: 12px;
  --radius-input: 11px;

  /* Soft, diffuse elevation (navy-tinted, never harsh) */
  --shadow-sm: 0 1px 2px rgba(22,34,61,0.04), 0 1px 3px rgba(22,34,61,0.03);
  --shadow-md: 0 8px 24px -8px rgba(22,34,61,0.10), 0 2px 6px rgba(22,34,61,0.04);
  --shadow-lg: 0 28px 64px -20px rgba(22,34,61,0.18), 0 8px 20px rgba(22,34,61,0.06);

  /* Legacy aliases (kept so existing inline refs map onto the green/navy brand) */
  --c-red:    var(--g-emerald);
  --c-orange: var(--g-green);
  --c-yellow: var(--g-lime);
  --c-green:  var(--g-leaf);
  --c-teal:   var(--g-teal);
  --c-cyan:   var(--g-mint);
  --c-blue:   var(--c-navy);

  /* Default accent: brand green. Each page can override --accent. */
  --accent: var(--g-green);
  --accent-cool: var(--c-navy);
  --accent-mid: var(--g-teal);

  /* Brand gradient — green ramp. RESERVED for logo bg & decorative hairlines only.
     Never as text fill, broad surfaces, or avatars. */
  --gradient: linear-gradient(90deg,
    var(--g-lime) 0%, var(--g-leaf) 22%, var(--g-green) 44%,
    var(--g-emerald) 64%, var(--g-teal) 82%, var(--g-mint) 100%);

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

.mono { font-family: var(--font-mono); font-weight: 500; }

/* former-mono micro-text: SF Pro, a touch heavier so it never reads thin */
.seismo-meta, .market ul, .item .num, .spec-row, .sw, .row .nm, .row .v,
.demo .nm, .nm, .var, .hex, .src, .seg-row, .fault, .persona .tg, .fault .lvl,
.seismo-meta .key, .seismo-meta .val, .meta-top, .crumb, .running {
  font-weight: 500;
  letter-spacing: -0.002em;
}

/* Editorial accent: SF Pro 600 italic, in the page accent color. Sober. */
.accent {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.accent-r {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  color: var(--accent);
}

/* Subtle dotted backdrop */
.dome-grid {
  background-image: radial-gradient(circle, rgba(22,34,61,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Logo block */
.sismic-logo, .springfield-logo { display: inline-flex; align-items: center; gap: 12px; }
.sismic-logo img, .springfield-logo img { display: block; height: 32px; width: auto; }

/* Decorative thin rule — gradient as hairline only */
.gradient-rule {
  height: 2px;
  background: var(--gradient);
  border: 0;
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   Label / kicker system — deliberately NOT the mono+uppercase cliché.
   Mono is reserved for live data & numbers only (.mono). Eyebrows,
   metadata and section labels use SF Pro, sentence case, tight
   tracking, weight 600 — with a small MOSAIC SQUARE marker in lime
   (echoes the logo, adds the green+yellow note next to the green).
   ────────────────────────────────────────────────────────────── */
.eyebrow, .label, .meta, .sub, .sec-num, .value-num, .market-tag, .mkt .tag,
.step-tag, .step-cell .n, .card .num, .card h4, .gcell .num, .pri .n, .term-en, .en,
.kpi .lbl, .stat .lbl, .tam-block .lbl, .seg-title, .sz, .tag, .crumb, .running,
.nav-section .label, .insp-tag, .panel-title, footer h4 {
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  font-weight: 600 !important;
  font-feature-settings: normal !important;
}

/* the pulsing eyebrow marker becomes a mosaic square in lime */
.eyebrow .dot {
  border-radius: 2px !important;
  background: var(--g-lime) !important;
}

/* mosaic square before section labels */
.label {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.label::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--g-lime);
}

/* ──────────────────────────────────────────────────────────────
   Apple touch — restraint & simplicity.
   • Cell-mosaic grids (1px dividers) → spaced cards with air.
   • Hard hairline borders → soft diffuse shadow + bigger radius.
   • Full-width section rules removed; whitespace does the separating.
   • Filled, rounded inputs.
   These are global, !important, so they lift every page at once.
   ────────────────────────────────────────────────────────────── */

/* 1 · open up the joined-cell grids */
.grid-3, .markets, .lex, .grid, .mkt-grid, .steps-row, .principles {
  gap: 20px !important;
  background: transparent !important;
  border: 0 !important;
}

/* dashboard KPI strip + segments: wrap responsively so they never overflow
   the narrow middle column (4-up → 2×2, 2-up → 1-col when tight) */
.kpis {
  gap: 12px !important;
  background: transparent !important;
  border: 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
}
.kpi { min-width: 0 !important; }
.segments {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}
.seg { min-width: 0 !important; }

/* 2 · soft, rounded, floating surfaces (no hard borders) */
.card, .value-card, .market, .use-card, .voice-card, .lex-item, .item,
.gcell, .step-cell, .mkt, .tam-block, .pri, .demo, .shadow-demo, .surf,
.seg, .kpi, .stat, .seismo-stage, .panel, .magnitude-card, .demo-row,
.lockup, a.card {
  border: 0 !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-sm);
}

/* hover lift on interactive cards */
a.card:hover, .card[href]:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
  transition: box-shadow .25s ease, transform .25s ease;
}

/* 3 · drop the full-width section dividers — let whitespace breathe */
section { border-bottom: 0 !important; }

/* 4 · filled, rounded inputs (Apple form style) */
.field input, .field textarea, .field select {
  background: var(--bg-elev) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-input) !important;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent) !important;
  background: var(--bg) !important;
}

/* 5 · pill buttons get the faintest lift */
.btn.primary { box-shadow: var(--shadow-sm); }

/* 6 · grouped lists (e.g. "how it works") become one rounded card with
   hairline rows inside — the Apple settings-list pattern */
.steps {
  border-radius: var(--radius-card) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.seismo {
  border: 0 !important;
  border-radius: var(--radius-soft) !important;
}

/* ──────────────────────────────────────────────────────────────
   Headings & emphasis use EMERALD (not navy). Body copy stays navy
   for legibility. Title accents (italic <em>) match the emerald so
   each headline reads as one color.
   ────────────────────────────────────────────────────────────── */
:root { --heading: var(--g-emerald); }

h1, h2, h3, .page-title, .hero-title, .lex-term,
.gcell h4, .mkt h4, .pri h4, .step-cell h4,
.manifesto blockquote, .quote-slide blockquote,
.stat .v, .kpi .v, .magnitude-num {
  color: var(--heading) !important;
}
h1 em, h2 em, h3 em, .page-title em, .hero-title em,
.manifesto blockquote em, .quote-slide blockquote em,
.gcell h4 em, .mkt h4 em, .pri h4 em, .step-cell h4 em {
  color: var(--heading) !important;
}

/* keep big titles white on dark slides (their em stays emerald as an accent) */
.section-div h1, .close-slide h1 { color: #fff !important; }

/* ──────────────────────────────────────────────────────────────
   Modernise the small "metadata" micro-text. The thin mono look
   (footers, slide chrome, signatures) read dated — move them to
   SF Pro 500, normal tracking. Mono stays ONLY for genuine data
   readouts & numeric tokens (.mono, telemetry, hex/spec tables).
   ────────────────────────────────────────────────────────────── */
footer, .footer-strip, .slide-head, .signature, .contact, .src,
.section-div .num, table.compare th, .manifesto header, lexico-header {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-feature-settings: normal !important;
}
/* manifesto & lexico top meta line live on the bare <header> */
.page > header {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}