/* ============================================================
   Holler — Design System (tokens)
   Theme: "broadcast" — warm megaphone-orange, radiating sound,
   warm near-black ink on cream. Bold display + clean body.
   ============================================================ */
:root {
  /* Brand — megaphone orange */
  --brand-50:  #fff4ec;
  --brand-100: #ffe6d3;
  --brand-200: #ffc9a6;
  --brand-300: #ffa46d;
  --brand-400: #fb8138;
  --brand-500: #ef6316;   /* primary */
  --brand-600: #d44e0a;
  --brand-700: #b03c08;
  --brand-800: #7a2906;
  --brand-900: #4a1a05;

  /* Warm neutrals */
  --ink:        #1b1410;  /* near-black, warm */
  --ink-soft:   #4a4038;
  --muted:      #7a6f64;
  --faint:      #a89c8f;
  --line:       #ece2d6;
  --paper:      #fffaf4;  /* page bg */
  --surface:    #ffffff;
  --cream:      #fbf1e6;  /* alt section */
  --on-brand:   #ffffff;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #fb923c 0%, #ef6316 45%, #c2410c 100%);
  --grad-ink:   linear-gradient(180deg, #241a13 0%, #140d08 100%);

  /* Type */
  --font-display: "Bricolage Grotesque", "SF Pro Display", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tracking-tight: -0.03em;
  --tracking-label: 0.14em;

  /* Scale */
  --t-xs: 0.8rem;
  --t-sm: 0.92rem;
  --t-md: 1.05rem;
  --t-lg: 1.25rem;
  --t-xl: 1.6rem;
  --t-2xl: 2.2rem;
  --t-3xl: clamp(2.6rem, 6vw, 4.4rem);
  --t-hero: clamp(3rem, 8vw, 6rem);

  /* Space / radius / shadow */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(40, 20, 5, 0.06);
  --shadow-md: 0 12px 40px rgba(60, 30, 8, 0.12);
  --shadow-glow: 0 20px 70px rgba(239, 99, 22, 0.35);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
  --maxw: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f6efe7;
    --ink-soft: #cabfb2;
    --muted: #a89b8c;
    --faint: #6f6356;
    --line: #2e2620;
    --paper: #14100c;
    --surface: #1c1712;
    --cream: #1a140f;
  }
}