/* ============================================================
   Lumae — STAGED THEME VARIANTS for the 2026-09 client review.
   Not brand. Not permanent. Three candidate palettes the client
   compares on one preview link via ?theme=lift | noir | charcoal.
   Each block redefines ONLY the ground/surface tokens; every colour
   pair below was measured before it went in (see docs/client-notes/
   2026-09-10/theme-variants.md). Delete this file and js/theme.js
   once a decision is made and the winner is folded into :root.
   ============================================================ */

/* ---- A. LIFT — same Lumae Black page, surfaces raised one step,
   antique-gold hairlines, more ivory. pink-text recalibrated to the new
   --elev (4.83:1). Ivory 15.84 → 11.97 across the four surfaces. */
html[data-theme="lift"]{
  --noir:#1C1917;
  --charcoal:#252120;
  --elev:#2E2926;
  --d-raised:#1C1917;
  --line:rgba(185,149,89,0.22);        /* gold hairline instead of ivory */
  --line-strong:rgba(185,149,89,0.38);
  --d-line:rgba(185,149,89,0.24);
  --dim:rgba(242,233,223,0.82);
  --d-dim:rgba(242,233,223,0.82);
  --faint:rgba(242,233,223,0.66);
  --pink-text:#C28689;
  --pink-glow:#CC8F92;                 /* 5.1:1 on the lifted --elev */
  --ice:#211D1B;
}

/* ---- B. NOIR — Natalie's: page ground to near-pure black, surfaces
   follow one step down so the elevation rhythm survives. Every pair
   measures higher than today (ivory 16.86 on the ground). */
html[data-theme="noir"]{
  --ink:#070606;
  --noir:#100E0D;
  --charcoal:#181514;
  --elev:#201C1A;
  --d-ground:#070606;
  --d-raised:#100E0D;
  --l-text:#070606;
  --ice:#131110;
}

/* ---- C. CHARCOAL — the doctor's "a little dark?": page ground lifted
   to warm charcoal, surfaces stepped above it. pink-text recalibrated
   (4.88:1 on --elev). NOTE: raw Raspberry (--pink) drops to 2.7:1 on
   the top surface here, so if this one wins it needs the full
   realignment procedure in lumae-brand-ops, not just this block. */
html[data-theme="charcoal"]{
  --ink:#1F1C1A;
  --noir:#272322;
  --charcoal:#2F2A28;
  --elev:#38322F;
  --d-ground:#1F1C1A;
  --d-raised:#272322;
  --l-text:#1F1C1A;
  --pink-text:#CD9294;
  --pink-glow:#D69B9E;                 /* 5.0:1 on the charcoal --elev */
  --dim:rgba(242,233,223,0.80);
  --d-dim:rgba(242,233,223,0.80);
  --ice:#2A2624;
}

/* Raw-literal grounds that no token reaches (nav scrim, founding gradient
   end-stop). Retuned per variant so the header and the founding band sit on
   the same ground as the page instead of showing the old black through. */
html[data-theme="noir"] .nav{background:linear-gradient(to bottom, rgba(7,6,6,0.94) 0%, rgba(7,6,6,0.6) 70%, rgba(7,6,6,0))}
html[data-theme="noir"] .founding{background:linear-gradient(140deg,var(--purple) 0%,#070606 100%)}
html[data-theme="charcoal"] .nav{background:linear-gradient(to bottom, rgba(31,28,26,0.94) 0%, rgba(31,28,26,0.6) 70%, rgba(31,28,26,0))}
html[data-theme="charcoal"] .founding{background:linear-gradient(140deg,var(--purple) 0%,#1F1C1A 100%)}
html[data-theme="charcoal"] .theme-switch{background:rgba(31,28,26,0.94)}

/* ---- The comparison switcher. Only rendered when a ?theme= has been
   used in this browser (js/theme.js), so an ordinary visitor never sees
   it. Bottom-left, above the consent banner's z-index, 44px targets. */
.theme-switch{position:fixed;left:16px;bottom:16px;z-index:10000;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(17,16,15,0.92);border:1px solid var(--gold);box-shadow:0 12px 40px -12px rgba(0,0,0,0.8);backdrop-filter:blur(8px)}
.theme-switch button{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ivory);font:600 0.66rem/1 'Montserrat',system-ui,sans-serif;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer}
.theme-switch button[aria-pressed="true"]{background:var(--purple);color:var(--ivory)}
.theme-switch button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:640px){.theme-switch{left:8px;right:8px;bottom:8px;justify-content:space-between}.theme-switch button{padding:0 10px;flex:1}}