/* ============================================================================
   MAMBO — TOKENS.  v3.0.0
   The only file in the mambo layer allowed to contain a literal colour.

   Values come from DESIGN-TOKENS.json and from the LIGHT / DARK palette objects
   in "EGW Landing - Redesign.dc.html", which agree with each other. README.md's
   colour table is stale and is NOT the source.

   THREE RULES, each learned the hard way:

   1. CUSTOM PROPERTIES ARE CASE-SENSITIVE. It is --accsoft, --tintink, --sandink
      (all lower) but --accHover, --accLight, --tint2ink (camel). There is no
      pattern; it has to be copied. A previous build wrote --accSoft in seven
      places and every one of them silently computed to transparent.
      --accSoft is kept below as an alias so any surviving consumer still works.

   2. NEVER write `--x: y !important` on a custom property. It wins against the
      [data-theme="dark"] block too, which freezes the page in one theme.

   3. Both theme blocks carry the IDENTICAL key set. That is what lets every
      component be written once with no dark-mode branch. If you add a token,
      add it to both blocks in the same commit.
   ============================================================================ */

/* html[data-theme="light"] rides along because ux-upgrade.css declares its whole
   SUPERSEDED palette at that (0,1,1) selector, which outranks a bare :root. Today
   the light values happen to coincide, but "happens to" is not a contract — this
   compound keeps mambo authoritative in both themes for as long as that sheet
   loads. Same move on the dark block below, where the values actually differ. */
:root,
html[data-theme="light"] {

  /* ---- actions ---------------------------------------------------------- */
  --acc:            #A85526;   /* burnt orange — every primary action        */
  --accHover:       #8E4620;
  --accBrand:       #CF753E;   /* brand mark only, never a control           */
  --accsoft:        #FAEDE3;   /* accent tint fill                           */
  --accSoft:        var(--accsoft);  /* deprecated alias — see rule 1        */
  --accLight:       #F3D9C5;   /* accent tint border                         */
  --onacc:          #FFFFFF;
  --focus-on-acc:   #FFFFFF;   /* the accent ring is invisible on an accent
                                  fill, so accent surfaces ring in this      */

  /* ---- second voice (informational chrome, never action) ---------------- */
  --teal:           #2A4750;
  --tealsoft:       #E8EFF1;
  --highlight:      #08C7D2;
  --secondary:      #101940;
  --secondaryHover: #1B2757;

  /* ---- surfaces — warm, not neutral grey -------------------------------- */
  --pg:             #FFFFFF;
  --card:           #FFFFFF;
  --stage:          #FAF7F2;   /* inset surface, wells, table heads          */
  --soft:           #F2ECE3;   /* hover wash                                 */

  /* ---- text ------------------------------------------------------------- */
  --ink:            #26231F;
  --body:           #4F4A44;
  --muted:          #736C64;
  --faint:          #B3ABA1;

  /* ---- borders ---------------------------------------------------------- */
  --line:           #E4DDD2;
  --line2:          #F0EAE1;   /* hairline / inner border                    */

  /* ---- tint pairs ------------------------------------------------------- */
  --tint:           #E8EFF1;
  --tintink:        #2A4750;
  --tint2:          #FAEDE3;   /* icon tiles                                 */
  --tint2ink:       #A85526;
  --sand:           #FDF6E4;
  --sandink:        #342200;
  --kicker:         #A85526;
  --link:           #01568E;
  --linkHover:      #2F5DA7;
  --btn2:           #FFFFFF;
  --btn2Hover:      #FAF7F2;

  /* ---- closing region --------------------------------------------------- */
  --band:           #FDF6E4;
  --bandline:       #EFDFBB;
  --bandGlow:       rgba(241,209,131,.42);
  --bandPool:       rgba(207,117,62,.13);
  --onband:         #26231F;
  --bandbtn:        #A85526;
  --bandbtnink:     #FFFFFF;
  --bandink:        38,35,31;  /* raw triplet — composed with rgba() at use   */

  /* ---- status ----------------------------------------------------------- */
  --live:           #F1412A;   /* live badge and errors ONLY, never decorative */
  --success:        #4F8F12;
  --warning:        #A85526;
  --danger:         #F1412A;
  --info:           #00588D;

  /* ---- elevation ---------------------------------------------------------
     Four page steps plus the overlay wash — and --sub, the subscribe card's
     bespoke three-layer lift, deeper than anything else on the page because the
     card floats between two surfaces. --sub is deliberately NOT re-toned in the
     dark blocks: the design hardcodes this literal, so it stays warm-brown in
     every theme. */
  --sc:             0 1px 2px rgba(66,48,32,.05), 0 1px 3px rgba(66,48,32,.07);
  --sh:             0 4px 6px -1px rgba(66,48,32,.08), 0 16px 30px -10px rgba(66,48,32,.2);
  --sub:            0 1px 3px rgba(66,48,32,.07), 0 10px 20px -8px rgba(66,48,32,.14), 0 32px 54px -22px rgba(66,48,32,.24);
  --pop:            0 2px 6px rgba(0,0,0,.05), 0 26px 60px -26px rgba(0,0,0,.42);
  --navFloat:       0 1px 2px rgba(66,48,32,.06), 0 10px 24px -12px rgba(66,48,32,.26), 0 30px 60px -30px rgba(66,48,32,.34);
  --scrim:          rgba(10,9,8,.42);

  /* Theme-invariant, like the photo chrome below: the design hardcodes the
     scripture orb's wash, so it never re-tones in dark. */
  --orbWash:        rgba(168,85,38,.07);

  /* ---- the fixed backdrop field ----------------------------------------- */
  --mesh:           rgba(207,117,62,.06);
  --poolA:          rgba(207,117,62,.09);
  --poolB:          rgba(42,71,80,.06);
  --grain-o:        .05;

  /* ---- chrome that sits ON a photograph ---------------------------------
     These are IDENTICAL in both themes, on purpose. A status chip or a play
     button floats over the same photograph whichever theme is active, so it
     must key off the image, not the page — theme-aware values would put dark
     text on a dark photo the moment someone switched to light. They are tokens
     rather than literals so that intent is stated once instead of inferred from
     a scattering of rgba() calls. */
  --onphoto:        #FFFFFF;
  --onphoto-soft:   rgba(255,255,255,.78);
  /* The live dot ON a photo. Not --live: #F1412A was tuned for paper grounds and
     dies on an image, so the design lifts it to #FF5A50 here and only here. */
  --onphoto-live:   #FF5A50;
  /* The video letterbox and its on-video text (Watch page). Near-black in BOTH
     themes — a player well is a room with the lights off, not a surface. */
  --screen:         #131211;
  --onscreen:       #F4F1EC;

  /* Chat speaker names. Six tones, hashed per name so a busy room stays
     readable; they re-tone in dark like every other pair. */
  --chatname-0:     #A85526;
  --chatname-1:     #1F6E58;
  --chatname-2:     #2F5AA8;
  --chatname-3:     #8A4A8F;
  --chatname-4:     #9A5A1F;
  --chatname-5:     #3F6B2E;

  --photo-scrim-a:  rgba(8,8,10,.34);
  --photo-scrim-b:  rgba(8,8,10,.04);
  --photo-scrim-c:  rgba(8,8,10,.74);
  --photo-chip:     rgba(10,10,12,.58);
  --photo-badge:    rgba(10,10,12,.72);
  --photo-edge:     rgba(255,255,255,.2);
  --photo-glass:    rgba(12,12,14,.46);
  --photo-glass-on: rgba(12,12,14,.7);
  --photo-glass-edge: rgba(255,255,255,.34);

  /* ---- typography ------------------------------------------------------- */
  --font:           Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:     Newsreader, Georgia, serif;   /* scripture + pull-quotes only */
  --font-mono:      ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- radii — they climb with size ------------------------------------- */
  --r-xs:           5px;
  --r-sm:           7px;
  --r-8:            8px;    /* nav item — the page's most-used radius        */
  --r-md:           9px;
  --r-ctl:          10px;
  --r-field:        11px;
  --r-12:           12px;   /* hero buttons                                  */
  --r-card:         14px;
  --r-15:           15px;   /* the floating nav capsule and the drawer       */
  --r-panel:        16px;
  --r-dialog:       20px;
  --r-pill:         999px;

  /* ---- motion — three easings, and only three --------------------------- */
  --ease:           cubic-bezier(.16,.84,.44,1);   /* reveals, fills, pans   */
  --spring:         cubic-bezier(.34,1.56,.64,1);  /* presses, pops, lifts   */
  --ease-header:    cubic-bezier(.22,1,.36,1);     /* the header reveal      */

  --dur-instant:    .14s;
  --dur-micro:      .16s;
  --dur:            .18s;   /* the default: every hover                      */
  --dur-pop:        .2s;
  --dur-enter:      .22s;   /* toggles and switches                          */
  --dur-sheet:      .28s;
  --dur-drawer:     .32s;
  --dur-crossfade:  .3s;
  --dur-slow:       .4s;
  --dur-reveal:     .45s;
  --dur-header:     .46s;

  /* ---- layout ----------------------------------------------------------- */
  --shell:          1240px;  /* content column                               */
  --shell-wide:     1680px;  /* Watch and Setup                              */
  --prose:          820px;
  --gutter:         clamp(20px, 4vw, 40px);
  --header-h:       68px;
  --header-h-float: 58px;
  --header-blur:    18px;
  --scrim-blur:     7px;

  color-scheme: light;
}

/* ============================================================================
   DARK — warm charcoal, NOT navy. An earlier navy build read as a second,
   unrelated brand. The ground is stepped from #161514 and the accent is lifted
   to #E28B52 so it still carries against it.

   Identical key set to :root above. Verified by the token-parity gate.
   ============================================================================ */

/* html[...] and not a bare attribute selector: ux-upgrade.css:109 declares the
   OLD dark palette at html[data-theme="dark"] = (0,1,1), which silently beat this
   block's former (0,1,0) — the entire dark theme rendered the superseded set
   (#D4763C accent, navy tints, opaque hairlines). Tie the specificity; win on
   order. */
html[data-theme="dark"] {

  --acc:            #E28B52;
  --accHover:       #F0A171;
  --accBrand:       #CF753E;
  --accsoft:        rgba(226,139,82,.14);
  --accSoft:        var(--accsoft);
  --accLight:       rgba(226,139,82,.24);
  --onacc:          #2A1405;
  --focus-on-acc:   #2A1405;

  --teal:           #3FD3DC;
  --tealsoft:       rgba(8,199,210,.12);
  --highlight:      #08C7D2;
  --secondary:      #F7F5F2;
  --secondaryHover: #FFFFFF;

  --pg:             #161514;
  --card:           #1F1E1C;
  --stage:          #1B1A18;
  --soft:           #2A2825;

  --ink:            #F7F5F2;
  --body:           #C7C1B8;
  --muted:          #989188;
  --faint:          #6B655D;

  --line:           rgba(247,245,242,.13);
  --line2:          rgba(247,245,242,.06);

  --tint:           rgba(8,199,210,.13);
  --tintink:        #3FD3DC;
  --tint2:          rgba(226,139,82,.15);
  --tint2ink:       #E28B52;
  --sand:           rgba(241,209,131,.12);
  --sandink:        #F1D183;
  --kicker:         #E28B52;
  --link:           #6FD0D8;
  --linkHover:      #9BE2E8;
  --btn2:           #2A2825;
  --btn2Hover:      #35322E;

  --band:           #221D15;
  --bandline:       rgba(241,209,131,.16);
  --bandGlow:       rgba(241,209,131,.10);
  --bandPool:       rgba(226,139,82,.10);
  --onband:         #F7F5F2;
  --bandbtn:        #E28B52;
  --bandbtnink:     #2A1405;
  --bandink:        247,245,242;

  --live:           #F1412A;
  --success:        #8FD44A;
  --warning:        #F1D183;
  --danger:         #F1412A;
  --info:           #5AA8DC;

  --sc:             0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.6);
  --sh:             0 2px 8px rgba(0,0,0,.5), 0 30px 56px -24px rgba(0,0,0,.75);
  --pop:            0 2px 6px rgba(0,0,0,.35), 0 26px 60px -26px rgba(0,0,0,.72);
  --navFloat:       0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6), 0 34px 64px -32px rgba(0,0,0,.7);
  --scrim:          rgba(0,0,0,.58);

  --mesh:           rgba(226,139,82,.06);
  --poolA:          rgba(226,139,82,.08);
  --poolB:          rgba(8,199,210,.05);
  --grain-o:        .085;

  /* Identical to light by design — see the note in :root. */
  --onphoto:        #FFFFFF;
  --onphoto-soft:   rgba(255,255,255,.78);
  /* The live dot ON a photo. Not --live: #F1412A was tuned for paper grounds and
     dies on an image, so the design lifts it to #FF5A50 here and only here. */
  --onphoto-live:   #FF5A50;
  /* The video letterbox and its on-video text (Watch page). Near-black in BOTH
     themes — a player well is a room with the lights off, not a surface. */
  --screen:         #0D0C0B;
  --onscreen:       #F4F1EC;
  --chatname-0:     #E8A472;
  --chatname-1:     #69C6AC;
  --chatname-2:     #8FB1EE;
  --chatname-3:     #D3A0D8;
  --chatname-4:     #DDA96A;
  --chatname-5:     #98CE7E;
  --photo-scrim-a:  rgba(8,8,10,.34);
  --photo-scrim-b:  rgba(8,8,10,.04);
  --photo-scrim-c:  rgba(8,8,10,.74);
  --photo-chip:     rgba(10,10,12,.58);
  --photo-badge:    rgba(10,10,12,.72);
  --photo-edge:     rgba(255,255,255,.2);
  --photo-glass:    rgba(12,12,14,.46);
  --photo-glass-on: rgba(12,12,14,.7);
  --photo-glass-edge: rgba(255,255,255,.34);

  --font:           Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:     Newsreader, Georgia, serif;
  --font-mono:      ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-xs:           5px;
  --r-sm:           7px;
  --r-8:            8px;
  --r-md:           9px;
  --r-ctl:          10px;
  --r-field:        11px;
  --r-12:           12px;
  --r-card:         14px;
  --r-15:           15px;
  --r-panel:        16px;
  --r-dialog:       20px;
  --r-pill:         999px;

  --ease:           cubic-bezier(.16,.84,.44,1);
  --spring:         cubic-bezier(.34,1.56,.64,1);
  --ease-header:    cubic-bezier(.22,1,.36,1);

  --dur-instant:    .14s;
  --dur-micro:      .16s;
  --dur:            .18s;
  --dur-pop:        .2s;
  --dur-enter:      .22s;
  --dur-sheet:      .28s;
  --dur-drawer:     .32s;
  --dur-crossfade:  .3s;
  --dur-slow:       .4s;
  --dur-reveal:     .45s;
  --dur-header:     .46s;

  --shell:          1240px;
  --shell-wide:     1680px;
  --prose:          820px;
  --gutter:         clamp(20px, 4vw, 40px);
  --header-h:       68px;
  --header-h-float: 58px;
  --header-blur:    18px;
  --scrim-blur:     7px;

  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   No-JS / pre-hydration fallback.

   EGWMode writes data-theme inline in <head> before wp_head(), so in practice
   this never fires. It exists for the case where that script is stripped or
   blocked: without it the page would render light on a dark-preferring device.

   Scoped :not([data-theme]) rather than :not([data-theme="light"]) so it can
   never fight the explicit attribute in either direction.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --screen:         #0D0C0B;
    --onscreen:       #F4F1EC;
  --chatname-0:     #E8A472;
  --chatname-1:     #69C6AC;
  --chatname-2:     #8FB1EE;
  --chatname-3:     #D3A0D8;
  --chatname-4:     #DDA96A;
  --chatname-5:     #98CE7E;
    --acc:            #E28B52;
    --accHover:       #F0A171;
    --accsoft:        rgba(226,139,82,.14);
    --accSoft:        rgba(226,139,82,.14);
    --accLight:       rgba(226,139,82,.24);
    --onacc:          #2A1405;
    --focus-on-acc:   #2A1405;

    --teal:           #3FD3DC;
    --tealsoft:       rgba(8,199,210,.12);
    --secondary:      #F7F5F2;
    --secondaryHover: #FFFFFF;

    --pg:             #161514;
    --card:           #1F1E1C;
    --stage:          #1B1A18;
    --soft:           #2A2825;

    --ink:            #F7F5F2;
    --body:           #C7C1B8;
    --muted:          #989188;
    --faint:          #6B655D;

    --line:           rgba(247,245,242,.13);
    --line2:          rgba(247,245,242,.06);

    --tint:           rgba(8,199,210,.13);
    --tintink:        #3FD3DC;
    --tint2:          rgba(226,139,82,.15);
    --tint2ink:       #E28B52;
    --sand:           rgba(241,209,131,.12);
    --sandink:        #F1D183;
    --kicker:         #E28B52;
    --link:           #6FD0D8;
    --linkHover:      #9BE2E8;
    --btn2:           #2A2825;
    --btn2Hover:      #35322E;

    --band:           #221D15;
    --bandline:       rgba(241,209,131,.16);
    --bandGlow:       rgba(241,209,131,.10);
    --bandPool:       rgba(226,139,82,.10);
    --onband:         #F7F5F2;
    --bandbtn:        #E28B52;
    --bandbtnink:     #2A1405;
    --bandink:        247,245,242;

    --success:        #8FD44A;
    --warning:        #F1D183;
    --info:           #5AA8DC;

    --sc:             0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.6);
    --sh:             0 2px 8px rgba(0,0,0,.5), 0 30px 56px -24px rgba(0,0,0,.75);
    --pop:            0 2px 6px rgba(0,0,0,.35), 0 26px 60px -26px rgba(0,0,0,.72);
    --navFloat:       0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6), 0 34px 64px -32px rgba(0,0,0,.7);
    --scrim:          rgba(0,0,0,.58);

    --mesh:           rgba(226,139,82,.06);
    --poolA:          rgba(226,139,82,.08);
    --poolB:          rgba(8,199,210,.05);
    --grain-o:        .085;

    color-scheme: dark;
  }
}