/* ============================================================
   THE GHOST — colors & type tokens
   Editorial. Punk. Surgical.
   White is the ground (70–80%). Magenta + cyan are weapons,
   not wallpaper. Black is for type and ghost eyes only.
   ============================================================ */

/* ---------- Web fonts (Google Fonts substitutions) ----------
   Display serif: requested Reckless / GT Sectra (commercial).
     SUBSTITUTE → "Fraunces" wght 900 italic-off — closest free
     match for knife-edge editorial heavy serif. FLAG TO USER.
   Sub-display sans: requested Druk / Obviously / Sharp Grotesk
     SUBSTITUTE → "Archivo Black" + "Bowlby One" stack.
     FLAG TO USER. (Druk is the canonical aim.)
   Body: Syne (already licensed in HauntOS stack).
   Mono: IBM Plex Mono (licensed, free via Google Fonts).
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,700;9..144,900&family=Archivo+Black&family=Syne:wght@400;500;600;700;800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---------- BRAND COLORS (raw) ---------- */
  --ghost-magenta: #E91E8C;   /* primary brand. corner blocks, emphasis */
  --ghost-cyan:    #00BCD4;   /* one-per-screen counterpoint */
  --ghost-amber:   #E8850C;   /* HauntOS amber. logo offset only. forbidden elsewhere */
  --ghost-ink:     #0A0A0A;   /* type + ghost eyes only. NEVER as fill / bg */
  --ghost-paper:   #FFFFFF;   /* canvas. dominant ground */

  /* HauntOS softer pink (Skool variant only) */
  --hauntos-pink:  #FFD9EC;

  /* ---------- Tints derived from primaries (for highlights, hover only) ---------- */
  --magenta-press: #B8166E;
  --cyan-press:    #0096AB;

  /* ---------- Semantic surface ---------- */
  --bg:            var(--ghost-paper);
  --bg-inverse:    var(--ghost-ink);
  --bg-pop-magenta: var(--ghost-magenta);
  --bg-pop-cyan:    var(--ghost-cyan);

  /* ---------- Foreground ---------- */
  --fg:            var(--ghost-ink);
  --fg-muted:      #4A4A4A;     /* metadata, captions */
  --fg-subtle:     #8A8A8A;     /* form helper, slide counter */
  --fg-on-magenta: var(--ghost-paper);
  --fg-on-cyan:    var(--ghost-ink);   /* cyan + black, never cyan + white */
  --fg-on-ink:     var(--ghost-paper);

  /* ---------- Borders ---------- */
  --rule:          var(--ghost-ink);   /* hairline rules are always ink */
  --rule-hair:     1px;
  --rule-bold:     2px;
  --rule-brutal:   4px;

  /* ---------- Spacing scale (4px base, opinionated jumps) ---------- */
  --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 — flat punk. corners are weapons ---------- */
  --r-0: 0;
  --r-1: 2px;          /* inputs, tags */
  --r-pill: 999px;     /* one-off CTA only — sparingly */

  /* ---------- Shadows — used SPARINGLY. punk is flat. ---------- */
  --shadow-offset-magenta: 6px 6px 0 0 var(--ghost-magenta);
  --shadow-offset-cyan:    6px 6px 0 0 var(--ghost-cyan);
  --shadow-offset-ink:     4px 4px 0 0 var(--ghost-ink);
  /* No drop-shadows. No glassmorphism. No gradients. */

  /* ---------- Type families ---------- */
  --font-display: 'Fraunces', 'GT Sectra', 'Reckless', Georgia, serif;
  --font-sub:     'Archivo Black', 'Druk', 'Obviously', 'Sharp Grotesk', Impact, sans-serif;
  --font-body:    'Syne', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- Type scale (display) ---------- */
  --t-display-xl: clamp(64px, 9vw, 168px);  /* hero opinion headline */
  --t-display-l:  clamp(48px, 6vw, 112px);
  --t-display-m:  clamp(36px, 4vw, 72px);
  --t-display-s:  32px;

  /* Sub-display / hammer caps */
  --t-hammer-xl: clamp(56px, 7vw, 128px);
  --t-hammer-l:  clamp(40px, 5vw, 88px);
  --t-hammer-m:  56px;
  --t-hammer-s:  32px;

  /* Body */
  --t-body-l: 22px;
  --t-body:   18px;
  --t-body-s: 15px;

  /* Mono / system labels */
  --t-mono-l: 16px;
  --t-mono:   13px;
  --t-mono-s: 11px;

  /* ---------- Line height ---------- */
  --lh-tight:  0.92;
  --lh-snug:   1.05;
  --lh-normal: 1.4;
  --lh-loose:  1.6;

  /* ---------- Tracking ---------- */
  --tr-display: -0.02em;
  --tr-hammer:  -0.01em;
  --tr-allcaps: 0.06em;

  /* ---------- Layout ---------- */
  --maxw-text: 64ch;
  --maxw-page: 1280px;

  /* ---------- Motion ---------- */
  --ease-snap: cubic-bezier(.2,.9,.2,1);    /* surgical, no bounce */
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* H1 — editorial heavy serif. opinion-led. */
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}

/* H2 — sub-display HAMMER caps. */
h2, .t-h2 {
  font-family: var(--font-sub);
  font-weight: 900;
  font-size: var(--t-hammer-l);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-hammer);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

/* H3 — serif mid */
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display-s);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  margin: 0;
}

/* H4 — Syne extrabold, used for in-flow callouts */
h4, .t-h4 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 22px;
  line-height: var(--lh-snug);
  margin: 0;
}

/* Body */
p, .t-body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  max-width: var(--maxw-text);
  text-wrap: pretty;
  margin: 0;
}

/* Eyebrow / label / system caps */
.t-eyebrow, .t-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-allcaps);
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
}

/* Pull quote — knife-edge serif italic */
.t-pull {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-display-m);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
}

/* System / mono — slide counters, footnotes, tags */
code, .t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.02em;
  color: var(--fg);
}

/* Hammer (independent class for ALL-CAPS punk callouts) */
.t-hammer {
  font-family: var(--font-sub);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tr-hammer);
  line-height: var(--lh-tight);
}

/* Strikethrough — used heavily as editorial gesture (the ghost
   strikes the wrong word and writes the right one). */
s, .t-strike {
  text-decoration: line-through;
  text-decoration-thickness: 0.08em;
}

/* Highlight — magenta block behind text. punctuation, not decoration */
.t-mark {
  background: var(--ghost-magenta);
  color: var(--fg-on-magenta);
  padding: 0.05em 0.25em 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.t-mark--cyan {
  background: var(--ghost-cyan);
  color: var(--fg-on-cyan);
}

/* Hairline rule — primary divider system. always ink. */
.rule {
  border: 0;
  border-top: var(--rule-hair) solid var(--rule);
}
.rule--bold { border-top-width: var(--rule-bold); }
.rule--brutal { border-top-width: var(--rule-brutal); }

/* No em-dashes on screen — use ` · ` middot or ` // ` instead */