/* POPR MUSIC · Distribution — design tokens
   Inherited from popr.world so the distribution arm reads as the same brand:
   cool digital-dark ground, four hot LED accents, condensed display type.
   Display/section/nav use Oswald (condensed, the BdCn/HvEx role on popr.world);
   body/meta use IBM Plex Mono (the SFMono role). */

:root {
  /* ground — cool digital dark, not warm coffee dark */
  --bg:         #06070d;
  --bg-raised:  #0d0f1a;
  --bg-lifted:  #141827;
  --bg-hair:    #1b2034;

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

  /* four hot LEDs — vinyl is saffron, so saffron leads here */
  --saffron:    #ffb020;  /* primary — CTA, links, vinyl */
  --cyan:       #00e5ff;  /* distribution / digital */
  --magenta:    #ff2ea6;  /* manufacturing / physical */
  --lime:       #c2ff4a;  /* reporting / live */

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

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

  /* page accent — sections override via --hot */
  --hot:        var(--saffron);
  --hot-glow:   var(--saffron-glow);

  /* spacing rhythm */
  --gutter:     clamp(20px, 5vw, 80px);
  --section-y:  clamp(64px, 9vh, 140px);
  --radius:     14px;
  --maxw:       1240px;
}

/* ── TYPE ROLES — five jobs, five classes ───────────────────────────── */

.t-display {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(46px, 8vw, 128px);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.t-section {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 48px);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.t-nav {
  font-family: "Oswald", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.t-body {
  font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.t-meta {
  font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}