/* =====================================================================
   DESIGN TOKENS  —  the single source of truth for the whole template.
   Re-skin an entire client site by editing only the values in here.
   ===================================================================== */

:root {
  /* ---- Brand palette ------------------------------------------------ */
  --color-red:        #ec1d2b;  /* brighter primary red */
  --color-red-dark:   #c2121e;  /* hover / pressed */
  --color-black:      #141414;  /* soft black */
  --color-grey:       #2b2b2b;  /* hard grey */
  --color-grey-soft:  #f2f2f2;  /* light section background */
  --color-white:      #ffffff;

  /* ---- Semantic tokens (use these in components, not raw colors) ---- */
  --bg:               var(--color-white);
  --text:             var(--color-black);
  --accent:           var(--color-red);
  --accent-hover:     var(--color-red-dark);

  /* ---- Typography --------------------------------------------------- */
  /* Drop the licensed font files into assets/fonts/ and they take over
     automatically (see base.css @font-face). Fallbacks keep it sharp. */
  --font-heading: "Helvetica Now Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Adobe Garamond Pro", "Garamond", "EB Garamond", Georgia, serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Fluid type scale (clamp = responsive without breakpoints) */
  --fs-display: clamp(2.75rem, 7vw, 6rem);
  --fs-h2:      clamp(2rem, 4.5vw, 3.5rem);
  --fs-lead:    clamp(1.1rem, 1.6vw, 1.4rem);
  --fs-body:    1.0625rem;
  --fs-eyebrow: 0.8rem;

  /* ---- Spacing & layout -------------------------------------------- */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  --container:     1200px;
  --gutter:        clamp(1.25rem, 5vw, 4rem);
  --header-height: 80px;
  --radius:        4px;

  /* ---- Motion ------------------------------------------------------- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --transition:  300ms var(--ease);
}

/* =====================================================================
   HEADER THEMES
   header.js sets data-theme="light" | "dark" on <header> as you scroll.
   "light"  = header sits on a DARK background → light (white) header.
   "dark"   = header sits on a LIGHT background → dark (black) header.
   ===================================================================== */

.site-header[data-theme="light"] {
  --header-text:        var(--color-white);
  --header-text-hover:  var(--color-red);
  --logo-mark-color:    var(--color-red);
  --logo-wordmark:      var(--color-white);
}

.site-header[data-theme="dark"] {
  --header-text:        var(--color-black);
  --header-text-hover:  var(--color-red);
  --logo-mark-color:    var(--color-red);
  --logo-wordmark:      var(--color-black);
}