/* popr.world shared design tokens + type roles
   Loaded by both /index.html (desktop) and /m.html (mobile) so palette
   and typography stay in sync across the two surfaces. Everything that
   isn't typography or color lives in the surface-specific HTML. */

:root {
  /* ground — cool digital dark, not warm coffee dark */
  --bg:         #06070d;
  --bg-raised:  #0d0f1a;
  --bg-lifted:  #141827;
  --bg-image:   rgba(6,7,13,.88);

  /* ink — cool off-white, never pure white */
  --ink:        #e7ecf5;
  --ink-dim:    #7c8397;
  --ink-faint:  #3a4055;

  /* four hot LEDs */
  --saffron:    #ffb020;  /* default — links, active nav, CTA, vinyl */
  --cyan:       #00e5ff;  /* discography, digital tag */
  --magenta:    #ff2ea6;  /* store, sold-out, cassette */
  --lime:       #c2ff4a;  /* live indicators only */

  /* glows */
  --saffron-glow: rgba(255,176,32,.22);
  --cyan-glow:    rgba(0,229,255,.18);
  --magenta-glow: rgba(255,46,166,.20);

  /* rules */
  --rule:       rgba(231,236,245,.08);
  --rule-2:     rgba(231,236,245,.16);

  /* format tag tokens */
  --tag-vinyl:    var(--saffron);
  --tag-digital:  var(--cyan);
  --tag-cassette: var(--magenta);
  --tag-sold:     var(--magenta);

  /* default page accent — each page overrides via the --hot variable */
  --hot: var(--saffron);
}

/* per-page accent override (SPA uses ids; mobile may use another
   scheme and just set --hot on its own page root) */
#page-home    { --hot: var(--saffron); }
#page-disco   { --hot: var(--cyan); }
#page-store   { --hot: var(--magenta); }
#page-resume  { --hot: var(--saffron); }
#page-dates   { --hot: var(--lime); }
#page-press   { --hot: var(--saffron); }
#page-booking { --hot: var(--saffron); }
#page-contact { --hot: var(--saffron); }

/* ── TYPE ROLES — five jobs, five classes
   Every text element on the site maps to exactly one of these. */

.t-display {
  /* masthead only — home, press kit title */
  font-family: "HelveticaNeueLTStd-HvEx", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 6vw, 96px);
  line-height: .92;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--ink);
}
.t-section {
  /* "DISCOGRAPHY", "AWARDS", "REMIXES" */
  font-family: "HelveticaNeueLTStd-BdCn", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0;
  margin-bottom: 18px;
}
.t-nav {
  /* nav links, player bar labels, tab-looking things */
  font-family: "HelveticaNeueLTStd-BdCn", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.t-body {
  /* bio, notes, form labels */
  font-family: "SFMono-Regular", ui-monospace, "Courier New", monospace;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 60ch;
}
.t-meta {
  /* year, format, price, catalog number */
  font-family: "SFMono-Regular", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}