/*
  Design tokens for Next Level Productions (site domain: nextleveldjbozeman.com).
  Aesthetic (V4): "signal" -- electronic-music-coded, not luxury-editorial.
  V1-V3 used brass as the primary accent with the client's logo colors held
  back as a minor secondary touch; V4 flips that hierarchy on purpose (client
  feedback: he doesn't relate to the restrained-luxury read, wants something
  that feels unmistakably his). Teal/violet -- sampled from his actual logo
  (assets/logo-mark.jpg) -- is now the primary, felt color of the site.
  Brass steps back to a secondary warm counterpoint. Ink base shifted from a
  warm/olive near-black to a neutral-cool one so it stops fighting the new
  primary (this was the literal "green and gold don't work together" problem).
*/

:root {
  /* Color -- dark throughout, neutral-cool ink (not warm/olive -- that was
     tuned for brass-as-primary and clashed once teal/violet led instead) */
  --color-ink:            #101214;
  --color-ink-2:           #181B1F;
  --color-text-on-ink:    #F2F1ED;
  --color-text-muted:     #9B9CA3;
  --color-line-on-ink:    rgba(242, 241, 237, 0.14);
  --color-overlay:        rgba(16, 18, 20, 0.72);

  /* Primary accent -- sampled from the client's real logo, a teal -> violet
     gradient. This is the site's dominant, felt color now. --color-accent /
     -light stay the generic names every component already references, so
     this is the one place the hierarchy flip actually happens. */
  --color-accent:         #9D71F7;  /* violet -- brightened from the logo's raw sample so text/buttons clear WCAG AA against ink */
  --color-accent-light:   #14B8A6;  /* teal -- hover/lift shift, not just a lighter shade */
  --color-accent-gradient: linear-gradient(120deg, #14B8A6 0%, #9D71F7 100%);

  /* Secondary/cool accent -- gunmetal. Brass/gold was primary through V1-V3;
     replaced entirely per client preference (Mike doesn't want gold) with a
     cool steel-grey used deliberately, not by default. Verified contrast:
     6.27:1 / 9.29:1 against ink. */
  --color-gunmetal:        #8A97A0;
  --color-gunmetal-light:  #ADB8C0;

  /* Typography (V5) -- Cabinet Grotesk (headings) + Satoshi (body), chosen
     by Chad/Mike over Geist and General Sans after a 3-way comparison.
     Replaces Instrument Serif + Manrope -- a deliberate client-directed
     exception to "typography preserved every version" (see CLAUDE.md). */
  --font-display: 'Cabinet Grotesk', ui-sans-serif, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Satoshi', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-hero:    clamp(2.75rem, 8vw, 6rem);
  --text-h2:      clamp(2rem, 5vw, 3.25rem);
  --text-h3:      clamp(1.25rem, 2.5vw, 1.75rem);
  --text-lead:    clamp(1.125rem, 1.8vw, 1.375rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-label:   0.75rem;
  --text-numeral: clamp(2.25rem, 5vw, 3.5rem);

  /* Spacing scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 144px;

  /* Layout */
  --max-width-content: 720px;
  --max-width-wide:    1240px;
  --nav-height:        84px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-base: 0.6s;
}