/* ================================================================
   LIGHT: /her on the Cacao palette.
   Keeps the page as built (the twelve-week block, the performance
   framing, Bricolage and Space Mono) and swaps only the colours to
   Cacao, the house mode locked 24 August 2026.
   Loaded only by her.html, after reel.css.

   Every component already paints from the tokens, so remapping the
   tokens repaints the page. The rules below are only for the places
   that hard-code a dark value.

   Cacao keeps two roles separate and so does this file: chocolate is
   the structural dark that carries blocks, rose does the pointing.
   Rose on paper measures 3.58:1, which carries display type and UI
   but fails at label sizes, so --acid-text is the deeper step and
   anything small uses that instead.
================================================================ */

html[data-theme="her"]{
  --bg-light:1;                     /* read by js/reel.js for the helix */

  --void:#F5EBE6;                   /* Cacao bg, blush paper */
  --void-2:#EFE0D9;
  --panel:#FCF6F3;                  /* Cacao surface */
  --panel-2:#F9F1ED;

  --bone:#2E1C17;                   /* Cacao text, dark chocolate */
  --bone-2:#6E574E;
  --dim:#79665A;                    /* Cacao text-3 is #A08A80 at 2.78:1, too pale for 11px */

  --acid:#C25A74;                   /* Cacao accent, rose. Display and UI only */
  --acid-text:#8F3F53;              /* the deeper step, for label sizes */
  --acid-deep:#964257;              /* ramp 700 */
  --on-acid:#FFF8F5;
  --chocolate:#4A3128;              /* structural dark, never the accent */

  --iris-a:#DE6E86;                 /* accent 2 */
  --iris-b:#C25A74;
  --iris-c:#964257;

  --line:#E3D1C8;                   /* Cacao divider */
  --line-2:#EDE0D9;                 /* Cacao divider soft */
  --glow:rgba(194,90,116,.16);
  --tint:rgba(194,90,116,.06);
}

/* grain reads as dirt on paper, lighten it and multiply instead */
html[data-theme="her"] body::before{opacity:.03;mix-blend-mode:multiply}

/* the helix is decoration here, not the main event */
html[data-theme="her"] #bg{opacity:.4}
@media(max-width:900px){html[data-theme="her"] #bg{opacity:.22}}
html[data-theme="her"] .veil{
  background:radial-gradient(120% 80% at 50% 50%,transparent 34%,rgba(245,235,230,.82) 80%)}

/* ---- the hard-coded dark values ---- */
/* rose at 3.58:1 carries a UI surface but not a 14px bold label on top of
   it, so the button takes ramp step 600 while rose keeps the pointing */
html[data-theme="her"] .btn-acid{background:#A4485D;color:var(--on-acid)}
html[data-theme="her"] .btn-acid:hover{box-shadow:0 14px 40px -10px rgba(194,90,116,.45)}
html[data-theme="her"] .btn-line:hover{background:rgba(46,28,23,.04)}
html[data-theme="her"] ::selection{background:var(--acid);color:var(--on-acid)}
html[data-theme="her"] nav.scrolled{background:rgba(245,235,230,.82)}
html[data-theme="her"] .mq .pill{background:rgba(255,255,255,.75)}
html[data-theme="her"] .pc,
html[data-theme="her"] .dr{background:rgba(255,255,255,.72)}
html[data-theme="her"] .dock{background:linear-gradient(transparent,rgba(245,235,230,.94) 38%)}
html[data-theme="her"] .rail b{background:rgba(46,28,23,.2)}
html[data-theme="her"] .rail b.on{background:var(--acid)}
html[data-theme="her"] .no{opacity:.75}
/* --dim on paper is too pale for 12px uppercase to pass contrast */
html[data-theme="her"] .more summary{color:var(--bone-2)}
html[data-theme="her"] .more summary:hover{color:var(--bone)}
html[data-theme="her"] .person,
html[data-theme="her"] .tier{background:linear-gradient(180deg,#fff,var(--panel-2))}

/* the hero wash sits over paper now */
html[data-theme="her"] .hero::after{
  background:linear-gradient(90deg,var(--void) 16%,rgba(245,235,230,.55) 42%,transparent 72%)}
@media(max-width:900px){
  html[data-theme="her"] .hero::after{
    background:linear-gradient(180deg,rgba(245,235,230,.7),rgba(245,235,230,.5))}
}

/* ================================================================
   THE BLOCK: twelve weeks, drawn like a training plan.
   Says "programme" faster than a paragraph can.
================================================================ */
.blk{margin-top:38px;max-width:620px}
.blk-bars{display:flex;gap:5px;align-items:flex-end;height:56px}
.blk-bars i{flex:1;border-radius:3px 3px 0 0;background:rgba(46,28,23,.1);transition:height .5s cubic-bezier(.2,.8,.2,1),background .3s}
.blk-bars i.on{background:var(--acid)}
.blk-bars i.key{background:var(--iris-c)}
.blk-marks{display:flex;justify-content:space-between;margin-top:10px;
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.blk-marks b{color:var(--bone);font-weight:400}
@media(max-width:560px){.blk-bars{height:44px}.blk-marks{font-size:9px;letter-spacing:.08em}}

/* a metric row, Whoop-style: number, label, movement */
.mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.mrow .m{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 24px}
.mrow .m .k{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.mrow .m .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em;line-height:1}
.mrow .m .v small{font-size:.4em;font-weight:600;color:var(--bone-2);letter-spacing:-.01em}
.mrow .m p{font-size:13.5px;color:var(--bone-2);line-height:1.45;margin-top:10px}
@media(max-width:760px){.mrow{grid-template-columns:1fr}}

/* Rose is 3.58:1 on paper. Fine for display and UI, short of AA at label
   sizes, so every small accent use takes the deeper --acid-text step.
   (--acid-text) small-text block */
html[data-theme="her"] .trio .t .k,
html[data-theme="her"] .more .body a,
html[data-theme="her"] .cite,
html[data-theme="her"] .wl-done{color:var(--acid-text)}
html[data-theme="her"] .blk-bars i.key{background:var(--chocolate)}

/* the in-range band inherits lime from the dark theme, retint it rose */
html[data-theme="her"]{--range-fill:rgba(194,90,116,.20)}