/* =============================================================================
   HAFI DESIGN TOKENS
   -----------------------------------------------------------------------------
   Single source of truth for colors, type, spacing and motion.
   Everything in style.css and /js reads from these — never hard-code values.
   Colors and fonts are taken from the live Hafi 2.0 drafts (Sept 2026).
   Spacing, radius and motion values are starting points; adjust freely.
   ========================================================================== */

:root {
  /* Color ------------------------------------------------------------------ */
  --color-ink:        #13201A;  /* main text */
  --color-green:      #2A4134;  /* headings, body copy */
  --color-ink-soft:   #56635B;  /* secondary text (passes AA on paper) */
  --color-paper:      #F2EDE0;  /* page background */
  --color-paper-alt:  #E8E1CF;  /* alternate section background */
  --color-accent:     #ED1C25;  /* "Work with Us" button, highlights */
  --color-accent-ink: #FFFFFF;  /* text on accent */
  --color-blue-deep:  #2E4F86;  /* deep watercolor blue */
  --color-line:       #D6CDB8;  /* borders, dividers */

  /* Typography ------------------------------------------------------------- */
  --font-body:    walshie, sans-serif;
  --font-display: flaire-it, Optima, "Palatino Linotype", Palatino, serif;

  /* Fluid type scale: grows smoothly between phone and desktop widths */
  --text-sm:   clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
  --text-base: clamp(1rem,     0.96rem + 0.2vw,  1.125rem);
  --text-lg:   clamp(1.25rem,  1.15rem + 0.5vw,  1.5rem);
  --text-xl:   clamp(1.6rem,   1.4rem + 1vw,     2.25rem);
  --text-2xl:  clamp(2.2rem,   1.8rem + 2vw,     3.5rem);
  --text-3xl:  clamp(3rem,     2.3rem + 3.5vw,   5.5rem);

  --leading-tight: 1.1;
  --leading-body:  1.6;

  /* Spacing ---------------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  clamp(2rem, 1.5rem + 2vw, 3rem);
  --space-xl:  clamp(3rem, 2rem + 4vw, 6rem);
  --space-2xl: clamp(4rem, 2.5rem + 6vw, 9rem);

  /* Shape ------------------------------------------------------------------ */
  --radius-sm:   4px;
  --radius-md:   12px;
  --radius-pill: 999px;

  /* Motion (used by CSS transitions and read by GSAP modules) -------------- */
  --duration-fast: 0.2s;
  --duration-base: 0.6s;
  --duration-slow: 1.2s;
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-distance: 2rem; /* how far elements travel when they fade in */

  /* Accessibility "Bring it into focus" (css/focus-card.css, js/focus-card.js)
     Three cards: start (blurry, fails) -> mid (sharpening) -> end (crisp).
     Each card's ratio and label are calculated from its bg + text pair, so
     keep the END pair above 7 : 1 if you want it to say AAA.
     Override any of these on one page from Cornerstone (see CLAUDE.md). */
  --focus-bg-start:        #E9E2D0;
  --focus-text-start:      #D4CCB9;   /* about 1.2 : 1, fails */
  --focus-btn-start:       #E1D9C6;
  --focus-btn-text-start:  var(--focus-text-start);
  --focus-blur-start:      6px;
  --focus-texture-start:   0.5;       /* watercolor strength, 0 to 1 */

  --focus-bg-mid:          #DCE3EE;
  --focus-text-mid:        #6E7C8B;   /* about 3.3 : 1, large text only */
  --focus-btn-mid:         #EEF1F6;
  --focus-btn-text-mid:    var(--focus-text-mid);
  --focus-blur-mid:        1.5px;
  --focus-texture-mid:     0.35;

  --focus-bg-end:          var(--color-blue-deep);
  --focus-text-end:        #FFFFFF;   /* about 8.2 : 1, AAA */
  --focus-btn-end:         #FFFFFF;
  --focus-btn-text-end:    var(--color-ink);
  --focus-blur-end:        0px;
  --focus-texture-end:     0.2;

  --focus-status-fail:     #A2372E;   /* "Fails" label color */
  --focus-pin-length:      160%;      /* how long the section holds while scrolling */
  --focus-ring:            var(--color-accent);

  /* Accessibility "See it. Read it. Hear it." (css/try-it.css, js/try-it.js) */
  --try-glare-strong:      rgba(255, 255, 255, 0.85);  /* sunlight glare, brightest */
  --try-glare-soft:        rgba(255, 255, 255, 0.35);  /* sunlight glare, middle */
  --try-zoom:              2;                          /* "Zoom to 200%" text multiplier */
  --try-autoplay-delay:    1.2s;  /* how long Before shows before flipping to After */
}

/* Visitors who ask for less motion get near-instant changes and no travel */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01s;
    --duration-base: 0.01s;
    --duration-slow: 0.01s;
    --reveal-distance: 0;
  }
}