/* Cookie brand tokens — single source of truth for the website.
   Mirrors `shared/brand.py` and `ios/Cookie/Cookie/Views/CookieBrand.swift`.
   The landing page and privacy policy reference these via CSS variables;
   don't hard-code colors or font names anywhere else.
*/

:root {
  /* ----- Colors ----- */
  --ink:    #000000;          /* page bg, hero, sections */
  --ink-2:  #0a0a0a;          /* card bg, hover */
  --paper:  #ffffff;          /* wordmark */
  --cream:  #F5F0E6;          /* tagline + body type */
  --cream-soft: rgba(245, 240, 230, 0.72);
  --amber:  #FFC882;          /* bloom accent (animation only) */
  --hairline: rgba(245, 240, 230, 0.08);

  /* ----- Typography ----- */
  --font-wordmark:
    "Avenir Next", "Avenir Next LT Pro", Avenir,
    -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;

  --font-body:
    -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;

  /* Wordmark weight matches the app icon (Heavy) and the endcap
     render. Web doesn't have an exact match for Avenir Next Heavy,
     so 800 is the closest browser-resolvable value. */
  --weight-wordmark: 800;
  --kerning-wordmark: -0.01em;

  --weight-tagline: 500;
  --weight-body: 400;

  /* ----- Spacing ----- */
  --pad-hero-y: 128px;
  --pad-section-y: 96px;
  --gap-wordmark-tagline: 26px;
  --gap-tagline-pitch: 56px;
}

@media (max-width: 540px) {
  :root {
    --pad-hero-y: 80px;
    --pad-section-y: 72px;
  }
}