/* =============================================================
   LOVE STRUCK BLUES — Design Tokens
   colors · type · spacing · borders · motion
   ============================================================= */


:root {
  /* ---------- COLOR ---------- */
  --ink:        #03213c;
  --paper:      #f5eed4;

  --ink-90:     rgba(3, 33, 60, 0.90);
  --ink-70:     rgba(3, 33, 60, 0.70);
  --ink-50:     rgba(3, 33, 60, 0.50);
  --ink-30:     rgba(3, 33, 60, 0.30);
  --ink-15:     rgba(3, 33, 60, 0.15);
  --ink-08:     rgba(3, 33, 60, 0.08);

  --paper-soft: #ebe2c4;
  --paper-deep: #dccfa5;
  --ember:      #c84a1f;

  --fg:           var(--ink);
  --fg-muted:     var(--ink-70);
  --fg-subtle:    var(--ink-50);
  --bg:           var(--paper);
  --bg-soft:      var(--paper-soft);
  --bg-deep:      var(--paper-deep);
  --bg-invert:    var(--ink);
  --fg-on-invert: var(--paper);
  --accent:       var(--ember);
  --border:       var(--ink);
  --border-soft:  var(--ink-30);

  /* ---------- TYPE ---------- */
  --font-display: 'Anton', 'Big Shoulders Display', 'Oswald', 'Arial Narrow', sans-serif;
  --font-text:    'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-poster:   clamp(56px, 9vw, 128px);
  --fs-display:  clamp(40px, 6vw, 88px);
  --fs-h1:       clamp(32px, 4vw, 56px);
  --fs-h2:       clamp(24px, 2.6vw, 36px);
  --fs-h3:       20px;
  --fs-h4:       18px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-micro:    12px;

  --lh-tight:    0.95;
  --lh-snug:     1.1;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  --tracking-poster: 0.02em;
  --tracking-caps:   0.06em;
  --tracking-tight:  -0.01em;

  /* ---------- SPACE ---------- */
  --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;

  /* ---------- BORDERS & RADII ---------- */
  --hairline:   1px solid var(--ink);
  --rule:       1.5px solid var(--ink);
  --frame:      2px solid var(--ink);
  --frame-bold: 3px solid var(--ink);

  --radius-0:    0px;
  --radius-pill: 999px;

  /* ---------- MOTION ---------- */
  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:    80ms;
  --dur-base:    120ms;
  --dur-slow:    180ms;

  /* ---------- DUOTONE FILTER ---------- */
  --duotone-filter: grayscale(1) contrast(1.15) brightness(0.95) sepia(0.4) hue-rotate(180deg) saturate(1.6);
}

/* =============================================================
   BASE ELEMENTS
   ============================================================= */

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

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease);
}
a:hover { color: var(--ember); }

/* =============================================================
   UTILITIES
   ============================================================= */

.paper-grain {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.012  0 0 0 0 0.129  0 0 0 0 0.235  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

.poster-frame {
  border: var(--frame);
  background: var(--paper);
  padding: var(--space-3);
}
.poster-frame--bold { border: var(--frame-bold); }

.duotone {
  filter: var(--duotone-filter);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--ember { background: var(--ember); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border: var(--frame);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  border-radius: var(--radius-0);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--invert { background: var(--ink); color: var(--paper); }
.btn--invert:hover { background: var(--ember); color: var(--paper); }

.btn--ghost { background: transparent; border-color: var(--ink); }
.btn--ghost:hover { background: var(--paper-soft); color: var(--ink); }