/* Design tokens — scoped to .marketing so they don't bleed into the app */
.marketing {
  /* Palette — underground record-label dark */
  --night:    #0c0c0c;
  --dark-bg:  #111111;
  --elevated: #161616;
  --card:     #1c1c1c;
  --card-2:   #181818;
  --gold:     #d4a843;
  --gold-light: #f0c86a;
  --text:     #f0f0f0;
  --muted:    #888888;
  --border:   rgba(255, 255, 255, 0.09);

  /* Single accent gradient — gold only, used sparingly */
  --grad-sig: linear-gradient(135deg, #d4a843, #f0c86a);

  /* Keep for any scene / subtle use */
  --uv:      #5a45cc;
  --magenta: #cc3d72;
  --cyan:    #5ab4d4;

  /* Typography: defined in templates/partials/_fonts.html (single source of truth) */

  /* Type scale (fluid) */
  --text-xs:   clamp(0.70rem, 0.80vw, 0.80rem);
  --text-sm:   clamp(0.85rem, 1.00vw, 0.95rem);
  --text-base: clamp(0.95rem, 1.20vw, 1.05rem);
  --text-lg:   clamp(1.10rem, 1.50vw, 1.25rem);
  --text-xl:   clamp(1.30rem, 2.00vw, 1.60rem);
  --text-2xl:  clamp(1.60rem, 2.50vw, 2.20rem);
  --text-3xl:  clamp(2.00rem, 3.50vw, 3.00rem);
  --text-4xl:  clamp(2.80rem, 5.00vw, 4.50rem);
  --text-hero: clamp(3.20rem, 7.00vw, 7.00rem);

  /* Spacing */
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  2rem;
  --sp-lg:  4rem;
  --sp-xl:  7rem;
  --sp-2xl: 12rem;

  /* Radii */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* Easing */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Transitions */
  --dur-fast:   150ms;
  --dur-normal: 300ms;
  --dur-slow:   600ms;
}