/* =========================================================
   SURGE RUN CLUB — Foundations
   Colors + Type tokens. Import this once per artifact.
   ========================================================= */

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

:root {
  /* ---------- COLOR: Core ---------- */
  --surge-black:   #0A0A0A;   /* page, deepest ground  */
  --surge-ink:     #111111;   /* card / elevated black */
  --surge-carbon:  #1A1A1A;   /* divider surface       */
  --surge-graphite:#2A2A2A;   /* hairline, inset stroke*/

  --surge-bone:    #E8E4DB;   /* primary fg on dark; also light-mode bg */
  --surge-chalk:   #CFCBC0;   /* secondary fg          */
  --surge-ash:     #8A867C;   /* tertiary fg / meta    */
  --surge-stone:   #55524B;   /* quaternary fg / rule  */

  /* ---------- COLOR: Accent (used sparingly) ---------- */
  --surge-pulse:   #E63946;   /* medical red — alerts, accents, ECG pulse */
  --surge-signal:  #C8FF3C;   /* hi-vis running accent, reserve for highlights only */

  /* ---------- COLOR: Semantic ---------- */
  --bg:            var(--surge-black);
  --bg-elev:       var(--surge-ink);
  --surface:       var(--surge-carbon);
  --border:        var(--surge-graphite);
  --border-subtle: rgba(237, 231, 218, 0.08);

  --fg:            var(--surge-bone);
  --fg-muted:      var(--surge-chalk);
  --fg-dim:        var(--surge-ash);
  --fg-faint:      var(--surge-stone);

  --accent:        var(--surge-pulse);
  --accent-alt:    var(--surge-signal);

  /* ---------- LIGHT MODE TOKENS ---------- */
  /* Apply via `.theme-light` on a container. Bone ground, black ink. */
}
.theme-light {
  --bg:            var(--surge-bone);
  --bg-elev:       #F2EEE5;
  --surface:       #DDD8CB;
  --border:        #C8C3B4;
  --border-subtle: rgba(10,10,10,0.08);

  --fg:            #0A0A0A;
  --fg-muted:      #2A2A2A;
  --fg-dim:        #55524B;
  --fg-faint:      #8A867C;
}
:root {

  /* ---------- TYPE: Families ----------
     The brand face is a clean, slightly condensed upright sans — NOT italic.
     Archivo (semibold/bold) matches the poster display. Barlow Condensed is
     available for tighter variants. Mono for data/labels. */
  --font-display:  'Archivo', 'Helvetica Neue', 'Inter', system-ui, sans-serif;
  --font-sans:     'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --font-condensed:'Barlow Condensed', 'Archivo Narrow', 'Archivo', sans-serif;
  --font-mono:     'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- TYPE: Tracking / treatments ---------- */
  --tracking-loose:   0.18em;  /* small caps labels */
  --tracking-medium:  0.08em;  /* buttons / nav     */
  --tracking-tight:  -0.02em;  /* large display     */

  /* ---------- SPACING ---------- */
  --s-0: 2px;
  --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;

  /* ---------- RADII ---------- */
  /* Surge brand is SQUARE. Radii stay tiny; nothing pill-like. */
  --r-0: 0px;
  --r-1: 2px;   /* default, barely perceptible softening */
  --r-2: 4px;
  --r-3: 8px;   /* only for images / photo frames        */

  /* ---------- BORDERS ---------- */
  --stroke-hair:   1px;
  --stroke-rule:   1px;
  --stroke-emph:   2px;

  /* ---------- SHADOWS ---------- */
  /* Shadows are rare in the system — black-on-black fights shadow.
     Elevation is expressed via rule lines + subtle tints instead. */
  --shadow-photo:  0 20px 60px rgba(0,0,0,0.6);
  --shadow-card:   0 1px 0 rgba(237,231,218,0.04) inset, 0 0 0 1px var(--border);

  /* ---------- MOTION ---------- */
  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      140ms;
  --dur-base:      240ms;
  --dur-slow:      480ms;

  /* ---------- LAYOUT ---------- */
  --grain-url:     url('assets/textures/grain.png');
}

/* =========================================================
   TYPE TOKEN CLASSES
   ========================================================= */

html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display: upright, slightly condensed sans — the SURGE voice ---- */
.t-display-xl,
.t-display-lg,
.t-display-md,
.t-display-sm {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--fg);
  font-stretch: 85%; /* slight condensation reads closer to poster */
}
.t-display-xl { font-size: clamp(64px, 10vw, 144px); }
.t-display-lg { font-size: clamp(48px, 6.5vw, 96px); }
.t-display-md { font-size: clamp(36px, 5vw, 72px); }
.t-display-sm { font-size: clamp(24px, 3.5vw, 48px); }

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1;
  font-size: clamp(36px, 4.5vw, 64px);
  color: var(--fg);
  font-stretch: 85%;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--fg);
}
h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-medium);
  font-size: 18px;
  color: var(--fg);
}

/* ---- Label: all caps tracked mono/sans, used everywhere ---- */
.t-label {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-loose);
  font-size: 11px;
  line-height: 1.2;
  color: var(--fg);
}
.t-label-sm {
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-loose);
  font-size: 10px;
  color: var(--fg-dim);
}

/* ---- Body: human sentence-case copy ---- */
p, .t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.t-body-lg { font-size: 17px; line-height: 1.5; }
.t-body-sm { font-size: 13px; line-height: 1.5; color: var(--fg-dim); }

/* ---- Mono: timings, data, bracketed asides ---- */
.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.t-mono-lg { font-size: 14px; }

/* ---- Hand-written bracketed definition block (see poster SURGERY]) ---- */
.t-definition {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--fg);
}
.t-definition::before { content: '[ '; color: var(--fg-dim); }
.t-definition::after  { content: ' ]'; color: var(--fg-dim); }

/* ---- Rule: hairline divider used as section break ---- */
.rule {
  height: 1px;
  width: 100%;
  background: var(--border);
  border: 0;
}

/* ---- Tagline stamp: vertical text at page edge ---- */
.t-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  font-size: 11px;
  color: var(--fg-dim);
}