/* ============================================================
   BBC Golden Hour — Design Tokens (CSS variables)
   Drop into <style> at top of any HTML output.
   Source of truth: tokens.json (this file is generated from it)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600;700;800;900&family=League+Spartan:wght@300;400;500;700;800;900&display=swap');

:root {
  /* ---- Colors ---- */
  --gold:      #D4A03C;
  --amber:     #E8932A;
  --sunset:    #D46830;
  --ember:     #B8423A;
  --berry:     #8A2A3A;
  --rust:      #DB4C05;
  --maroon:    #940300;
  --maroon-d:  #4D0000;
  --night:     #1A1412;
  --deep:      #0a0806;
  --white:     #FAF6F0;
  --cream:     #F2EBE0;
  --sand:      #E8DFD2;
  --stone:     #B8AFA2;
  --warm-text: #FFC9A7;
  --charcoal:  #3A3632;
  --dusk:      #1B2A4A;   /* backgrounds/photography only */
  --sky:       #2C4A7C;   /* backgrounds/photography only */

  /* ---- Gradients ---- */
  --gradient-brand:     linear-gradient(90deg, #D4A03C, #E8932A, #D46830, #B8423A);
  --gradient-warm:      linear-gradient(-25deg, #E6C487 7%, #E4762F 25%, #DB4C05 49%, #940300 82%, #4D0000 99%);
  --gradient-warm-rev:  linear-gradient(0deg,   #4D0000 2%, #940300 19%, #DB4C05 51%, #E4762F 75%, #E6C487 93%);
  --gradient-bumblebee: linear-gradient(135deg, #D4A03C 1%, #E8932A 18%, #D46830 41%, #B8423A 73%, #8A2A3A 91%);
  --gradient-night-warm: linear-gradient(135deg, #0a0806 0%, #1A1412 30%, #4D0000 70%, #940300 100%);

  /* ---- Type families ---- */
  --font-display:  'League Spartan', sans-serif;
  --font-elegant:  'Cormorant Garamond', serif;
  --font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
  --font-script:   'Caveat', cursive;
  --font-mono:     'DM Mono', ui-monospace, monospace;

  /* ---- Fluid type scale ---- */
  --type-hero:    clamp(40px, 9vw,  96px);
  --type-h1:      clamp(38px, 8vw,  84px);
  --type-h2:      clamp(28px, 6vw,  64px);
  --type-h3:      clamp(22px, 5vw,  36px);
  --type-lede:    clamp(15px, 2vw,  24px);
  --type-body:    clamp(14px, 1.6vw, 18px);
  --type-caption: clamp(10px, 1.2vw, 14px);

  /* ---- Spacing scale ---- */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px; --sp-8: 64px;
  --sp-9: 80px;  --sp-10: 96px; --sp-11: 128px;

  /* ---- Radii ---- */
  --r-card:  14px;
  --r-btn:   10px;
  --r-small:  6px;
  --r-skewed: 62% 38% 55% 45% / 48% 52% 48% 52%;  /* signature shape */

  /* ---- Effects ---- */
  --shadow-card: 0 30px 80px rgba(0,0,0,.5);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.15);
  --letter-tight: -1px;
  --letter-eyebrow: 5px;
  --letter-eyebrow-wide: 10px;
}

/* ---- Utility classes ---- */

.bbc-gradient-text {
  background: var(--gradient-bumblebee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.bbc-gradient-text-warm {
  background: var(--gradient-warm-rev);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.bbc-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--type-caption);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
}

.bbc-eyebrow-wide {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--type-caption);
  letter-spacing: var(--letter-eyebrow-wide);
  text-transform: uppercase;
}

.bbc-display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: var(--letter-tight);
}

.bbc-elegant {
  font-family: var(--font-elegant);
  font-weight: 400;
  font-style: italic;
}

.bbc-body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.5;
}

.bbc-glass-dark {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.85);
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
  border-radius: var(--r-btn);
}

.bbc-glass-light {
  background: rgba(255,255,255,.4);
  border: 1px solid var(--white);
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
  border-radius: var(--r-btn);
}

.bbc-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('assets/grain.png');
  background-size: 400px;
  mix-blend-mode: overlay;
  opacity: 0.20;
  pointer-events: none;
  z-index: 1;
}

.bbc-skewed {
  border-radius: var(--r-skewed);
}

.bbc-stat-divider {
  border-top: 2px solid;
  border-image: var(--gradient-bumblebee) 1;
}

/* ---- Buttons ---- */

.bbc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-body);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bbc-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }

.bbc-btn-gold     { background: linear-gradient(135deg, var(--gold), var(--amber)); color: #000; }
.bbc-btn-ember    { background: var(--ember); color: #fff; }
.bbc-btn-gradient { background: var(--gradient-bumblebee); color: #fff; }
.bbc-btn-outline  { background: transparent; border: 2px solid rgba(255,255,255,0.25); color: var(--white); }
.bbc-btn-outline-light { background: transparent; border: 2px solid rgba(0,0,0,0.15); color: var(--charcoal); }