/* ── Design tokens ─────────────────────────────────────────────
   :root block is intentionally unscoped — CSS custom properties
   must live on :root to be inherited. They only have visible
   effect inside .app-root, where the component selectors apply.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Surface */
  --paper:        #F4F1EA;
  --paper-edge:   #E8E1D2;
  --paper-warm:   #ECE6D6;
  --card:         #FFFFFF;
  --ink:          #0E1A14;

  /* Pitch */
  --pitch-top:    #1F6B3A;
  --pitch-bot:    #0F4825;
  --pitch-line:   rgba(255,255,255,0.10);

  /* Accents */
  --gold:         #C9A24A;
  --gold-deep:    #8C6A20;
  --red:          #C0392B;

  /* Type colour */
  --text:         var(--ink);
  --text-muted:   rgba(0,0,0,0.55);
  --text-faint:   rgba(0,0,0,0.40);
  --text-on-dark: var(--paper);

  /* Radii */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.06);
  --shadow-soft: 0 0 60px rgba(0,0,0,0.05);

  /* Fonts */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-italic:  'Instrument Serif', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ── Base — scoped so v1 body/html are untouched ─────────────── */
.app-root {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Typography ─────────────────────────────────────────────── */
.app-root .eleven-section-head {
  padding: 13px 0 8px;
  text-align: center;
}

.app-root .eleven-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 4px;
}

.app-root .eleven-kicker {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  display: block;
  margin-top: 4px;
  margin-bottom: 4px;
}

.app-root .eleven-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

.app-root .eleven-eyebrow--gold { color: var(--gold-deep); }

.app-root .eleven-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-feature-settings: "tnum";
}