/* THE EIGHT THEMES, in one place.
 *
 * WHY THIS FILE EXISTS. The base token block (:root plus
 * html[data-theme="light"]) used to be hand-kept in THREE places:
 * appts-shell.css, and byte-for-byte inline copies inside companion.html
 * and companion-stage1.html, because those two carry their own chrome.
 * la-threshold.html (the sign-in door) turned out to carry a FOURTH copy,
 * already a half-step out of sync (its --hero-glass was .62, everywhere
 * else .58) before a single new theme was added. Eight themes instead of
 * two makes that kind of silent drift far more likely, not less, so this
 * file is now the one place the values live. Every page that needs the
 * tokens links or imports THIS file; none of them write a canvas/raise/ink
 * value of their own again.
 *
 * :root and html[data-theme="light"] below are UNCHANGED from what they
 * always were (dusk and dawn, the two themes already shipped), so every
 * page that has never heard of a "mood" -- every concept/study page under
 * this directory that only ever set data-theme="light"/"dark" -- keeps
 * working exactly as before. Nothing about the family mechanism moved.
 *
 * The eight NAMED themes layer on top via a data-mood attribute:
 *   LIGHT  dawn (= today's light theme) / daylight / clarity / quiet
 *   DARK   dusk (= today's dark theme)  / noir / steady / hush
 *
 * Each rule below is written as ONE declaration block matched by TWO
 * selectors:
 *   html[data-mood="x"]                the real page, set by nx-theme.js
 *   .acct-theme-stage[data-mood="x"]   the live preview swatch in the
 *                                      profile settings picker (account.js)
 * so the picker's preview can show any of the eight on a small stage
 * WITHOUT touching the real page's theme, using the exact same values,
 * defined once. A bare [data-mood] selector on its own cannot be used for
 * the real page: html[data-theme="light"] already matches the same
 * element (the same specificity, (0,1,1)), and a bare attribute selector
 * is lower specificity ((0,1,0)) and would silently lose that tie. Every
 * rule below is html-qualified for exactly that reason.
 *
 * Every block restates the brand colours (--secondary, --teal, --gold,
 * --system-error, --cyan, --primary-container) and the hero glass
 * (--hero-glass/--hero-hair) even though they never change: that is
 * deliberate, the same choice the approved theme study
 * (th-index.html) made, "so any one block can be lifted whole into a real
 * rollout later without hunting for what it silently inherited from a
 * neighbour." These values are LIFTED VERBATIM from that signed-off study
 * and from the existing :root / html[data-theme="light"] blocks. They are
 * not re-derived or re-tuned here.
 */

:root{
  --primary-container:#1F2A44;
  --secondary:#B52555; --secondary-soft:#E0568A;
  --cyan:#0077C8; --cyan-soft:#4FB0EC;
  --teal:#00A499; --teal-soft:#4FD1C7;
  --gold:#B98A2F; --amber:#94610A; --system-error:#B42318;

  --canvas:#080C15;
  --raise:rgba(255,255,255,.055);
  --raise-2:rgba(255,255,255,.085);
  --hair:rgba(255,255,255,.11);
  --hair-2:rgba(255,255,255,.19);
  --ink:#F3F5F9;
  --ink-2:rgba(243,245,249,.7);
  --ink-3:rgba(243,245,249,.45);

  --glass:rgba(24,31,48,.62);
  --glass-hi:rgba(255,255,255,.15);
  /* Glass that sits ON a photograph. Constant across themes, because the
     photo is dark in both and the type on it is always white. */
  --hero-glass:rgba(16,23,40,.58);
  --hero-hair:rgba(255,255,255,.22);
  --blur:saturate(180%) blur(26px);

  --shadow:0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 26px 64px rgba(0,0,0,.6);

  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --gutter:32px; --section-gap:56px; --page-max:1240px;
  --ease:cubic-bezier(.2,0,0,1);
  --spring:cubic-bezier(.32,.72,0,1);
  --bounce:cubic-bezier(.34,1.4,.55,1);
  --display:'Be Vietnam Pro','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
html[data-theme="light"]{
  --canvas:#F4F6F9;
  --raise:#FFFFFF; --raise-2:#EDEFF4;
  --hair:#D8DDE6; --hair-2:#C2CAD8;
  --ink:#111827; --ink-2:rgba(17,24,39,.7); --ink-3:rgba(17,24,39,.46);
  --glass:rgba(255,255,255,.74); --glass-hi:rgba(255,255,255,.95);
  --hero-glass:rgba(16,23,40,.58); --hero-hair:rgba(255,255,255,.22);
  --shadow:0 4px 14px rgba(31,42,68,.08);
  --shadow-lg:0 22px 54px rgba(31,42,68,.16);
}

/* ---- BIG SCREENS. Unchanged, moved here so it is not duplicated either. */
@media (min-width:1600px){:root{--page-max:1440px;--gutter:40px}}
@media (min-width:1920px){:root{--page-max:1600px;--gutter:48px}}

/* =========================================================================
   THE EIGHT NAMED MOODS
   ========================================================================= */

/* ---- LIGHT: DAWN -- today's light theme, named so it reads as the
   familiar default rather than a ninth unlabelled option. Identical to
   html[data-theme="light"] above; restated so the preview stage (which
   cannot match html[data-theme]) can render it too. ---- */
html[data-mood="dawn"], .acct-theme-stage[data-mood="dawn"]{
  --primary-container:#1F2A44;
  --secondary:#B52555; --secondary-soft:#E0568A;
  --cyan:#0077C8; --cyan-soft:#4FB0EC;
  --teal:#00A499; --teal-soft:#4FD1C7;
  --gold:#B98A2F; --amber:#94610A; --system-error:#B42318;
  --canvas:#F4F6F9;
  --raise:#FFFFFF; --raise-2:#EDEFF4;
  --hair:#D8DDE6; --hair-2:#C2CAD8;
  --ink:#111827; --ink-2:rgba(17,24,39,.7); --ink-3:rgba(17,24,39,.46);
  --glass:rgba(255,255,255,.74); --glass-hi:rgba(255,255,255,.95);
  --hero-glass:rgba(16,23,40,.58); --hero-hair:rgba(255,255,255,.22);
  --shadow:0 4px 14px rgba(31,42,68,.08); --shadow-lg:0 22px 54px rgba(31,42,68,.16);
}

/* ---- LIGHT: DAYLIGHT -- bright, cool morning white. Lifted from
   th-index.html .th-daylight. ---- */
html[data-mood="daylight"], .acct-theme-stage[data-mood="daylight"]{
  --primary-container:#1F2A44;
  --secondary:#B52555; --secondary-soft:#E0568A;
  --cyan:#0077C8; --cyan-soft:#4FB0EC;
  --teal:#00A499; --teal-soft:#4FD1C7;
  --gold:#B98A2F; --amber:#94610A; --system-error:#B42318;
  --canvas:#F5F8FC;
  --raise:#FFFFFF; --raise-2:#EAF0F7;
  --hair:#D7E1EC; --hair-2:#C0CEDD;
  --ink:#101826; --ink-2:rgba(16,24,38,.7); --ink-3:rgba(16,24,38,.46);
  --glass:rgba(255,255,255,.74); --glass-hi:rgba(255,255,255,.95);
  --hero-glass:rgba(16,23,40,.58); --hero-hair:rgba(255,255,255,.22);
  --shadow:0 4px 14px rgba(16,44,80,.10); --shadow-lg:0 22px 54px rgba(16,44,80,.18);
}

/* ---- LIGHT: CLARITY -- high contrast, for low vision or a bright room.
   Lifted from th-index.html .th-clarity. ---- */
html[data-mood="clarity"], .acct-theme-stage[data-mood="clarity"]{
  --primary-container:#1F2A44;
  --secondary:#B52555; --secondary-soft:#E0568A;
  --cyan:#0077C8; --cyan-soft:#4FB0EC;
  --teal:#00A499; --teal-soft:#4FD1C7;
  --gold:#B98A2F; --amber:#94610A; --system-error:#B42318;
  --canvas:#FFFFFF;
  --raise:#F7F8FA; --raise-2:#ECEEF2;
  --hair:#748196; --hair-2:#55617A;
  --ink:#000000; --ink-2:rgba(0,0,0,.82); --ink-3:rgba(0,0,0,.62);
  --glass:rgba(255,255,255,.92); --glass-hi:rgba(255,255,255,1);
  --hero-glass:rgba(16,23,40,.58); --hero-hair:rgba(255,255,255,.22);
  --shadow:0 4px 14px rgba(0,0,0,.18); --shadow-lg:0 22px 54px rgba(0,0,0,.28);
}

/* ---- LIGHT: QUIET -- low stimulation, colour pulled right back.
   Lifted from th-index.html .th-quiet. ---- */
html[data-mood="quiet"], .acct-theme-stage[data-mood="quiet"]{
  --primary-container:#1F2A44;
  --secondary:#B52555; --secondary-soft:#E0568A;
  --cyan:#0077C8; --cyan-soft:#4FB0EC;
  --teal:#00A499; --teal-soft:#4FD1C7;
  --gold:#B98A2F; --amber:#94610A; --system-error:#B42318;
  --canvas:#F1EFEA;
  --raise:#FBFAF7; --raise-2:#E7E4DC;
  --hair:#D9D5C9; --hair-2:#C7C2B3;
  --ink:#3A372F; --ink-2:rgba(58,55,47,.72); --ink-3:rgba(58,55,47,.48);
  --glass:rgba(251,250,247,.78); --glass-hi:rgba(255,255,255,.95);
  --hero-glass:rgba(16,23,40,.58); --hero-hair:rgba(255,255,255,.22);
  --shadow:0 4px 14px rgba(40,36,24,.08); --shadow-lg:0 20px 48px rgba(40,36,24,.14);
}

/* ---- DARK: DUSK -- today's dark theme, named for the same reason Dawn
   is: it is the familiar default, not a ninth unlabelled option.
   Identical to :root above; restated so the preview stage can render it. ---- */
html[data-mood="dusk"], .acct-theme-stage[data-mood="dusk"]{
  --primary-container:#1F2A44;
  --secondary:#B52555; --secondary-soft:#E0568A;
  --cyan:#0077C8; --cyan-soft:#4FB0EC;
  --teal:#00A499; --teal-soft:#4FD1C7;
  --gold:#B98A2F; --amber:#94610A; --system-error:#B42318;
  --canvas:#080C15;
  --raise:rgba(255,255,255,.055); --raise-2:rgba(255,255,255,.085);
  --hair:rgba(255,255,255,.11); --hair-2:rgba(255,255,255,.19);
  --ink:#F3F5F9; --ink-2:rgba(243,245,249,.7); --ink-3:rgba(243,245,249,.45);
  --glass:rgba(24,31,48,.62); --glass-hi:rgba(255,255,255,.15);
  --hero-glass:rgba(16,23,40,.58); --hero-hair:rgba(255,255,255,.22);
  --shadow:0 10px 30px rgba(0,0,0,.4); --shadow-lg:0 26px 64px rgba(0,0,0,.6);
}

/* ---- DARK: NOIR -- true black, for OLED and a fully dark room.
   Lifted from th-index.html .th-noir. ---- */
html[data-mood="noir"], .acct-theme-stage[data-mood="noir"]{
  --primary-container:#1F2A44;
  --secondary:#B52555; --secondary-soft:#E0568A;
  --cyan:#0077C8; --cyan-soft:#4FB0EC;
  --teal:#00A499; --teal-soft:#4FD1C7;
  --gold:#B98A2F; --amber:#94610A; --system-error:#B42318;
  --canvas:#000000;
  --raise:rgba(255,255,255,.07); --raise-2:rgba(255,255,255,.11);
  --hair:rgba(255,255,255,.14); --hair-2:rgba(255,255,255,.22);
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.72); --ink-3:rgba(255,255,255,.46);
  --glass:rgba(10,10,10,.68); --glass-hi:rgba(255,255,255,.16);
  --hero-glass:rgba(16,23,40,.58); --hero-hair:rgba(255,255,255,.22);
  --shadow:0 10px 30px rgba(0,0,0,.6); --shadow-lg:0 26px 64px rgba(0,0,0,.8);
}

/* ---- DARK: STEADY -- high contrast, for low vision at night. Warm
   charcoal, not Dusk's navy or Noir's neutral black. Lifted from
   th-index.html .th-steady. ---- */
html[data-mood="steady"], .acct-theme-stage[data-mood="steady"]{
  --primary-container:#1F2A44;
  --secondary:#B52555; --secondary-soft:#E0568A;
  --cyan:#0077C8; --cyan-soft:#4FB0EC;
  --teal:#00A499; --teal-soft:#4FD1C7;
  --gold:#B98A2F; --amber:#94610A; --system-error:#B42318;
  --canvas:#121110;
  --raise:rgba(255,255,255,.09); --raise-2:rgba(255,255,255,.13);
  --hair:rgba(255,255,255,.22); --hair-2:rgba(255,255,255,.32);
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.82); --ink-3:rgba(255,255,255,.64);
  --glass:rgba(24,22,20,.7); --glass-hi:rgba(255,255,255,.2);
  --hero-glass:rgba(16,23,40,.58); --hero-hair:rgba(255,255,255,.22);
  --shadow:0 10px 30px rgba(0,0,0,.5); --shadow-lg:0 26px 64px rgba(0,0,0,.7);
}

/* ---- DARK: HUSH -- low stimulation, colour pulled right back, a deep
   muted plum-charcoal rather than Dusk's blue or Steady's warm grey.
   Lifted from th-index.html .th-hush. ---- */
html[data-mood="hush"], .acct-theme-stage[data-mood="hush"]{
  --primary-container:#1F2A44;
  --secondary:#B52555; --secondary-soft:#E0568A;
  --cyan:#0077C8; --cyan-soft:#4FB0EC;
  --teal:#00A499; --teal-soft:#4FD1C7;
  --gold:#B98A2F; --amber:#94610A; --system-error:#B42318;
  --canvas:#14131C;
  --raise:rgba(255,255,255,.045); --raise-2:rgba(255,255,255,.07);
  --hair:rgba(255,255,255,.09); --hair-2:rgba(255,255,255,.15);
  --ink:#E9E6EC; --ink-2:rgba(233,230,236,.66); --ink-3:rgba(233,230,236,.42);
  --glass:rgba(26,24,34,.6); --glass-hi:rgba(255,255,255,.12);
  --hero-glass:rgba(16,23,40,.58); --hero-hair:rgba(255,255,255,.22);
  --shadow:0 10px 26px rgba(0,0,0,.35); --shadow-lg:0 22px 54px rgba(0,0,0,.5);
}