/* =============================================================
   Conceptual Health — Colors & Typography  (v3 · NEJM / Mayo)
   Trustworthy institutional medical. No navy surfaces anywhere.
   Bone + parchment defaults · forest-green clinical accent.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&display=swap");

:root {
  /* ---------- Surfaces — all light (NEJM / Mayo editorial) ---------- */
  --bg-parchment: #FFFFFF;     /* pure white card */
  --bg-bone:      #F8F7F4;     /* primary editorial bg */
  --bg-mist:      #F1EFE8;     /* hover, alternating row */
  --bg-sand:      #E8E4DA;     /* subtle band */
  --bg-fog:       #F4F6F8;     /* clinical neutral / EHR feel */

  /* ---------- "Dark" tokens kept for back-compat — REMAPPED to light ---------- */
  --bg-oxford:    #F8F7F4;     /* was navy — now bone */
  --bg-deepsea:   #FFFFFF;     /* was deep navy — now parchment */
  --bg-midnight:  #FFFFFF;     /* was navy — now parchment */
  --bg-steel:     #F1EFE8;     /* was navy hairline — now mist */

  /* ---------- Foregrounds ---------- */
  --fg-1:        #1A1F2C;     /* primary ink — near-black, warm */
  --fg-2:        #4A5568;     /* secondary, body */
  --fg-3:        #6B7280;     /* tertiary, captions */
  --fg-4:        #9CA3AF;     /* quaternary */

  /* on-light variants for back-compat with old "on-dark" names */
  --fg-on-dark-1: #1A1F2C;
  --fg-on-dark-2: #4A5568;
  --fg-on-dark-3: #6B7280;

  /* ---------- Brand accents (Mayo/NEJM editorial) ---------- */
  --accent-anchor:   #14532D;     /* deep forest green — primary brand */
  --accent-tide:     #1F6B3D;     /* mid-green, secondary actions */
  --accent-clinical: #117A4D;     /* clinical green — health, action */
  --accent-vitals:   #2F9E6B;     /* lift / hover green */
  --accent-halo:     #B08D3C;     /* warm gold — equation, excellence */
  --accent-coral:    #B23A2E;     /* alert red — used sparingly */
  --accent-sky:      #2C5F87;     /* informational ink (no nav surfaces) */

  /* ---------- 9 Clinical brackets (lighter, medical) ---------- */
  --bracket-dead:        #2C2C2C;
  --bracket-critical:    #B83A2E;
  --bracket-severe:      #D26A4A;
  --bracket-poor:        #DDA055;
  --bracket-below-avg:   #C8B070;
  --bracket-average:     #B5C28E;
  --bracket-good:        #7AB988;
  --bracket-very-good:   #3DBE8B;
  --bracket-excellent:   #1E8E8E;

  /* ---------- 8 Axis tints ---------- */
  --axis-po: #B83A2E;   /* Physiological — clinical red */
  --axis-nm: #5E5BA8;   /* Neurocognitive — indigo */
  --axis-er: #DDA055;   /* Emotional Resilience — amber */
  --axis-sc: #B8893E;   /* Spiritual Coherence — gold */
  --axis-rs: #4A8FB8;   /* Relational & Social — sky */
  --axis-es: #7AB988;   /* Environmental — leaf */
  --axis-ta: #1E8E8E;   /* Technological — teal */
  --axis-pv: #1E9E6E;   /* Purposeful Vitality — clinical green */

  /* ---------- Semantic ---------- */
  --success: var(--accent-clinical);
  --warning: var(--bracket-poor);
  --danger:  var(--accent-coral);
  --info:    var(--accent-sky);

  /* ---------- Borders ---------- */
  --border-1: rgba(26,31,44,0.08);
  --border-2: rgba(26,31,44,0.14);
  --border-3: rgba(26,31,44,0.22);
  /* legacy dark-mode border tokens remapped to light hairlines */
  --border-1-dark: rgba(26,31,44,0.08);
  --border-2-dark: rgba(26,31,44,0.14);

  /* ---------- Shadows / Elevation ---------- */
  --elev-1: 0 1px 2px rgba(26,31,44,0.04), 0 0 0 1px rgba(26,31,44,0.05);
  --elev-2: 0 4px 16px rgba(26,31,44,0.06), 0 0 0 1px rgba(26,31,44,0.05);
  --elev-3: 0 16px 48px rgba(26,31,44,0.10), 0 0 0 1px rgba(26,31,44,0.06);
  --glow-clinical: 0 0 24px rgba(17,122,77,0.16);
  --glow-halo:     0 0 24px rgba(176,141,60,0.18);

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* ---------- Spacing scale ---------- */
  --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;

  /* ---------- Type families ---------- */
  --font-display:  "Fraunces", "Editorial New", "Times New Roman", serif;
  --font-sans:     "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:     "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-equation: "Newsreader", "Fraunces", "Times New Roman", serif;

  /* ---------- Type scale ---------- */
  --fs-display-xl: 88px;
  --fs-display-l:  56px;
  --fs-h1:         40px;
  --fs-h2:         30px;
  --fs-h3:         20px;
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-eyebrow:    12px;
  --fs-mono:       14px;

  /* ---------- Motion ---------- */
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-state:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-hover: 200ms; --dur-state: 320ms; --dur-enter: 600ms; --dur-hero: 1200ms;

  /* =============================================================
     Legacy aliases — every old "dark" token now resolves to a
     light editorial surface so no kit needs rewriting to lose navy.
     ============================================================= */
  --bg-obsidian:  #F8F7F4;          /* was deep dark — now bone */
  --bg-graphite:  #F1EFE8;          /* was charcoal — now mist */
  --accent-guardian: var(--accent-clinical);
  --accent-aurora:   var(--accent-vitals);
  --accent-vital:    var(--accent-coral);
  --accent-plasma:   #6E5BB2;
}

/* =============================================================
   Base / reset-lite — LIGHT default
   ============================================================= */
html, body {
  background: var(--bg-bone);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Legacy `.ch-dark` scope — now a light parchment band, not navy */
.ch-dark {
  background: var(--bg-parchment);
  color: var(--fg-1);
}

/* =============================================================
   Semantic typography
   ============================================================= */
.ch-display-xl { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display-xl); line-height: 1.0; letter-spacing: -0.02em; }
.ch-display-l  { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: var(--fs-display-l); line-height: 1.05; letter-spacing: -0.01em; color: var(--accent-halo); }
.ch-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.01em; }
.ch-h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; }
.ch-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
.ch-body-l { font-size: var(--fs-body-l); line-height: 1.6; color: var(--fg-2); }
.ch-body   { font-size: var(--fs-body);   line-height: 1.6; }
.ch-body-s { font-size: var(--fs-body-s); line-height: 1.5; color: var(--fg-2); }
.ch-eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-clinical);
}
.ch-mono { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 400; }
.ch-equation { font-family: var(--font-equation); font-style: italic; font-weight: 400; letter-spacing: -0.005em; color: var(--accent-halo); }

/* =============================================================
   Utilities
   ============================================================= */
.ch-divider { border: 0; height: 1px; background: var(--border-1); margin: var(--s-7) 0; }
.ch-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-2);
  background: var(--bg-parchment);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-2);
}
.ch-grid-bg {
  background-image:
    linear-gradient(rgba(26,31,44,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,31,44,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.ch-radial-hero {
  background:
    radial-gradient(1200px 600px at 50% -100px, rgba(17,122,77,0.05), transparent 60%),
    radial-gradient(800px 500px at 80% 20%, rgba(176,141,60,0.04), transparent 70%),
    var(--bg-bone);
}