/* ==========================================================================
   THE CHA — Design Tokens
   Source: extracted from https://www.thecha.cc (2026-09-10) + merchant brief.
   Light-first. The brand has no dark mode; see design-system.md §3.6.
   ========================================================================== */

:root {
  /* ---- 1. RAW PALETTE (from live site --vars, unchanged) ---------------- */
  --cha-white:   #FDFCF8;  /* warm off-white — the page ground            */
  --cha-cream:   #F4F0D7;  /* primary tinted surface                      */
  --cha-off:     #EDE9CF;  /* deeper tint, section banding                */
  --cha-ink:     #383838;  /* near-black, all primary text                */
  --cha-mid:     #6A6560;  /* secondary text                              */
  --cha-light:   #A8A49E;  /* tertiary text, disabled                     */

  --cha-amber:   #F2B46B;
  --cha-yellow:  #FCDE70;
  --cha-mint:    #75C0A5;
  --cha-olive:   #5A7A4D;
  --cha-steel:   #3D7DA0;
  --cha-salmon:  #F37D7D;
  --cha-terra:   #B84F31;

  /* ---- 2. SEMANTIC SURFACES & TEXT -------------------------------------- */
  --surface:            var(--cha-white);
  --surface-tinted:     var(--cha-cream);
  --surface-sunken:     var(--cha-off);
  --surface-inverse:    var(--cha-ink);
  --surface-media:      var(--cha-ink);   /* behind video, prevents flash   */

  --text:               var(--cha-ink);
  --text-secondary:     var(--cha-mid);
  --text-tertiary:      var(--cha-light);
  --text-inverse:       var(--cha-white);
  --text-on-media:      var(--cha-white);

  --border:             rgba(56, 56, 56, .09);
  --border-strong:      rgba(56, 56, 56, .15);
  --border-inverse:     rgba(253, 252, 248, .22);

  /* ---- 3. THE CHA SYSTEM — FORMULA IDENTITY ----------------------------- *
   * PROPOSED mapping, needs merchant sign-off (design-system.md §4.2).
   * Rationale: Core = everyday//default warm; Trail = dry dirt & gravel;
   * Storm = wet weather. Each formula owns ONE accent, used sparingly.     */
  --core:        var(--cha-amber);
  --core-deep:   var(--cha-terra);
  --trail:       var(--cha-olive);
  --trail-deep:  #3F5636;
  --storm:       var(--cha-steel);
  --storm-deep:  #2A5670;

  /* ---- 4. FEEDBACK ------------------------------------------------------ */
  --positive:    var(--cha-mint);
  --warning:     var(--cha-amber);
  --critical:    var(--cha-terra);
  --highlight:   var(--cha-yellow);   /* marker/underline accent            */

  /* ---- 5. TYPEFACES ----------------------------------------------------- *
   * Three faces, no more. Lady Ice is the wordmark face and NOTHING else —
   * it ships on the live site as an inline base64 @font-face. Do not add
   * Bebas Neue or Space Mono; those are declared but never loaded.
   * See design-system.md §3.1.                                            */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Helvetica, Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
               monospace;
  --font-wordmark: 'Lady Ice', Georgia, 'Times New Roman', serif;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* ---- 6. TYPE SCALE (fluid, matches live site clamps) ------------------ */
  --t-display: clamp(4rem,   10vw,  10rem);   /* hero wordmark only        */
  --t-h1:      clamp(2.5rem, 5.5vw, 5.5rem);
  --t-h2:      clamp(2rem,   4vw,   3.6rem);
  --t-h3:      clamp(1.8rem, 3.2vw, 2.8rem);
  --t-h4:      clamp(1.3rem, 2.5vw, 2rem);
  --t-lead:    clamp(1.1rem, 2vw,   1.4rem);
  --t-body:    1rem;
  --t-small:   0.88rem;
  --t-micro:   0.82rem;
  --t-label:   0.58rem;                        /* mono eyebrow/label       */

  --lh-tight:  0.95;   /* display & h1                                     */
  --lh-snug:   1.1;    /* h2–h4                                            */
  --lh-normal: 1.5;    /* body                                             */
  --lh-loose:  1.65;   /* long-form paragraphs                             */

  --track-display: -0.02em;
  --track-tight:   -0.01em;
  --track-normal:  0;
  --track-wide:    0.04em;
  --track-label:   0.24em;   /* uppercase mono eyebrows                    */

  /* ---- 7. SPACING (8px base) -------------------------------------------- */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4:  1rem;
  --s-5:  1.5rem;   --s-6:  2rem;     --s-7:  3rem;     --s-8:  4rem;
  --s-9:  6rem;     --s-10: 8rem;     --s-11: 12rem;

  /* Vertical rhythm between full-bleed narrative sections */
  --section-y:       clamp(4rem, 10vh, 9rem);
  --section-y-tight: clamp(2.5rem, 6vh, 5rem);

  /* ---- 8. LAYOUT -------------------------------------------------------- */
  --container:      1280px;
  --container-text: 62ch;    /* max measure for body copy                  */
  --gutter:         clamp(1rem, 4vw, 3rem);
  --header-h:       64px;

  /* ---- 9. RADIUS -------------------------------------------------------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   16px;
  --r-pill: 60px;   /* the signature CHA button shape                      */
  --r-full: 50%;

  /* ---- 10. MOTION ------------------------------------------------------- *
   * The site's single easing curve. Reuse it everywhere — the "elegant
   * transitions" the merchant asked for come from consistency, not variety. */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);   /* reveals, long travel     */

  --d-instant: 0.15s;
  --d-fast:    0.2s;
  --d-base:    0.25s;
  --d-slow:    0.35s;
  --d-slower:  0.6s;
  --d-reveal:  0.9s;   /* scroll-in section reveals                        */

  /* ---- 11. ELEVATION ---------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(56, 56, 56, .06);
  --shadow-md: 0 4px 16px rgba(56, 56, 56, .08);
  --shadow-lg: 0 12px 40px rgba(56, 56, 56, .12);

  /* Scrim for text over media — never place text on bare video */
  --scrim-bottom: linear-gradient(to top,
                    rgba(56,56,56,.72) 0%,
                    rgba(56,56,56,.35) 38%,
                    rgba(56,56,56,0) 72%);
  --scrim-full:   rgba(56, 56, 56, .38);

  /* ---- 12. Z-INDEX ------------------------------------------------------ */
  --z-base: 0;  --z-media: 1;  --z-overlay: 2;  --z-content: 3;
  --z-header: 50;  --z-drawer: 80;  --z-modal: 100;
}

/* ---- 13. MOTION SAFETY — required, not optional ------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Autoplaying background video must be pausable/static — see §6.1 */
}