/*
 * tokens.css -- Music with Max design tokens
 * Drop-in from design_prd.md Appendix (the design source of truth). Verbatim
 * :root token set + the prefers-reduced-motion reset. Do not edit values here
 * without updating design_prd.md first -- this file mirrors the PRD.
 */

:root {
  /* ---- Core palette ---- */
  --ink:        #0E0D0B;
  --ink-2:      #17150F;
  --ink-3:      #221F18;
  --bone:       #F3E7CE;
  --bone-dim:   #CDC2AB;
  --teal:       #4FA89E;
  --teal-deep:  #2F6F69;
  --ember:      #E8743B;
  --ember-deep: #C9551F;
  --sand:       #E1AC80;

  /* ---- Loud tier (rationed) ---- */
  --loud-yellow: #FFD408;
  --loud-green:  #05FF00;
  --loud-blue:   #000AFF;

  /* ---- Functional ---- */
  --paper:      #F3E7CE;
  --paper-ink:  #1B1812;
  --success:    #4FA89E;
  --error:      #E8743B;
  --focus:      #7FD0C6;

  /* ---- Type ---- */
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-ui:      'Sora', sans-serif;
  --font-body:    'Merriweather Sans', sans-serif;
  --font-accent:  'Fraunces', serif; /* optional */

  --fs-hero:    clamp(3.5rem, 9vw, 8rem);
  --fs-h1:      clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:    clamp(1.125rem, 1.6vw, 1.4rem);
  --fs-body:    clamp(1rem, 1.2vw, 1.125rem);
  --fs-eyebrow: 0.8125rem;
  --fs-caption: 0.8125rem;

  /* ---- Space (8px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --section-y: clamp(64px, 12vh, 160px);

  /* ---- Shape ---- */
  --radius:       14px;
  --radius-pill:  999px;
  --radius-media: 8px;
  --hairline:     1px solid var(--ink-3);

  /* ---- Motion ---- */
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 380ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}