/* ============================================================================
   Cut: the theme layer (v20)

   ONE source of truth for colour across every surface. Four themes:

     light   Paper   warm bone paper, oxblood ink        (the original register)
     noir    Noir    deep warm black, ember heat         (Apple Music / Spotify dark)
     crimson Red & White  bright white, crimson structure (the editorial register)
     auto    System  follows prefers-color-scheme        (light <-> noir)

   WHY THIS FILE EXISTS
   The pages used to hardcode paper colours (rgba(237,231,217,.58) and friends)
   directly in component rules. A theme that only swapped --paper left every one
   of those stranded, so dark mode rendered cream panels with cream text on a
   near-black page. Every surface colour now resolves through a token defined
   here, so a theme swap moves the whole room at once.

   ELEVATION RULE
   Light: raised surfaces get LIGHTER than the page (paper catches light).
   Dark:  raised surfaces get LIGHTER than the page too (screens emit light).
   Never signal elevation with a darker fill in either register.

   Load order matters: this file comes last, after the page's inline <style>
   and cut-motion.css, so its tokens win at equal specificity.
   ========================================================================== */

/* ---------------------------------------------------------------- LIGHT --- */
:root,
:root[data-theme="light"]{
  /* surfaces */
  --paper:#EDE7D9;
  --paper-2:#E6DFCF;
  --panel:#E6DFCF;
  --card:#F5F0E6;
  --card-me:#E9E1D2;
  --raised:rgba(245,240,230,.78);      /* floating glass: journey, trays, chips */
  --raised-solid:#F5F0E6;
  --chip:rgba(255,255,255,.55);
  --chip-hi:#FFFFFF;

  /* sticky glass */
  --bar:rgba(237,231,217,.72);         /* top bar + composer */
  --rail-bg:rgba(237,231,217,.58);
  --margin-bg:rgba(237,231,217,.55);
  --scrim-0:rgba(237,231,217,0);       /* sticky fade, transparent end */
  --scrim-1:rgba(237,231,217,.94);     /* sticky fade, opaque end */

  /* text */
  --ink:#1E1813;
  --ink-2:#5A5046;                     /* 5.9:1 on --panel */
  /* AUDIT.md called the old #938A7A a P0 and #7C7466 the fix at "4.6:1".
     Measured, #7C7466 is 3.75:1 on --paper and 3.48:1 on --panel, so the
     failure survived the fix. #665E52 is 5.18:1 on paper, 4.81:1 on panel:
     the first value that actually clears AA on every surface it lands on. */
  --ink-3:#665E52;

  /* structure */
  --line:#D9CFBD;
  --line-soft:#E6DDCD;

  /* accent */
  --accent:#8A1F24;                    /* the brand red */
  --accent-ink:#6F171B;                /* accent AS TEXT on a light surface */
  --accent-deep:#6F171B;
  --accent-hi:#9E262D;
  --accent-soft:rgba(138,31,36,.10);
  /* Ember doubles as a text accent (June's name, kickers). At #C4471F that
     read 4.33:1 on a card, just under AA; #AF3E19 clears it at 4.83:1 on
     paper while staying the same rust. */
  --ember:#AF3E19;
  --gold:#CAA15F;

  /* primary button (kept separate from --accent so dark can stay AA) */
  --btn-a:#9E262D; --btn-b:#8A1F24; --btn-c:#6F171B;
  --on-btn:#FFF7F0;
  --on-accent:#F6EFE1;                 /* text on a flat accent fill */

  /* chat */
  --bub-them:#F5F0E6;   --bub-them-bd:#E6DDCD;
  --bub-me-a:#EFE4D3;   --bub-me-b:#E7DCC8;  --bub-me-bd:#DDCEB6;

  /* misc */
  --sh:33,28,22;                       /* shadow rgb triple */
  --tint:33,28,22;                     /* subtle overlay tint (hover washes) */
  --knob:#FFFFFF;                      /* scrub handle */
  --eq-a:rgba(147,137,119,.85);        /* mini equaliser, idle */
  --eq-b:rgba(147,137,119,.45);
  --wave-a:#C4471F;                    /* waveform seek: played */
  --wave-b:#8A1F24;                    /* waveform seek: still to come */
  --track:#E6DDCD;                     /* empty scrub track */
  /* Text sitting ON a .dark marketing band. In light and noir that band is
     dark, so the type is cream; in crimson the band becomes blush, so the same
     type has to flip to ink. Without this, red-and-white showed cream copy on
     a near-white panel. */
  --on-dark:#ECE4D5;
  --on-dark-2:rgba(236,228,213,.82);
  --on-dark-3:rgba(236,228,213,.58);
  --on-dark-line:rgba(236,228,213,.16);
  --grain-blend:multiply;
  --grain-op:.5;
  --good:#3F7D61;
  --good-soft:rgba(63,125,97,.10);
  --good-line:rgba(63,125,97,.32);
  color-scheme:light;
}

/* ----------------------------------------------------------------- NOIR --- */
:root[data-theme="noir"]{
  --paper:#0D0A08;
  --paper-2:#141010;
  --panel:#211A15;
  --card:#191410;
  --card-me:#241C16;
  --raised:rgba(40,32,26,.86);
  --raised-solid:#241D18;
  --chip:rgba(255,255,255,.07);
  --chip-hi:rgba(255,255,255,.14);

  --bar:rgba(13,10,8,.74);
  --rail-bg:rgba(17,13,10,.72);
  --margin-bg:rgba(17,13,10,.66);
  --scrim-0:rgba(17,13,10,0);
  --scrim-1:rgba(17,13,10,.95);

  --ink:#F2EBDE;                       /* 16.4:1 on --paper */
  --ink-2:#BCB1A0;                     /* 8.6:1  */
  --ink-3:#968B7C;                     /* 5.4:1  */

  --line:#342C25;
  --line-soft:#261F1A;

  --accent:#E0584A;                    /* ember red, 5.9:1 on paper */
  --accent-ink:#F08A7B;                /* accent as text: 8.1:1 */
  --accent-deep:#A8382E;
  --accent-hi:#E86C5C;
  --accent-soft:rgba(224,88,74,.15);
  --ember:#E8A33F;                     /* gold heat */
  --gold:#E8B65E;

  --btn-a:#C4453A; --btn-b:#B4382F; --btn-c:#962C24;   /* white on these = 5.9:1 */
  --on-btn:#FFF3EE;
  --on-accent:#1B0E0B;                 /* dark ink on a flat ember fill */

  --bub-them:#221B16;   --bub-them-bd:#332A23;
  --bub-me-a:#3A2A22;   --bub-me-b:#31231C;  --bub-me-bd:rgba(224,88,74,.34);

  --sh:0,0,0;
  --tint:242,235,222;
  --knob:#F2EBDE;
  --eq-a:rgba(242,235,222,.55);
  --eq-b:rgba(242,235,222,.22);
  --wave-a:#E8A33F;
  --wave-b:#E0584A;
  --track:rgba(242,235,222,.14);
  --on-dark:#F2EBDE;
  --on-dark-2:rgba(242,235,222,.82);
  --on-dark-3:rgba(242,235,222,.58);
  --on-dark-line:rgba(242,235,222,.14);
  --grain-blend:overlay;
  --grain-op:.16;
  --good:#6FBF95;
  --good-soft:rgba(111,191,149,.12);
  --good-line:rgba(111,191,149,.34);
  color-scheme:dark;
}

/* -------------------------------------------------------- RED & WHITE --- */
/* The editorial register: paper white, crimson structure. Highest contrast
   of the three, and the one that photographs best in a deck. */
:root[data-theme="crimson"]{
  --paper:#FFFFFF;
  --paper-2:#FBF6F6;
  --panel:#F8EFEF;
  --card:#FFFFFF;
  --card-me:#FDF2F2;
  --raised:rgba(255,255,255,.86);
  --raised-solid:#FFFFFF;
  --chip:rgba(200,16,46,.05);
  --chip-hi:#FFFFFF;

  --bar:rgba(255,255,255,.78);
  --rail-bg:rgba(252,247,247,.72);
  --margin-bg:rgba(252,247,247,.66);
  --scrim-0:rgba(255,255,255,0);
  --scrim-1:rgba(255,255,255,.95);

  --ink:#160B0D;
  --ink-2:#54383C;
  --ink-3:#75565A;                     /* 5.2:1 on white */

  --line:#EBD6D9;
  --line-soft:#F5E7E9;

  --accent:#C8102E;                    /* 6.4:1 on white */
  --accent-ink:#A50C26;
  --accent-deep:#8E0A20;
  --accent-hi:#DA1B39;
  --accent-soft:rgba(200,16,46,.08);
  --ember:#C8102E;
  --gold:#B8860B;

  --btn-a:#DA1B39; --btn-b:#C8102E; --btn-c:#A50C26;
  --on-btn:#FFFFFF;
  --on-accent:#FFFFFF;

  --bub-them:#FFFFFF;   --bub-them-bd:#EFDDE0;
  --bub-me-a:#FDECEE;   --bub-me-b:#FBE1E5;  --bub-me-bd:#F3C9CF;

  --sh:60,10,20;
  --tint:60,10,20;
  --knob:#FFFFFF;
  --eq-a:rgba(200,16,46,.55);
  --eq-b:rgba(200,16,46,.22);
  --wave-a:#DA1B39;
  --wave-b:#C8102E;
  --track:#F2E2E4;
  --on-dark:#160B0D;
  --on-dark-2:#54383C;
  --on-dark-3:#75565A;
  --on-dark-line:#EBD6D9;
  --grain-blend:multiply;
  --grain-op:.22;
  --good:#1F7A4D;
  --good-soft:rgba(31,122,77,.09);
  --good-line:rgba(31,122,77,.30);
  color-scheme:light;
}

/* =====================================================================
   Cross-cutting corrections
   Things a token swap alone cannot carry: blend modes, decorative washes,
   and the marketing pages' light/dark band rhythm.
   ===================================================================== */

body{background:var(--paper);color:var(--ink)}

/* The grain multiplies on paper and overlays on black; multiply on a dark
   page just paints mud. */
.grain{mix-blend-mode:var(--grain-blend);opacity:var(--grain-op)}

/* --- marketing band rhythm ------------------------------------------------
   Marketing pages alternate .light and .dark sections. That reads as designed
   on paper. In noir both collapsed to near-identical near-blacks, so the page
   went flat and muddy. Here .dark becomes a genuinely ELEVATED band (lighter,
   warmer) instead of a fractionally darker one, keeping the rhythm intact. */
:root[data-theme="noir"] .light{background:var(--paper);color:var(--ink)}
:root[data-theme="noir"] .dark{background:var(--paper-2);color:var(--ink)}
:root[data-theme="noir"] .dark::before{opacity:.5}

:root[data-theme="crimson"] .light{background:var(--paper);color:var(--ink)}
:root[data-theme="crimson"] .dark{background:var(--panel);color:var(--on-dark)}
:root[data-theme="crimson"] .dark::before{opacity:.35}
/* A ghost button is a pale outline meant for a dark band. On the blush panel
   it needs the light-surface treatment or it vanishes. */
:root[data-theme="crimson"] .dark .btn-ghost{
  background:var(--chip);color:var(--ink);border-color:var(--line)}
:root[data-theme="crimson"] .dark .btn-ghost:hover{
  background:var(--accent-soft);border-color:var(--accent)}

/* Scrollbars follow the register. */
*{scrollbar-color:var(--line) transparent}
::-webkit-scrollbar-thumb{background:var(--line)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

::selection{background:var(--accent);color:var(--on-accent)}

/* Form controls inherit the register rather than the OS default. */
input,select,textarea{background:var(--card);color:var(--ink);border-color:var(--line)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}

/* =====================================================================
   The theme switcher
   A segmented control, not a mystery pill. Sits in the top bar on product
   surfaces ([data-theme-mount]) and falls back to a floating control on
   marketing pages.
   ===================================================================== */
.themeseg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);flex:none}
.themeseg button{appearance:none;border:0;background:transparent;cursor:pointer;
  width:28px;height:24px;border-radius:999px;display:grid;place-items:center;
  color:var(--ink-3);transition:background .2s ease,color .2s ease}
.themeseg button:hover{color:var(--ink)}
.themeseg button[aria-pressed="true"]{background:var(--card);color:var(--accent);
  box-shadow:0 1px 3px rgba(var(--sh),.18)}
.themeseg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.themeseg svg{display:block;width:14px;height:14px}

/* Marketing nav mount. Below 820px the nav collapses to a burger, so the
   control steps aside rather than crowding the CTA. */
.nav-theme{display:inline-flex;align-items:center}
@media (max-width:820px){ .nav-theme{display:none} }
/* ...and reappears inside the burger menu, where there is room for it. */
.mmenu-theme{margin-top:18px}
@media (min-width:821px){ .mmenu-theme{display:none} }

/* Floating fallback for pages with no mount point. */
#themeFab{position:fixed;right:16px;bottom:16px;z-index:250;
  background:var(--raised);border:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
  box-shadow:0 10px 30px -14px rgba(var(--sh),.5);padding:4px}
@media (max-width:680px){
  #themeFab{right:12px;bottom:12px}
}

@media (prefers-reduced-motion:reduce){
  .themeseg button{transition:none}
}