/* ============================================================
   NEXT LINE — Design Tokens
   Music label · multiverse · experimental audio
   ============================================================ */

/* --- Fonts (Google Fonts substitutes — flagged in README) --- */
@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- COLORS ---------- */
  /* Foundations: warm near-black (the "void"/multiverse) + cream ink + hot orange flare */

  /* Backgrounds — deepest first */
  --bg-void:        #0A0908;   /* the multiverse / page bg */
  --bg-deep:        #14110F;   /* sections, modals */
  --bg-card:        #1F1C18;   /* cards, raised */
  --bg-card-2:      #292420;   /* hover / inset */
  --bg-line:        #34302B;   /* subtle dividers */

  /* Ink — warm cream */
  --ink:            #F5EFE6;   /* primary text */
  --ink-soft:       #D6CEC1;   /* secondary text */
  --ink-muted:      #A39A8E;   /* tertiary text, captions */
  --ink-dim:        #6B6359;   /* disabled, hints */
  --ink-faint:      #4A443D;   /* borders, deep hints */

  /* Brand — orange spectrum (sampled from logo) */
  --flare:          #E94D2A;   /* primary red-orange — signals, CTAs, key marks */
  --flare-deep:     #C73A1B;   /* pressed / focus rim */
  --amber:          #F58F32;   /* secondary, warmer halo */
  --spark:          #FFC971;   /* highlight / glint */
  --ember:          #7A2A12;   /* deep tint for badges-on-orange */

  /* Inversion (light surfaces — rare, mostly for press kits) */
  --paper:          #F5EFE6;
  --paper-ink:      #14110F;

  /* Semantic */
  --signal:         var(--flare);   /* primary action */
  --warning:        #F2B441;
  --error:          #FF4630;
  --ok:             #84C796;        /* used sparingly */

  /* Special — gradients used as the "portal" motif */
  --grad-portal:    radial-gradient(circle at 50% 50%, #F58F32 0%, #E94D2A 40%, #7A2A12 75%, #0A0908 100%);
  --grad-flare:     linear-gradient(135deg, #F58F32 0%, #E94D2A 60%, #C73A1B 100%);
  --grad-ember:     linear-gradient(180deg, rgba(233,77,42,0) 0%, rgba(233,77,42,0.35) 100%);

  /* ---------- TYPE ---------- */
  --font-display:   'Boldonse', 'Familjen Grotesk', 'Archivo', system-ui, sans-serif;
  --font-sans:      'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (1080p reference) */
  --t-hero:    clamp(56px, 9vw, 144px);   /* full-bleed splash */
  --t-display: clamp(40px, 5vw, 80px);    /* section openers */
  --t-h1:      40px;
  --t-h2:      28px;
  --t-h3:      20px;
  --t-body:    16px;
  --t-small:   14px;
  --t-micro:   12px;
  --t-mono:    13px;

  /* Line-height + tracking */
  --lh-tight:  1.02;
  --lh-snug:   1.18;
  --lh-body:   1.5;
  --lh-loose:  1.7;
  --track-wide: 0.16em;     /* monospaced label tracking */
  --track-mid:  0.04em;
  --track-tight: -0.02em;

  /* ---------- SPACING / RADII / SHADOW / MOTION ---------- */
  --space-0:  0;
  --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: 144px;

  --radius-xs: 2px;
  --radius-s:  4px;
  --radius-m:  8px;
  --radius-l:  14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --border-hair: 1px solid var(--bg-line);
  --border-soft: 1px solid var(--ink-faint);
  --border-flare: 1px solid var(--flare);

  --shadow-soft:  0 1px 0 rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lift:  0 2px 0 rgba(0,0,0,0.55), 0 18px 48px rgba(0,0,0,0.55);
  --shadow-glow:  0 0 0 1px rgba(233,77,42,0.35), 0 0 32px rgba(233,77,42,0.25);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 0 0 1px rgba(0,0,0,0.5);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* hero ease — long, smooth */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.4, 0, 0.1, 1);      /* UI interactions */
  --dur-fast:    140ms;
  --dur:         260ms;
  --dur-slow:    480ms;
  --dur-portal:  900ms;                              /* hero / portal reveals */
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */
html, body {
  background: var(--bg-void);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: 400; /* Boldonse is a single weight */
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  font-weight: 400;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-mid);
  font-weight: 600;
  margin: 0;
}
.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: 400;
}
.hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 400;
}

p, .body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-soft); }
.small   { font-size: var(--t-small); color: var(--ink-muted); }
.micro   { font-size: var(--t-micro); color: var(--ink-muted); }

/* Eyebrow / coordinate label — uppercase mono tag used everywhere */
.eyebrow, .coord {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--flare);
}
.eyebrow--muted { color: var(--ink-muted); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
}

a {
  color: var(--flare);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-snap);
}
a:hover { color: var(--amber); }

::selection { background: var(--flare); color: var(--bg-void); }

/* ============================================================
   PRIMITIVES
   ============================================================ */

/* Card — the default raised surface */
.nl-card {
  background: var(--bg-card);
  border: var(--border-hair);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  padding: var(--space-5);
}

/* Pill — used for genre/tag/status */
.nl-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
}
.nl-pill--flare {
  border-color: var(--flare);
  color: var(--flare);
}
.nl-pill--solid {
  border-color: transparent;
  background: var(--flare);
  color: var(--bg-void);
}

/* Button */
.nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-snap),
              background var(--dur-fast) var(--ease-snap),
              color var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-fast) var(--ease-snap);
}
.nl-btn--primary {
  background: var(--flare);
  color: var(--bg-void);
}
.nl-btn--primary:hover { background: var(--amber); box-shadow: var(--shadow-glow); }
.nl-btn--primary:active { transform: translateY(1px) scale(0.98); background: var(--flare-deep); }

.nl-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-faint);
}
.nl-btn--ghost:hover { border-color: var(--ink-muted); color: var(--ink); }
.nl-btn--ghost:active { transform: translateY(1px) scale(0.98); background: var(--bg-card); }