/* ==========================================================================
   TAMPA BAY CIGAR HOOLIGANS — Design Tokens
   Brand source: Official logo (skull/pirate, aged gold, ember, smoky black)
   ========================================================================== */

:root {

  /* ── BACKGROUNDS ─────────────────────────────────────────────────────── */
  --clr-void:       #080808;   /* near-black page base */
  --clr-black:      #0f0f0f;   /* section bg primary */
  --clr-charcoal:   #161616;   /* section bg alternate */
  --clr-ash:        #1c1c1c;   /* card background */
  --clr-ash-light:  #242424;   /* card background hover / inputs */
  --clr-smoke:      #2d2d2d;   /* borders, dividers */
  --clr-iron:       #3d3d3d;   /* subtle element borders */
  --clr-gunmetal:   #555555;   /* muted elements */

  /* ── TEXT ────────────────────────────────────────────────────────────── */
  --clr-cream:      #ede0c4;   /* primary headings */
  --clr-parchment:  #d4c4a0;   /* secondary headings */
  --clr-bone:       #b8a880;   /* body text */
  --clr-muted:      #7a6a50;   /* placeholder / footnote */
  --clr-dim:        #504030;   /* very muted */

  /* ── GOLD — primary brand accent ────────────────────────────────────── */
  --clr-gold:       #c9922a;   /* core brand gold */
  --clr-gold-light: #d8ab3a;   /* hover / active */
  --clr-gold-bright:#eccc60;   /* shine highlight */
  --clr-gold-dim:   #8a6210;   /* subdued gold */
  --clr-gold-deep:  #553808;   /* darkest gold */
  --clr-gold-antique:#b8820a;  /* aged, worn gold */

  /* ── EMBER / FIRE — secondary accent ─────────────────────────────────── */
  --clr-ember:      #c84e00;   /* dark ember */
  --clr-fire:       #df6510;   /* fire orange */
  --clr-flame:      #f07820;   /* bright flame */

  /* ── BOURBON / RUST ──────────────────────────────────────────────────── */
  --clr-bourbon:    #6b3008;
  --clr-rust:       #8b3800;
  --clr-copper:     #b5651d;

  /* ── UTILITY ─────────────────────────────────────────────────────────── */
  --clr-success:    #4a8c3f;
  --clr-error:      #c03030;
  --clr-focus:      #d8ab3a;   /* must be visible on dark bg */

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────── */
  --font-display:  'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-script:   'Satisfy', cursive;
  --font-heading:  'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body:     'Lato', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-wide:   0.08em;
  --tracking-wider:  0.18em;
  --tracking-widest: 0.28em;

  /* ── SPACING ─────────────────────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── LAYOUT ──────────────────────────────────────────────────────────── */
  --max-w:         1280px;
  --max-w-content: 960px;
  --max-w-narrow:  720px;
  --container-px:  clamp(1.25rem, 5vw, 3rem);

  /* ── BORDER / RADIUS ─────────────────────────────────────────────────── */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 12px;
  --border-gold: 2px solid var(--clr-gold);
  --border-smoke: 1px solid var(--clr-smoke);

  /* ── SHADOWS ─────────────────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.45);
  --shadow:      0 4px 20px rgba(0,0,0,0.65);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.85);
  --shadow-gold: 0 0 24px rgba(201,146,42,0.28);
  --shadow-ember:0 0 24px rgba(200,78,0,0.28);

  /* ── TRANSITIONS ─────────────────────────────────────────────────────── */
  --ease-fast: 140ms ease;
  --ease:      240ms ease;
  --ease-slow: 380ms ease;

  /* ── NAV ─────────────────────────────────────────────────────────────── */
  --nav-h:         80px;
  --nav-h-scroll:  60px;
}