/* Flat paper palettes. Loaded last so every mode has the same text and surface pairs. */
:root {
  --bg: #FFF7E8;
  --paper: #FFFDF6;
  --ink: #103B43;
  --ink2: #365B61;
  --teal: #0B6268;
  --petrol: #124754;
  --on-petrol: #FFFFFF;
  --deep: #082F3B;
  --sea: #2C7FA0;
  --aqua: #9DD6D3;
  --foam: #DCEEE7;
  --orange: #F6AD60;
  --orange-d: #B5632C;
  --sand: #E6E6CF;
  --on-teal: #FFFFFF;
  --button-ink: #103B43;
  --link: #0B6268;
  --terra: var(--teal);
  --terra-d: var(--link);
  --coral: var(--orange);
  --mustard: var(--orange);
  --plum: var(--link);
  --aub: var(--deep);
  --rose: var(--sea);
  --blush: var(--foam);
  --brown: var(--petrol);
  --line: var(--aqua);
  --cream: var(--bg);
  --hover: #A8561C;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l14 8.6-6.2 1.5 3.7 6.6-2.9 1.6-3.7-6.7L3 17.5z' fill='%23F6AD60' stroke='%23103B43' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
:root[data-season="spring"] {
  --bg: #EDF9F0;
  --aqua: #9EDAC2;
  --foam: #D9F0E1;
  --orange: #F4B86A;
  --teal: #12664F;
  --petrol: #174D46;
  --sea: #368D8F;
  --sand: #D8EADA;
  --link: #12664F;
  --terra: var(--teal);
  --terra-d: var(--link);
  --coral: var(--orange);
  --mustard: var(--orange);
  --plum: var(--link);
  --aub: var(--deep);
  --rose: var(--sea);
  --blush: var(--foam);
  --brown: var(--petrol);
  --line: var(--aqua);
  --cream: var(--bg);
  --hover: #A8561C;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l14 8.6-6.2 1.5 3.7 6.6-2.9 1.6-3.7-6.7L3 17.5z' fill='%23F4B86A' stroke='%23103B43' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
:root[data-season="summer"] {
  --bg: #FFF6E6;
  --aqua: #8DDCD7;
  --foam: #D6F1E9;
  --orange: #FFA758;
  --teal: #00666B;
  --petrol: #124C58;
  --sea: #2095AA;
  --sand: #E8E7C9;
  --link: #00666B;
  --terra: var(--teal);
  --terra-d: var(--link);
  --coral: var(--orange);
  --mustard: var(--orange);
  --plum: var(--link);
  --aub: var(--deep);
  --rose: var(--sea);
  --blush: var(--foam);
  --brown: var(--petrol);
  --line: var(--aqua);
  --cream: var(--bg);
  --hover: #A8561C;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l14 8.6-6.2 1.5 3.7 6.6-2.9 1.6-3.7-6.7L3 17.5z' fill='%23FFA758' stroke='%23103B43' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
:root[data-season="autumn"] {
  --bg: #FFF3E2;
  --aqua: #97C6C0;
  --foam: #DFE9DD;
  --orange: #F3A16A;
  --orange-d: #AC542C;
  --teal: #10545A;
  --petrol: #153F49;
  --sea: #33798A;
  --sand: #E5D9BE;
  --link: #10545A;
  --terra: var(--teal);
  --terra-d: var(--link);
  --coral: var(--orange);
  --mustard: var(--orange);
  --plum: var(--link);
  --aub: var(--deep);
  --rose: var(--sea);
  --blush: var(--foam);
  --brown: var(--petrol);
  --line: var(--aqua);
  --cream: var(--bg);
  --hover: #A8561C;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l14 8.6-6.2 1.5 3.7 6.6-2.9 1.6-3.7-6.7L3 17.5z' fill='%23F3A16A' stroke='%23103B43' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
:root[data-season="winter"] {
  --bg: #EAF5FC;
  --paper: #FFFFFF;
  --aqua: #AFD9E8;
  --foam: #DDEEF5;
  --orange: #F7C58D;
  --teal: #126476;
  --petrol: #184659;
  --sea: #478FB5;
  --sand: #D9E8ED;
  --link: #126476;
  --terra: var(--teal);
  --terra-d: var(--link);
  --coral: var(--orange);
  --mustard: var(--orange);
  --plum: var(--link);
  --aub: var(--deep);
  --rose: var(--sea);
  --blush: var(--foam);
  --brown: var(--petrol);
  --line: var(--aqua);
  --cream: var(--bg);
  --hover: #A8561C;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l14 8.6-6.2 1.5 3.7 6.6-2.9 1.6-3.7-6.7L3 17.5z' fill='%23F7C58D' stroke='%23103B43' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
:root[data-mode="night"] {
  --bg: #081F2C;
  --paper: #103340;
  --ink: #F4FBF6;
  --ink2: #C0DEDA;
  --teal: #9FE2CC;
  --petrol: #164855;
  --deep: #051620;
  --sea: #357A96;
  --aqua: #387A7D;
  --foam: #163F49;
  --orange: #F4BC66;
  --orange-d: #AA6832;
  --sand: #244E55;
  --on-teal: #0B303B;
  --button-ink: #0B303B;
  --link: #A8E8D5;
  --terra: var(--teal);
  --terra-d: var(--link);
  --coral: var(--orange);
  --mustard: var(--orange);
  --plum: var(--link);
  --aub: var(--deep);
  --rose: var(--sea);
  --blush: var(--foam);
  --brown: var(--petrol);
  --line: var(--aqua);
  --cream: var(--bg);
  --hover: #F4BC66;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l14 8.6-6.2 1.5 3.7 6.6-2.9 1.6-3.7-6.7L3 17.5z' fill='%23F4BC66' stroke='%23F4FBF6' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
:root[data-sky="aurora"] {
  --bg: #061F25;
  --paper: #103B3C;
  --ink: #F2FFF5;
  --ink2: #C5E8D9;
  --teal: #A7F1C8;
  --petrol: #124A49;
  --deep: #03151E;
  --sea: #287D8D;
  --aqua: #3C957D;
  --foam: #164B46;
  --orange: #D5B4FF;
  --orange-d: #8A63B5;
  --sand: #245C51;
  --on-teal: #082E30;
  --button-ink: #082E30;
  --link: #A7F1C8;
  --terra: var(--teal);
  --terra-d: var(--link);
  --coral: var(--orange);
  --mustard: var(--orange);
  --plum: var(--link);
  --aub: var(--deep);
  --rose: var(--sea);
  --blush: var(--foam);
  --brown: var(--petrol);
  --line: var(--aqua);
  --cream: var(--bg);
  --hover: #D5B4FF;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l14 8.6-6.2 1.5 3.7 6.6-2.9 1.6-3.7-6.7L3 17.5z' fill='%23D5B4FF' stroke='%23F2FFF5' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
:root[data-sky="flare"] {
  --bg: #1E252B;
  --paper: #30383D;
  --ink: #FFF8ED;
  --ink2: #E9D6C4;
  --teal: #FFBF96;
  --petrol: #274953;
  --deep: #111C25;
  --sea: #487F8D;
  --aqua: #B46B52;
  --foam: #3C4548;
  --orange: #FFB263;
  --orange-d: #B65A34;
  --sand: #53504A;
  --on-teal: #282B2D;
  --button-ink: #282B2D;
  --link: #FFBF96;
  --terra: var(--teal);
  --terra-d: var(--link);
  --coral: var(--orange);
  --mustard: var(--orange);
  --plum: var(--link);
  --aub: var(--deep);
  --rose: var(--sea);
  --blush: var(--foam);
  --brown: var(--petrol);
  --line: var(--aqua);
  --cream: var(--bg);
  --hover: #FFB263;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l14 8.6-6.2 1.5 3.7 6.6-2.9 1.6-3.7-6.7L3 17.5z' fill='%23FFB263' stroke='%23FFF8ED' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
:root[data-mode="night"][data-sky="flare"] {
  --bg: #101D27;
  --paper: #25343C;
  --ink: #FFF8ED;
  --ink2: #E9D6C4;
  --teal: #FFBB9E;
  --petrol: #234650;
  --deep: #09131D;
  --sea: #3B7488;
  --aqua: #AF6952;
  --foam: #35444A;
  --orange: #FFC06B;
  --orange-d: #B85E38;
  --sand: #4C4C47;
  --on-teal: #202B31;
  --button-ink: #202B31;
  --link: #FFBB9E;
  --terra: var(--teal);
  --terra-d: var(--link);
  --coral: var(--orange);
  --mustard: var(--orange);
  --plum: var(--link);
  --aub: var(--deep);
  --rose: var(--sea);
  --blush: var(--foam);
  --brown: var(--petrol);
  --line: var(--aqua);
  --cream: var(--bg);
  --hover: #FFC06B;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M3 2l14 8.6-6.2 1.5 3.7 6.6-2.9 1.6-3.7-6.7L3 17.5z' fill='%23FFC06B' stroke='%23FFF8ED' stroke-width='1.3' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

:root { color-scheme: light; }
:root[data-mode="night"], :root[data-sky="aurora"], :root[data-sky="flare"] { color-scheme: dark; }
a { color: var(--link); }
.btn, .badge, .fits li.your, .eslip, .free, .pf, .tear i, .flap[aria-current="step"] b { color: var(--button-ink); }
.btn.ghost { color: var(--ink); }
.btn.teal, .hero .strip + .strip, .eq.vaki, .startSec, .flap[aria-current="step"] { color: var(--on-teal); }
.chip, .ptab[aria-selected="true"] { color: #fff; }
.card { background: var(--paper); }
.card.vaki, .book.s4 .result { background: var(--foam); }
.card .who, .card.vaki .who, .ts, .rl b, .rd, .tear b { color: var(--link); }
/* Dark-mode ink must never land on one of the old fixed pale chat surfaces. */
.tryPeek .ph { background: var(--petrol); color: #fff; }
.tryPeek .ps { color: #E1F6ED; }
.tryPeek .pb { background: var(--foam); }
.tryPeek .m.bot, .tryPeek .pbar { background: var(--paper); color: var(--ink); }
.tryPeek .m.me, .tryPeek .pbar b { background: var(--teal); color: var(--on-teal); }
.tryPeek .pbar, .tryPeek .pbar i { border-color: var(--aqua); }
/* Check icons have white strokes, so keep their small backplates dark in every mode. */
details.more.how li::before, .result::before { background-color: var(--petrol); }
/* The illustration uses the same palette, with bold, separate cut-paper planes. */
:root[data-mode][data-season][data-sky] :is(.eyjar,.plugart) {
  --e-sky: var(--foam); --e-sea: var(--sea); --e-sea-hi: var(--aqua);
  --e-isle: var(--petrol); --e-isle-top: var(--orange);
  --e-helga: var(--teal); --e-helga-d: var(--petrol);
  --e-eld: var(--orange); --e-eld-d: var(--petrol); --e-lava: var(--deep);
  --e-heima: var(--aqua); --e-heima-d: var(--sea); --e-heima-cap: var(--teal);
  --e-quay: var(--deep); --e-h1: var(--orange); --e-h2: var(--teal);
  --e-h3: var(--aqua); --e-h4: var(--paper); --e-h5: var(--sea); --e-h6: var(--foam);
  --e-ra: var(--petrol); --e-rb: var(--teal); --e-sun: var(--orange);
  --e-hull: var(--petrol); --e-stripe: var(--orange); --e-hull2: var(--teal);
  --e-pbg: var(--foam); --e-pwall: var(--petrol); --e-pcable: var(--teal);
  --e-pcollar: var(--orange); --e-pbody: #FFFBF2; --e-pink: #103B43;
  --e-pvaki: #FFFBF2; --e-pline: var(--sea); --e-buoy: var(--orange);
  --e-snow-o: 0; --e-aur-o: 0; --e-sun-o: 1; --e-moon-o: 0;
}
:root[data-mode="night"][data-season][data-sky] :is(.eyjar,.plugart) { --e-sun-o: 0; --e-moon-o: 1; --e-win: #F4C57D; }
:root[data-season="winter"][data-mode][data-sky] :is(.eyjar,.plugart) { --e-snow-o: 1; --e-isle-top: #F3F7FF; --e-heima-cap: #F3F7FF; }
:root[data-sky="aurora"][data-mode][data-season] :is(.eyjar,.plugart) { --e-sky: #07343C; --e-aur-o: 1; --e-aur1: #83EBA8; --e-aur2: #43BDB5; --e-helga: #8ADBB0; --e-helga-d: #277A69; --e-heima-cap: #B2EBD7; }
:root[data-sky="flare"][data-mode][data-season] :is(.eyjar,.plugart) { --e-sky: #253D47; --e-helga: #EC9372; --e-helga-d: #AC553D; --e-heima: #F4B56F; --e-heima-d: #B86D3F; --e-heima-cap: #EF9476; --e-eld: #FA8F62; --e-eld-d: #AE4E37; }
:root[data-mode="night"][data-sky="flare"][data-season] :is(.eyjar,.plugart) { --e-sky: #18313F; }
/* Explicit sky conditions own the aurora; a clear winter night is not an aurora alert. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Pointer colour: links and buttons turn orange on hover, and on a mouse or pen the pointer is a small sharp arrow in the mode's own orange (--cursor, outlined in the mode's ink so it shows on every background).
   Phones and other coarse pointers keep their own. Nothing here moves anything (tests/site-pointer-colour-only.test.ts). --hover is the text-safe orange: a darker orange on the light modes, the mode's --orange on the dark ones. */
@media (pointer: fine) {
  html { cursor: var(--cursor) 3 2, auto; }
  a, button, summary, label, select, [role="button"], [role="tab"], .btn, .chip { cursor: var(--cursor) 3 2, pointer; }
  input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea { cursor: text; }
}
a:not(.btn):hover, details.more > summary:hover, .ptab:not([aria-selected="true"]):hover, .tryQ:hover { color: var(--hover); }
.btn:hover { background: var(--orange); box-shadow: 0 7px 0 var(--orange-d); transform: none; }
.btn.ghost:hover { background: var(--orange); color: var(--button-ink); }