/* =====================================================================
   Serious People — Design Tokens
   Import this file first; everything downstream uses these variables.
   ===================================================================== */

/* ---- Web fonts ---- */
/* Redaction: distressed editorial serif from The Marshall Project.
   Not on Google Fonts — hosted via Cloudflare CDN mirror or local.
   Fallback: Playfair Display (Google) — NEAREST MATCH, not identical.
   ACTION: drop official Redaction .woff2 files into /fonts and update. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

:root {
  /* =============================================================
     COLOR — the dusk palette (derived from album art)
     ============================================================= */

  /* Core scale — night to dawn */
  --sp-night:     #0B0A1A;   /* near-black indigo, primary bg */
  --sp-night-2:   #141230;   /* raised surface on night */
  --sp-indigo:    #2C2863;   /* mid-sky, cards on night */
  --sp-violet:    #3B2D80;   /* sky zenith highlight */
  --sp-mauve:     #A68DA6;   /* horizon haze, muted accent */

  /* Warm highlights — sodium lights, car trails */
  --sp-amber:     #E8A838;   /* primary accent, headlights */
  --sp-ember:     #C84A14;   /* saturated sodium, hot/pressed */
  --sp-sunfade:   #F5C77A;   /* highlight on amber, subtle hover lift */

  /* Warm neutrals — paper, ash, bone */
  --sp-bone:      #F4ECE0;   /* primary fg, warm off-white */
  --sp-paper:     #E8DDCB;   /* softer paper tone, quotes */
  --sp-ash:       #938A82;   /* warm mid-grey, secondary fg */
  --sp-ash-dim:   #5E564F;   /* muted fg on dark, metadata */

  /* Alpha utilities (on dark bg) */
  --sp-bone-12:   rgba(244, 236, 224, 0.12);  /* hairline border */
  --sp-bone-24:   rgba(244, 236, 224, 0.24);  /* hover border */
  --sp-bone-64:   rgba(244, 236, 224, 0.64);  /* secondary text */
  --sp-amber-20:  rgba(232, 168, 56, 0.20);
  --sp-amber-40:  rgba(232, 168, 56, 0.40);
  --sp-night-70:  rgba(11, 10, 26, 0.70);     /* nav backdrop */
  --sp-night-90:  rgba(11, 10, 26, 0.92);     /* protection gradient stop */

  /* =============================================================
     SEMANTIC COLOR (what you actually use in components)
     ============================================================= */
  --bg:           var(--sp-night);
  --bg-raised:   var(--sp-night-2);
  --bg-card:     var(--sp-indigo);
  --bg-inverse:  var(--sp-bone);

  --fg:           var(--sp-bone);
  --fg-muted:     var(--sp-bone-64);
  --fg-dim:       var(--sp-ash);
  --fg-inverse:   var(--sp-night);

  --accent:       var(--sp-amber);
  --accent-hot:   var(--sp-ember);
  --accent-soft:  var(--sp-mauve);

  --border:       var(--sp-bone-12);
  --border-hover: var(--sp-amber-40);

  --shadow-1: 0 1px 2px rgba(11, 10, 26, 0.4);
  --shadow-2: 0 8px 32px rgba(11, 10, 26, 0.6), 0 1px 2px rgba(232, 168, 56, 0.10);
  --shadow-glow: 0 0 0 1px var(--sp-amber-20), 0 0 24px rgba(232, 168, 56, 0.15);

  /* The dusk gradient — only sanctioned brand gradient */
  --dusk-gradient: linear-gradient(180deg,
    #0B0A1A 0%,
    #141230 20%,
    #2C2863 45%,
    #3B2D80 60%,
    #A68DA6 80%,
    #E8A838 100%);

  /* Protection gradient — for text over imagery */
  --protection-gradient: linear-gradient(0deg,
    var(--sp-night) 0%,
    var(--sp-night-90) 20%,
    rgba(11, 10, 26, 0.4) 60%,
    rgba(11, 10, 26, 0) 100%);

  /* =============================================================
     TYPOGRAPHY
     ============================================================= */

  --font-display: 'Redaction', 'Redaction 35', 'Playfair Display', Georgia, serif;
  --font-body:    'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Modular scale — 1.25 (major third), generous */
  --fs-micro:   11px;   /* labels, metadata */
  --fs-small:   13px;   /* caption */
  --fs-body:    17px;   /* primary reading size */
  --fs-lead:    21px;   /* intro paragraph */
  --fs-h5:      21px;
  --fs-h4:      28px;
  --fs-h3:      36px;
  --fs-h2:      52px;
  --fs-h1:      80px;
  --fs-display: 128px;  /* hero wordmark */
  --fs-mega:    200px;  /* landing page takeover */

  --lh-tight:   1.05;   /* display */
  --lh-snug:    1.15;   /* h1, h2 */
  --lh-normal:  1.35;   /* h3-h5 */
  --lh-body:    1.6;    /* paragraph */
  --lh-loose:   1.8;    /* liner-note text */

  --tracking-tight:  -0.02em;  /* display */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* mono labels, small caps */
  --tracking-mono:   0.02em;   /* mono body */

  /* =============================================================
     SPACING — 4px base, no fractions
     ============================================================= */
  --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;
  --space-10: 128px;
  --space-11: 192px;

  /* =============================================================
     RADII — tight. no 8/12/16 rounds.
     ============================================================= */
  --radius-0:    0;
  --radius-1:    2px;    /* default UI */
  --radius-2:    4px;    /* input focus ring */
  --radius-full: 999px;  /* pills, avatars */

  /* =============================================================
     MOTION
     ============================================================= */
  --ease-dusk: cubic-bezier(0.22, 1, 0.36, 1);  /* slow start, long tail */
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:  200ms;
  --dur-med:   400ms;
  --dur-slow:  800ms;
  --dur-reveal: 1200ms;  /* hero entrances */

  /* =============================================================
     LAYOUT
     ============================================================= */
  --content-max:   1200px;
  --content-narrow: 720px;
  --gutter:         32px;
}

/* =====================================================================
   BASE / RESET
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

/* =====================================================================
   SEMANTIC TYPE — use these, don't reinvent
   ===================================================================== */

.sp-display,
.sp-wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg);
}

h1, .sp-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h2, .sp-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .sp-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-normal);
  font-weight: 500;
  margin: 0 0 var(--space-3);
}

h4, .sp-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

h5, .sp-h5 {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

p, .sp-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}

.sp-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-style: italic;
  color: var(--sp-paper);
  max-width: 56ch;
}

.sp-small {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

.sp-label,
.sp-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-dim);
}

.sp-mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
}

code, pre, .sp-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
}

a, .sp-link {
  color: inherit;
  text-decoration: none;
  position: relative;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-dusk),
              border-color var(--dur-fast) var(--ease-dusk);
}
a:hover, .sp-link:hover {
  border-bottom-color: currentColor;
}
a:active, .sp-link:active {
  color: var(--accent);
}

::selection {
  background: var(--sp-amber);
  color: var(--sp-night);
}

/* =====================================================================
   UTILITY — grain overlay, protection gradient
   ===================================================================== */

.sp-grain {
  position: relative;
}
.sp-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.93  0 0 0 0 0.88  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}