/* ============================================================
   BLARE — Design Tokens
   Brand: "Say it once. Blare it everywhere."
   Palette: warm editorial — cream base, ink text, coral loud accent
   Type: Bricolage Grotesque (display) · Inter (body) · JetBrains Mono (data)
   ============================================================ */

:root {
  /* ---- Color: brand ---- */
  --ink:        #26221F;  /* Amp Ink — headlines, dark surfaces */
  --ink-soft:   #3A342F;  /* raised dark surface */
  --coral:      #E85C33;  /* Blare Coral — the loud color, ≤10% of screen */
  --coral-deep: #C8472F;  /* pressed / hover-darker state */
  --coral-tint: #FBE3D8;  /* eyebrow badges, subtle fills */
  --gold:       #E9A13B;  /* Spotlight Gold — celebration moments only */
  --cream:      #FAF5EC;  /* page background */
  --cream-2:    #F4EEE1;  /* raised card background */
  --slate:      #6E675F;  /* body text */
  --slate-soft: #9C9388;  /* tertiary text */
  --mist:       #EAE3D5;  /* hairline borders */
  --green:      #3E7C59;  /* success / "blared" states */
  --red:        #C4473B;  /* errors */

  /* ---- Type ---- */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* fluid type scale */
  --text-hero:   clamp(2.75rem, 7.2vw, 5.5rem);
  --text-h2:     clamp(2rem, 4.5vw, 3.25rem);
  --text-h3:     clamp(1.25rem, 2.2vw, 1.6rem);
  --text-body:   1.0625rem;
  --text-small:  0.875rem;
  --text-mono:   0.75rem;

  /* ---- Space ---- */
  --space-section: clamp(5rem, 12vw, 9rem);
  --container: min(92vw, 88rem);
  --container-wide: min(96vw, 100rem);
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --header-height: 5.75rem;

  /* ---- Radii ---- */
  --radius-s:  0.5rem;
  --radius-m:  1rem;
  --radius-l:  1.5rem;
  --radius-pill: 999px;

  /* ---- Shadows (warm-tinted, soft) ---- */
  --shadow-s: 0 2px 8px rgba(38, 34, 31, 0.05);
  --shadow-m: 0 8px 24px rgba(38, 34, 31, 0.07);
  --shadow-l: 0 20px 48px rgba(38, 34, 31, 0.10);

  /* ---- Motion ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* signature pop */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   0.18s;
  --dur-med:    0.35s;
  --dur-slow:   0.7s;

  /* ---- Z ---- */
  --z-header: 100;
  --z-toast:  200;
  --z-confetti: 300;
}