/* ==========================================================================
   TOKENS — design variables
   --------------------------------------------------------------------------
   Every colour, font size and spacing value for the site is defined here.
   Rebranding only needs changes to this file: the other stylesheets always
   reference these variables instead of hard-coding values.
   ========================================================================== */

:root {

  /* --- Colours ---------------------------------------------------------- */
  --c-base:        #fdfcfb;   /* Page background */
  --c-warm:        #f7eee5;   /* Warm section background */
  --c-surface:     #ffffff;   /* Card white */
  --c-border:      #ede8e1;   /* Hairline borders */
  --c-accent:      #70150e;   /* Brand dark red */
  --c-accent-dark: #58100a;   /* Dark red, pressed state */
  --c-heading:     #0f172a;   /* Headings, near-black navy */
  --c-body:        #4b4340;   /* Body copy */
  --c-muted:       #8a817c;   /* Secondary text */

  /* --- Typeface ---------------------------------------------------------
     System sans-serif: no network request, and it matches what is live now.
     To switch to something like Inter, change this line and add @font-face. */
  --font-sans: Arial, Helvetica, "Helvetica Neue", system-ui, sans-serif;

  /* --- Font sizes (clamp scales them smoothly with the viewport, so there
     is no need for a pile of media queries) ------------------------------ */
  --fs-h1:      clamp(2.25rem, 1.30rem + 4.20vw, 4.00rem);  /* 36 → 64px */
  --fs-h2:      clamp(1.75rem, 1.18rem + 2.52vw, 3.00rem);  /* 28 → 48px */
  --fs-h3:      clamp(1.25rem, 1.02rem + 1.01vw, 1.75rem);  /* 20 → 28px */
  --fs-h4:      1.1875rem;                                  /* 19px */
  --fs-lead:    clamp(1.0625rem, 0.98rem + 0.38vw, 1.3125rem); /* 17 → 21px */
  --fs-body:    clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);   /* 16 → 17px */
  --fs-small:   0.9375rem;                                  /* 15px */
  --fs-eyebrow: 0.875rem;                                   /* 14px */

  /* --- Layout -----------------------------------------------------------
     --w-content  maximum width of a section
     --w-narrow   narrower content such as the FAQ
     --gutter     safe margin on the left and right */
  --w-content: min(1840px, 95vw);
  --w-narrow:  1040px;
  --gutter:    clamp(20px, 3.2vw, 72px);

  /* Vertical breathing room above and below a section */
  --section-y: clamp(80px, 8vw, 168px);

  /* Horizontal gap for image/text pairs and card grids */
  --col-gap:   clamp(3px, 4.5vw, 96px);

  /* --- Radii and shadows ------------------------------------------------ */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 36px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.10);

  /* --- Navigation ------------------------------------------------------- */
  --nav-h:     83px;
  --nav-gap:   clamp(18px, 2.2vw, 34px);
  --nav-logo-h: 50px;

  /* --- Motion -----------------------------------------------------------
     Scroll-in animations are handled by AOS (assets/vendor/aos). These are
     only for short interactions such as buttons and navigation. */
  --t-fast: 140ms ease;
  --t-base: 240ms ease;
  --t-slow: 600ms cubic-bezier(0.22, 1, 0.36, 1);

  /* FAQ expand/collapse. js/site.js reads both values, so editing them here
     keeps the script and the icon animation in sync. */
  --t-panel:   420ms;
  --ease-panel: cubic-bezier(0.22, 1, 0.36, 1);
}