/* ════════════════════════════════════════════════════════════════════════════
   FORGED Recovery OS — Design Tokens
   Version 1.0 · April 2026
   Source of truth: README.md + uploads/FORGED-Design-Bible.docx
   Fonts: all four families are on Google Fonts (free, OFL).
   ════════════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap");

:root {
  /* ── BRAND PALETTE ─────────────────────────────────────────────────────── */
  --forge-ember:        #E74C3C;  /* Primary brand. Wordmark, CTAs, signature accent. */
  --forge-red:          #C0392B;  /* Secondary red. The 4–6px structural accent rule. */
  --forge-dark:         #1A1A2E;  /* Primary dark background. Hero blocks, headers. */
  --charcoal:           #16213E;  /* Secondary dark. Cards, panels, depth layers. */
  --steel:              #0F3460;  /* Tertiary dark. Nav, secondary surfaces. */

  /* ── STATE MACHINE — FUNCTIONAL ONLY ───────────────────────────────────── */
  /* Never decorative. Never branding. These carry clinical meaning. */
  --state-red:          #E74C3C;  /* HRV suppressed, sleep disrupted. Nav locks. */
  --state-yellow:       #F39C12;  /* Biometrics trending negative. Softer prompts. */
  --state-green:        #27AE60;  /* HRV/sleep in range. Full feature access. */
  --state-red-tint:     rgba(231, 76, 60, .08);
  --state-yellow-tint:  rgba(243, 156, 18, .10);
  --state-green-tint:   rgba(39, 174, 96, .08);

  /* ── ASAM CLINICAL TONES (Phase 1 ASAM build · v7.13) ──────────────────── */
  /* Muted, print-bible-grade variants of the state palette used inside
     the ASAM check-in surface and clinician-facing chart exports. The live
     state machine palette above stays the same; these are the tones that
     read calmly in a 5-icon row without screaming. Map directly to
     `Color.fgGreenTone / fgYellowTone / fgRedTone` in the iOS native build. */
  --asam-tone-green:    #3A7D44;
  --asam-tone-yellow:   #C77B19;
  --asam-tone-red:      #B82E2E;
  --asam-tone-green-tint:  rgba(58, 125, 68, .10);
  --asam-tone-yellow-tint: rgba(199, 123, 25, .10);
  --asam-tone-red-tint:    rgba(184, 46, 46, .10);

  /* ── ACCENT PALETTE ────────────────────────────────────────────────────── */
  --warmth:             #E67E22;  /* Amber. Human contact card. */
  --clinical:           #2980B9;  /* Blue. Trust, data, clinical UI. */
  --sage:               #1ABC9C;  /* Teal. Growth, progress, Expert Journeys. */
  --dusk:               #8E44AD;  /* Purple. Depth, Step 11, meditation. */

  /* ── NEUTRALS — these do the heavy lifting ─────────────────────────────── */
  --white:              #FFFFFF;
  --snow:               #F8F9FA;  /* Default page background. */
  --ash:                #E9ECEF;  /* Dividers, card borders. */
  --slate:              #6C757D;  /* Secondary text, "Recovery OS" lockup. */
  --graphite:           #343A40;  /* Primary body text. */
  --ink:                #212529;  /* Headlines, emphasis. */

  /* ── SEMANTIC SURFACE TOKENS ───────────────────────────────────────────── */
  --bg:                 var(--snow);
  --bg-elevated:        var(--white);
  --bg-dark:            var(--forge-dark);
  --bg-dark-elevated:   var(--charcoal);
  --surface-border:     var(--ash);
  --surface-border-on-dark: rgba(255, 255, 255, .08);
  --text:               var(--graphite);
  --text-strong:        var(--ink);
  --text-muted:         var(--slate);
  --text-on-dark:       rgba(255, 255, 255, .92);
  --text-muted-on-dark: rgba(255, 255, 255, .60);
  --accent:             var(--forge-ember);
  --rule:               var(--forge-red); /* The 4–6px heartbeat line. */

  /* ── TYPE FAMILIES ─────────────────────────────────────────────────────── */
  --font-display:  "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-heading:  "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:     "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-literary: "Crimson Pro", Georgia, "Times New Roman", serif;
  --font-system:   -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Arial, sans-serif;
  --font-mono:     "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ── TYPE SCALE — desktop sizes (mobile in parens) ─────────────────────── */
  --fs-hero:        clamp(48px, 6vw, 64px);   /* (mobile 32–40) */
  --fs-section:     clamp(32px, 3.6vw, 36px); /* (mobile 24–28) */
  --fs-card-title:  22px;                     /* (mobile 18–20) */
  --fs-body-lg:     18px;
  --fs-body:        16px;                     /* (mobile 15) */
  --fs-caption:     13px;
  --fs-eyebrow:     12px;

  --lh-display:     1.05;
  --lh-heading:     1.15;
  --lh-card:        1.25;
  --lh-body:        1.55;
  --lh-caption:     1.4;

  --tracking-display:   0.02em;  /* Bebas needs a touch of air at large sizes. */
  --tracking-heading:   0.00em;
  --tracking-eyebrow:   0.14em;  /* All-caps labels. */
  --tracking-body:      0.00em;

  /* ── SPACING (8-pt rhythm, 4 allowed for tight clusters) ───────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;

  /* ── RADII ─────────────────────────────────────────────────────────────── */
  --radius-0:    0px;
  --radius-1:    4px;
  --radius-2:    8px;    /* Inputs. */
  --radius-3:    12px;   /* Default card. */
  --radius-4:    16px;   /* Large surfaces (modals, hero cards). */
  --radius-pill: 9999px; /* Capsules, the breathing-orb shell. */

  /* ── BORDERS & STRUCTURAL RULE ─────────────────────────────────────────── */
  --border-card:        1px solid var(--ash);
  --border-card-dark:   1px solid rgba(255, 255, 255, .08);
  --rule-thickness:     4px;       /* The Forge Red heartbeat line. 4–6 ok. */

  /* ── SHADOWS — two elevations only ─────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(17, 17, 28, .06), 0 1px 1px rgba(17, 17, 28, .04);
  --shadow-2: 0 10px 24px rgba(17, 17, 28, .12), 0 2px 6px rgba(17, 17, 28, .06);
  --shadow-orb-glow: inset 0 0 60px rgba(231, 76, 60, .35);

  /* ── MOTION ────────────────────────────────────────────────────────────── */
  --ease-out:           cubic-bezier(.2, .8, .2, 1);
  --ease-state:         ease-out;
  --dur-reveal:         200ms;
  --dur-press:          80ms;
  --dur-state-cross:    800ms;
  --dur-breath-in:      4s;
  --dur-breath-hold:    7s;
  --dur-breath-out:     8s;

  /* ── LAYOUT ────────────────────────────────────────────────────────────── */
  --content-max:        1120px;
  --reading-max:        68ch;   /* 65–75 characters under cognitive load. */
  --tap-min:            44px;   /* Minimum touch target. */
}

/* ════════════════════════════════════════════════════════════════════════════
   SEMANTIC TYPE CLASSES — drop on any element to get the right voice
   ════════════════════════════════════════════════════════════════════════════ */

.fg-hero,
h1.fg-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-strong);
  font-weight: 400;
  margin: 0;
}

.fg-section,
h2.fg-section {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-strong);
  font-weight: 400;
  margin: 0;
}

.fg-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.fg-card-title,
h3.fg-card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: 600;
  line-height: var(--lh-card);
  color: var(--text-strong);
  margin: 0;
}

.fg-body,
p.fg-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--text);
  max-width: var(--reading-max);
  margin: 0;
}

.fg-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--text);
  max-width: var(--reading-max);
}

.fg-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: var(--lh-caption);
  color: var(--text-muted);
}

.fg-literary,
.fg-quote {
  font-family: var(--font-literary);
  font-size: var(--fs-body-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-strong);
  max-width: var(--reading-max);
}

.fg-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fg-wordmark .fg-wordmark__primary { color: var(--forge-ember); }
.fg-wordmark .fg-wordmark__suffix  { color: var(--slate); font-family: var(--font-heading); font-weight: 500; }
.fg-wordmark.is-on-dark .fg-wordmark__primary { color: var(--white); }
.fg-wordmark.is-on-dark .fg-wordmark__suffix  { color: rgba(255,255,255,.6); }

/* ════════════════════════════════════════════════════════════════════════════
   STRUCTURAL RULE — the heartbeat line
   ════════════════════════════════════════════════════════════════════════════ */

.fg-rule {
  display: block;
  width: 56px;
  height: var(--rule-thickness);
  background: var(--rule);
  border: 0;
}
.fg-rule--full { width: 100%; }
.fg-rule--6 { height: 6px; }