/* ══════════════════════════════════════════════════════════
   FLUORESCENCE — DESIGN SYSTEM
   theme.css · Single source of truth
   Background · Typography · Base reset
   ══════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  /* Background
     Both surfaces are now the same value.
     --bg2 kept as an alias — safe to replace all --bg2 with --bg
     once confirmed in production.                                  */
  --bg:         #11012e;
  --bg2:        #11012e;
  --bg-tile:    rgba(255,255,255,0.025);
  --bg-tile-hi: rgba(255,255,255,0.04);

  /* Brand accent colours */
  --green-mint:    #00ffaa;
  --green-mid-1:   #00dd88;
  --green-mid-2:   #00cc77;
  --green-bright:  #00ff00;
  --cyan:          #00ffff;
  --magenta-bright:#ff00bb;
  --magenta-mid:   #ff55a3;
  --purple-bright: #bf00ff;

  /* Backward-compatible aliases
     Existing CSS that references --green, --gbri, --magenta etc.
     keeps working while you migrate to the new names above.        */
  --green:      #00ffaa;  /* → --green-mint  */
  --green-mid:  #00dd88;  /* → --green-mid-1 */
  --green-deep: #00cc77;  /* → --green-mid-2 */
  --gbri:       #00ffaa;  /* → --green-mint  */
  --magenta:    #ff00bb;  /* → --magenta-bright */

  /* Ink scale */
  --ink:       #ffffff;
  --soft:      rgba(255,255,255,0.93);
  --ink-soft:  rgba(255,255,255,0.93);
  --dim:       rgba(255,255,255,0.45);
  --ink-muted: rgba(255,255,255,0.45);
  --ink-faint: rgba(255,255,255,0.28);

  /* Dividers */
  --rule:  rgba(255,255,255,0.08);
  --ruleS: rgba(255,255,255,0.16);

  /* Typography
     --sans  : Inter — primary throughout (UI, body, captions)
     --serif : Fraunces 700 — highlight / question treatment only
     --mono  : JetBrains Mono — labels, eyebrows, code            */
  --sans:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif:        'Fraunces', ui-serif, Georgia, serif;
  --serif-weight: 700;   /* bold roman — same weight as hero questions */
  --mono:         'JetBrains Mono', ui-monospace, monospace;

  /* Light-surface tokens — text on white/off-white backgrounds only */
  --lt-ink:       #11012e;               /* matches dark bg — brand cohesion */
  --lt-dim:       rgba(17,1,46,0.55);
  --lt-rule:      rgba(17,1,46,0.09);
  --lt-bg:        #f6f5f0;
  --lt-body-size: clamp(1rem, 1.1vw, 1.25rem);  /* ~20px at 1920px — readable at full viewport */

  /* Layout */
  --pad: clamp(28px, 5.5vw, 90px);
  --max: 1360px;
}

/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ── Light-surface body copy — use on white/off-white sections only ──
   Colour intentionally mirrors the dark background (#11012e) for
   brand cohesion. Never use on dark backgrounds.
   Apply class .lt-copy to the wrapping element.              */
.lt-copy,
.lt-copy p {
  font-size: var(--lt-body-size);
  color: var(--lt-ink);
  font-weight: 400;
  line-height: 1.75;
}
.lt-copy p + p { margin-top: 20px; }

/* ── Serif highlight utility ──────────────────────────────
   Apply .hl to any element to get Fraunces 700 bold roman.
   Colours intentionally not set here — inherit or set per-use.
   ─────────────────────────────────────────────────────── */
.hl          { font-family: var(--serif); font-weight: var(--serif-weight); font-style: normal; }
.hl-green    { color: var(--green-bright); }
.hl-cyan     { color: var(--cyan); }
.hl-magenta  { color: var(--magenta-bright); }
.hl-white    { color: var(--ink); }