/* ============================================================
   JH Digital — Design tokens
   Locked from homepage v5 / SKILL.md.
   Every other stylesheet uses these variables. Never hardcode colours.
   ============================================================ */

:root {
  /* ---------- Palette ---------- */
  --gold:        #D4A33A;          /* primary brand */
  --gold-light:  #F0C75E;          /* hover, gradient highlights */
  --gold-deep:   #A87F26;          /* gradient base, contained text */
  --gold-soft:   rgba(212, 163, 58, 0.08);
  --gold-line:   rgba(212, 163, 58, 0.25);

  --teal:        #6FD9C4;          /* sponsor band only */
  --teal-light:  #A8E8D9;
  --teal-deep:   #3FB39C;

  --ink:         #14213D;          /* primary text, navy */
  --ink-soft:    #3D4D6B;
  --ink-mute:    #6B7892;

  --bone:        #F4EEDD;          /* cream on dark, footer text */
  --paper:       #FAF7EE;          /* primary surface */
  --cream:       #F0EBDC;          /* card surface on paper */
  --gray:        #E8E5DA;          /* mission/counter blocks */

  --white:       #FFFFFF;
  --black:       #0A0A0A;

  --rule:        rgba(20, 33, 61, 0.10);
  --rule-soft:   rgba(20, 33, 61, 0.06);

  /* ---------- Typography ---------- */
  --font-sans:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Shadows ---------- */
  --shadow-sm:        0 1px 2px rgba(20, 33, 61, 0.04);
  --shadow-md:        0 4px 24px rgba(20, 33, 61, 0.06);
  --shadow-card:      0 24px 60px -20px rgba(20, 33, 61, 0.18);
  --shadow-glow-gold: 0 30px 80px -10px rgba(212, 163, 58, 0.45);

  /* ---------- Spacing rhythm ---------- */
  --space-section-y:  140px;       /* desktop section vertical padding (default) */
  --space-section-x:  56px;        /* desktop section horizontal padding */
  --space-card:       80px;        /* card interior padding */
  --space-grid-gap:   32px;
  --space-grid-gap-l: 80px;

  /* ---------- Radii ---------- */
  --radius-photo: 8px;
  --radius-card:  12px;
  --radius-block: 16px;
  --radius-pill:  999px;

  /* ---------- Layout ---------- */
  --max-content: 1320px;
  --max-text:    680px;
}

@media (max-width: 1024px) {
  :root {
    --space-section-y: 80px;
    --space-section-x: 24px;
    --space-card:      40px;
    --space-grid-gap-l: 40px;
  }
}