/* Color themes (wave 8, E6). Each person picks a palette and light, dark or "match my device" (Account, Appearance);
   the choice is saved on their own user row (PUT /api/me/prefs) and in this browser for the first paint (theme.js).
   The default palette is the LoonStack brand. Every palette has a light and a dark variant, and every text or accent
   pair the app draws meets WCAG AA 4.5:1 (tests/w8-themes.test.ts reads this file and checks each pair).
   Selectors are attributes, not :root, so a small preview card can carry its own palette too. They are written to beat
   app.css: light [data-palette] (0,1,0) after app.css :root; dark rules (0,2,0) after app.css's dark rules (0,2,0). */
:root{--brand-navy:#0A2131; --brand-sky:#499FCF; --brand-red:#DB352B}

/* LoonStack */
[data-palette="loonstack"]{--bg:#f3f6f9; --surface:#ffffff; --sunk:#e9eff4; --ink:#0a2131; --muted:#4b5f70; --line:#d6e0e8; --lake:#1b6a9c; --lake-ink:#ffffff; --lake-soft:#e2eff8; --eye:#c22d23; --eye-soft:#fdecea; --amber:#8a5300; --amber-soft:#fbf0dc; --good:#1f6b3a; --good-soft:#e3f2e8; --violet:#5146a8; --violet-soft:#ecebfa; color-scheme:light;}
@media (prefers-color-scheme:dark){[data-palette="loonstack"]:not([data-theme="light"]){--bg:#05121c; --surface:#0a2131; --sunk:#071a28; --ink:#e9f2f8; --muted:#9db3c4; --line:#1b3549; --lake:#499fcf; --lake-ink:#05121c; --lake-soft:#0d2638; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}}
[data-palette="loonstack"][data-theme="dark"]{--bg:#05121c; --surface:#0a2131; --sunk:#071a28; --ink:#e9f2f8; --muted:#9db3c4; --line:#1b3549; --lake:#499fcf; --lake-ink:#05121c; --lake-soft:#0d2638; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}

/* Lake */
[data-palette="lake"]{--bg:#f4f6f4; --surface:#ffffff; --sunk:#eef2f0; --ink:#12201f; --muted:#5b6a67; --line:#dfe5e2; --lake:#0d6b66; --lake-ink:#ffffff; --lake-soft:#e2f0ee; --eye:#b42318; --eye-soft:#fdecea; --amber:#8a5300; --amber-soft:#fbf0dc; --good:#1f6b3a; --good-soft:#e3f2e8; --violet:#5146a8; --violet-soft:#ecebfa; color-scheme:light;}
@media (prefers-color-scheme:dark){[data-palette="lake"]:not([data-theme="light"]){--bg:#0c1413; --surface:#13201f; --sunk:#0f1a19; --ink:#e4eeec; --muted:#93a5a1; --line:#23332f; --lake:#3db3a8; --lake-ink:#06201d; --lake-soft:#143330; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}}
[data-palette="lake"][data-theme="dark"]{--bg:#0c1413; --surface:#13201f; --sunk:#0f1a19; --ink:#e4eeec; --muted:#93a5a1; --line:#23332f; --lake:#3db3a8; --lake-ink:#06201d; --lake-soft:#143330; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}

/* Forest */
[data-palette="forest"]{--bg:#f4f6f1; --surface:#ffffff; --sunk:#edf1e8; --ink:#18221a; --muted:#56634f; --line:#dde4d6; --lake:#2f6b2a; --lake-ink:#ffffff; --lake-soft:#e6f1e2; --eye:#b42318; --eye-soft:#fdecea; --amber:#8a5300; --amber-soft:#fbf0dc; --good:#1f6b3a; --good-soft:#e3f2e8; --violet:#5146a8; --violet-soft:#ecebfa; color-scheme:light;}
@media (prefers-color-scheme:dark){[data-palette="forest"]:not([data-theme="light"]){--bg:#0d130d; --surface:#162016; --sunk:#111a11; --ink:#e6eee3; --muted:#9cad96; --line:#26342a; --lake:#7cc46f; --lake-ink:#0d1a0b; --lake-soft:#1b331a; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}}
[data-palette="forest"][data-theme="dark"]{--bg:#0d130d; --surface:#162016; --sunk:#111a11; --ink:#e6eee3; --muted:#9cad96; --line:#26342a; --lake:#7cc46f; --lake-ink:#0d1a0b; --lake-soft:#1b331a; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}

/* Slate */
[data-palette="slate"]{--bg:#f5f6f8; --surface:#ffffff; --sunk:#eef0f3; --ink:#151b26; --muted:#555f6e; --line:#dde1e7; --lake:#3d4f6b; --lake-ink:#ffffff; --lake-soft:#e6eaf1; --eye:#b42318; --eye-soft:#fdecea; --amber:#8a5300; --amber-soft:#fbf0dc; --good:#1f6b3a; --good-soft:#e3f2e8; --violet:#5146a8; --violet-soft:#ecebfa; color-scheme:light;}
@media (prefers-color-scheme:dark){[data-palette="slate"]:not([data-theme="light"]){--bg:#0e1117; --surface:#171b23; --sunk:#12151c; --ink:#e7eaf0; --muted:#a0a9b8; --line:#283040; --lake:#9fb3d6; --lake-ink:#0e1117; --lake-soft:#222c3d; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}}
[data-palette="slate"][data-theme="dark"]{--bg:#0e1117; --surface:#171b23; --sunk:#12151c; --ink:#e7eaf0; --muted:#a0a9b8; --line:#283040; --lake:#9fb3d6; --lake-ink:#0e1117; --lake-soft:#222c3d; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}

/* Plum */
[data-palette="plum"]{--bg:#f7f5f8; --surface:#ffffff; --sunk:#f1edf3; --ink:#221728; --muted:#64566c; --line:#e4dde8; --lake:#6b3a85; --lake-ink:#ffffff; --lake-soft:#f1e8f6; --eye:#b42318; --eye-soft:#fdecea; --amber:#8a5300; --amber-soft:#fbf0dc; --good:#1f6b3a; --good-soft:#e3f2e8; --violet:#5146a8; --violet-soft:#ecebfa; color-scheme:light;}
@media (prefers-color-scheme:dark){[data-palette="plum"]:not([data-theme="light"]){--bg:#130e16; --surface:#1d1622; --sunk:#17111b; --ink:#efe7f3; --muted:#b3a3bc; --line:#33283b; --lake:#d1a4ec; --lake-ink:#1a0f20; --lake-soft:#33223e; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}}
[data-palette="plum"][data-theme="dark"]{--bg:#130e16; --surface:#1d1622; --sunk:#17111b; --ink:#efe7f3; --muted:#b3a3bc; --line:#33283b; --lake:#d1a4ec; --lake-ink:#1a0f20; --lake-soft:#33223e; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}

/* Ember */
[data-palette="ember"]{--bg:#f8f5f2; --surface:#ffffff; --sunk:#f3eee9; --ink:#24180f; --muted:#665649; --line:#e8dfd6; --lake:#a2410f; --lake-ink:#ffffff; --lake-soft:#fbebe0; --eye:#b42318; --eye-soft:#fdecea; --amber:#8a5300; --amber-soft:#fbf0dc; --good:#1f6b3a; --good-soft:#e3f2e8; --violet:#5146a8; --violet-soft:#ecebfa; color-scheme:light;}
@media (prefers-color-scheme:dark){[data-palette="ember"]:not([data-theme="light"]){--bg:#150e09; --surface:#21170f; --sunk:#1a120b; --ink:#f4ebe3; --muted:#bba796; --line:#3a2a1d; --lake:#f39a5f; --lake-ink:#1d0f05; --lake-soft:#3e2414; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}}
[data-palette="ember"][data-theme="dark"]{--bg:#150e09; --surface:#21170f; --sunk:#1a120b; --ink:#f4ebe3; --muted:#bba796; --line:#3a2a1d; --lake:#f39a5f; --lake-ink:#1d0f05; --lake-soft:#3e2414; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}

/* Ocean */
[data-palette="ocean"]{--bg:#f3f6fa; --surface:#ffffff; --sunk:#ebf0f7; --ink:#0f1b2d; --muted:#4f5f75; --line:#d8e1ed; --lake:#1d4fb8; --lake-ink:#ffffff; --lake-soft:#e3ebfb; --eye:#b42318; --eye-soft:#fdecea; --amber:#8a5300; --amber-soft:#fbf0dc; --good:#1f6b3a; --good-soft:#e3f2e8; --violet:#5146a8; --violet-soft:#ecebfa; color-scheme:light;}
@media (prefers-color-scheme:dark){[data-palette="ocean"]:not([data-theme="light"]){--bg:#08101d; --surface:#101a2b; --sunk:#0b1423; --ink:#e6eefa; --muted:#9fb0c8; --line:#22314a; --lake:#7fa8f5; --lake-ink:#08101d; --lake-soft:#1b2c4d; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}}
[data-palette="ocean"][data-theme="dark"]{--bg:#08101d; --surface:#101a2b; --sunk:#0b1423; --ink:#e6eefa; --muted:#9fb0c8; --line:#22314a; --lake:#7fa8f5; --lake-ink:#08101d; --lake-soft:#1b2c4d; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}

/* Rose */
[data-palette="rose"]{--bg:#f9f5f6; --surface:#ffffff; --sunk:#f4edef; --ink:#2a141a; --muted:#6b5258; --line:#ecdde1; --lake:#a3224f; --lake-ink:#ffffff; --lake-soft:#fae6ed; --eye:#b42318; --eye-soft:#fdecea; --amber:#8a5300; --amber-soft:#fbf0dc; --good:#1f6b3a; --good-soft:#e3f2e8; --violet:#5146a8; --violet-soft:#ecebfa; color-scheme:light;}
@media (prefers-color-scheme:dark){[data-palette="rose"]:not([data-theme="light"]){--bg:#16090d; --surface:#221117; --sunk:#1b0d12; --ink:#f7e9ee; --muted:#c2a2ac; --line:#3d2229; --lake:#f68bb0; --lake-ink:#24070f; --lake-soft:#41192a; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}}
[data-palette="rose"][data-theme="dark"]{--bg:#16090d; --surface:#221117; --sunk:#1b0d12; --ink:#f7e9ee; --muted:#c2a2ac; --line:#3d2229; --lake:#f68bb0; --lake-ink:#24070f; --lake-soft:#41192a; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}

/* Sand */
[data-palette="sand"]{--bg:#f7f4ee; --surface:#fffdf9; --sunk:#f0ebe2; --ink:#231d14; --muted:#625849; --line:#e5ddd0; --lake:#7a5520; --lake-ink:#ffffff; --lake-soft:#f4eadb; --eye:#b42318; --eye-soft:#fdecea; --amber:#8a5300; --amber-soft:#fbf0dc; --good:#1f6b3a; --good-soft:#e3f2e8; --violet:#5146a8; --violet-soft:#ecebfa; color-scheme:light;}
@media (prefers-color-scheme:dark){[data-palette="sand"]:not([data-theme="light"]){--bg:#14110c; --surface:#1f1a13; --sunk:#19150f; --ink:#f2ebe0; --muted:#b8ab97; --line:#372e22; --lake:#e0b56f; --lake-ink:#1c1407; --lake-soft:#3a2e1c; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}}
[data-palette="sand"][data-theme="dark"]{--bg:#14110c; --surface:#1f1a13; --sunk:#19150f; --ink:#f2ebe0; --muted:#b8ab97; --line:#372e22; --lake:#e0b56f; --lake-ink:#1c1407; --lake-soft:#3a2e1c; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}

/* Graphite */
[data-palette="graphite"]{--bg:#f5f5f5; --surface:#ffffff; --sunk:#eeeeee; --ink:#111111; --muted:#525252; --line:#dcdcdc; --lake:#1f1f1f; --lake-ink:#ffffff; --lake-soft:#e9e9e9; --eye:#b42318; --eye-soft:#fdecea; --amber:#8a5300; --amber-soft:#fbf0dc; --good:#1f6b3a; --good-soft:#e3f2e8; --violet:#5146a8; --violet-soft:#ecebfa; color-scheme:light;}
@media (prefers-color-scheme:dark){[data-palette="graphite"]:not([data-theme="light"]){--bg:#0a0a0a; --surface:#161616; --sunk:#111111; --ink:#f2f2f2; --muted:#a8a8a8; --line:#2c2c2c; --lake:#f2f2f2; --lake-ink:#111111; --lake-soft:#2a2a2a; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}}
[data-palette="graphite"][data-theme="dark"]{--bg:#0a0a0a; --surface:#161616; --sunk:#111111; --ink:#f2f2f2; --muted:#a8a8a8; --line:#2c2c2c; --lake:#f2f2f2; --lake-ink:#111111; --lake-soft:#2a2a2a; --eye:#ff8a7f; --eye-soft:#3a1d1a; --amber:#f0b45a; --amber-soft:#3a2c14; --good:#6fd197; --good-soft:#15301f; --violet:#b4abf7; --violet-soft:#25223f; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); color-scheme:dark;}

/* Appearance picker (Account, Appearance) */
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.th-card{border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:10px;display:flex;flex-direction:column;gap:8px;text-align:left;min-height:44px;transition:border-color .15s ease-out,transform .12s ease-out}
.th-card:active{transform:scale(.98)}
.th-card[aria-checked="true"]{border-color:var(--lake);box-shadow:0 0 0 2px var(--lake-soft)}
.th-card .th-name{font-weight:700;font-size:.875rem;display:flex;align-items:center;justify-content:space-between;gap:6px}
.th-card .th-name svg{width:16px;height:16px;color:var(--lake);visibility:hidden}
.th-card[aria-checked="true"] .th-name svg{visibility:visible}
.th-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.th-prev{border-radius:8px;border:1px solid var(--line);background:var(--bg);padding:6px;display:flex;flex-direction:column;gap:4px;min-height:48px}
.th-prev .th-bar{height:6px;border-radius:99px;background:var(--ink);opacity:.85;width:70%}
.th-prev .th-row{display:flex;gap:4px;align-items:center}
.th-prev .th-btn{height:10px;flex:1;border-radius:4px;background:var(--lake)}
.th-prev .th-dot{width:10px;height:10px;border-radius:50%;background:var(--eye)}
.th-prev .th-chip{height:10px;flex:1;border-radius:4px;background:var(--lake-soft)}
.th-modes{display:flex;gap:8px;flex-wrap:wrap}
.th-modes button{min-height:44px}
.th-modes button[aria-checked="true"]{background:var(--lake);border-color:var(--lake);color:var(--lake-ink)}
@media (prefers-reduced-motion:reduce){.th-card{transition:none}.th-card:active{transform:none}}