/* ══════════════════════════════════════════════════════════════════════════
   REWIND BAND — DESIGN TOKENS
   The single place to tweak the look. Every component style in style.css
   reads from here; nothing hardcodes a colour, size, or duration.

   Persona driving these choices: lifelong rockers with grey in the beard and
   nothing to prove. Great guitars, a horn section that actually punches.
   Sixties soul through nineties rock. Loud, warm, a little worn — but sharp,
   not nostalgic-frumpy. Think a gig poster stapled to a telephone pole,
   printed today.
   ══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── 1. PALETTE ─────────────────────────────────────────────────────────
     Raw colours. Don't use these directly in components — use the semantic
     tokens in §2, so a re-skin is a handful of edits instead of a hunt.     */

  /* Ink — stage-dark greys. The base the whole site sits on. */
  --c-ink-900: #08080a;   /* deepest, page background      */
  --c-ink-800: #0f0f13;   /* section background            */
  --c-ink-700: #16161c;   /* raised surface / cards        */
  --c-ink-600: #1f1f27;   /* hover surface                 */
  --c-ink-500: #2c2c36;   /* borders on dark               */
  --c-ink-400: #444450;   /* dividers, disabled            */

  /* Paper — the cream from the logo badge. Light sections + inverted type. */
  --c-paper-100: #fdfcf7;
  --c-paper-200: #f4f1e6;  /* matches the badge exactly    */
  --c-paper-300: #e6e1d0;
  --c-paper-400: #c9c2ab;

  /* Ember — overdriven amp, red-hot. Primary accent, CTAs, energy. */
  --c-ember-300: #ff8f6b;
  --c-ember-500: #ff4a1c;
  --c-ember-700: #c62f0c;

  /* Brass — the horn section, literally. Secondary accent, highlights. */
  --c-brass-300: #f7cf8a;
  --c-brass-500: #e8a33d;
  --c-brass-700: #b47816;

  /* Electric — the blues half of the name. Third accent, cool contrast. */
  --c-electric-300: #7cc0f5;
  --c-electric-500: #2f86d8;
  --c-electric-700: #1a5a99;

  /* Grey type on dark */
  --c-smoke-300: #b3ab99;
  --c-smoke-500: #837c6d;


  /* ── 2. SEMANTIC COLOUR ─────────────────────────────────────────────────
     What components actually reference. Rename nothing here without
     grepping style.css.                                                     */

  --bg:            var(--c-ink-900);
  --bg-alt:        var(--c-ink-800);
  --surface:       var(--c-ink-700);
  --surface-hover: var(--c-ink-600);
  --border:        var(--c-ink-500);
  --border-soft:   var(--c-ink-400);

  --text:          var(--c-paper-200);
  --text-strong:   var(--c-paper-100);
  --text-muted:    var(--c-smoke-300);
  --text-faint:    var(--c-smoke-500);

  /* Inverted — for the cream sections that break up the dark */
  --bg-invert:          var(--c-paper-200);
  --surface-invert:     var(--c-paper-100);
  --text-invert:        var(--c-ink-900);
  --text-invert-muted:  #6d6759;
  --border-invert:      var(--c-paper-300);

  --accent:        var(--c-ember-500);
  --accent-hover:  var(--c-ember-700);
  --accent-soft:   var(--c-ember-300);
  --accent-2:      var(--c-brass-500);
  --accent-2-soft: var(--c-brass-300);
  --accent-3:      var(--c-electric-500);
  --accent-3-soft: var(--c-electric-300);
  --on-accent:     var(--c-paper-100);

  --focus: var(--c-brass-500);

  /* Gradients — used sparingly: hero headline, rules, one or two accents.
     Overuse is how "exciting" turns into "2014 startup". */
  --grad-heat: linear-gradient(96deg, var(--c-ember-500) 0%, var(--c-brass-500) 100%);
  --grad-stage: linear-gradient(96deg, var(--c-ember-500) 0%, var(--c-brass-500) 55%, var(--c-electric-500) 100%);
  --grad-fade-dark: linear-gradient(180deg, transparent, var(--bg) 92%);


  /* ── 3. TYPE ────────────────────────────────────────────────────────────
     Two families. Anton for anything that shouts (it's a gig-poster face),
     Inter for anything you actually read.                                   */

  --font-display: Anton, "Arial Narrow", Impact, sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid scale, ~1.25 ratio at the small end opening to ~1.4 at the large */
  --fs-100: .75rem;                              /* micro labels        */
  --fs-200: .8125rem;                            /* eyebrows, tags      */
  --fs-300: .9375rem;                            /* small body          */
  --fs-400: clamp(1rem, .97rem + .15vw, 1.0625rem);   /* body           */
  --fs-500: clamp(1.125rem, 1.06rem + .3vw, 1.25rem); /* lede           */
  --fs-600: clamp(1.4rem, 1.25rem + .7vw, 1.85rem);   /* h3             */
  --fs-700: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);      /* h2             */
  --fs-800: clamp(3rem, 1.8rem + 5.6vw, 7rem);        /* h1 / display   */
  --fs-900: clamp(4rem, 2rem + 11vw, 12rem);          /* huge marquee   */

  --lh-tight: .92;
  --lh-snug: 1.15;
  --lh-body: 1.65;

  --tr-tight: -.02em;   /* display tracking, Anton likes it snug */
  --tr-normal: 0;
  --tr-wide: .08em;
  --tr-wider: .18em;    /* uppercase micro-labels                */


  /* ── 4. SPACE / LAYOUT ──────────────────────────────────────────────── */

  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --section-y: clamp(4rem, 9vw, 7.5rem);   /* vertical rhythm between sections */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 72rem;
  --wrap-narrow: 44rem;


  /* ── 5. SURFACE DETAIL ──────────────────────────────────────────────── */

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --border-w: 1px;
  --border-w-thick: 3px;

  --shadow-sm: 0 1px 3px rgb(0 0 0 / .4);
  --shadow: 0 8px 24px rgb(0 0 0 / .45);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / .55);
  --glow-accent: 0 0 0 1px rgb(255 74 28 / .35), 0 8px 32px rgb(255 74 28 / .28);
  --glow-brass: 0 0 0 1px rgb(232 163 61 / .35), 0 8px 32px rgb(232 163 61 / .22);


  /* ── 6. MOTION ──────────────────────────────────────────────────────── */

  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 480ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-back: cubic-bezier(.34, 1.4, .64, 1);


  /* ── 7. Z-INDEX ─────────────────────────────────────────────────────── */

  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 200;
}