/* tokens.css — the single source of truth for the site colour palette and type
   stacks. Loaded first by layout.php (every app page) and by the standalone
   landing.php, so a colour change happens in exactly ONE place.
   Warm "quiet room" creams, matched to the dashboard's photographic backdrop
   (hue ~38° — a touch warmer/rosier than the old greige family's ~43°). */
:root {
    color-scheme: light;
    --bg: #eae2d3;        /* warm cream "wall" (page/app background) */
    --panel: #f7f1e7;     /* warm ivory "page" (cards, panels, editor surface) */
    --panel-2: #f0e9dc;
    --ink: #2a2e33;
    --muted: #6f7480;
    --line: #e1d7c3;
    --accent: #2f6f4f;
    --accent-deep: #234f39;
    --accent-soft: #e7ecdf;
    --danger: #b23b3b;
    --play: #cf8a2f;      /* warm marigold accent */
    --serif: "Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
    --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --ws-serif: "Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
    --ws-mono: "Courier Prime","Courier New",ui-monospace,"Cascadia Mono",monospace;
}
body.dark {
    color-scheme: dark;
    --bg: #1e1f22;
    --panel: #292b2f;
    --panel-2: #232529;
    --ink: #bdc0bb;
    --muted: #868c92;
    --line: #393c41;
    --accent: #6fae8c;
    --accent-deep: #3a6b52;
    --accent-soft: #2c3a31;
    --danger: #d97a7a;
    --play: #d79a3f;
}

/* ==== Themes: token skins picked by the user (users.theme), applied as
   body.th-<name> by layout.php. "quiet-room" is the default = :root, so it
   has no block. Dark themes (candle/noir/evergreen/dusk) ALSO get body.dark
   on the editor for its dark-specific behaviors — these blocks sit AFTER
   body.dark so the theme's hues win over the generic dark palette. ==== */
/* Each theme is a PALETTE with a light (default) and dark (body.dm) variant —
   the 🌙 modifier flips the whole environment for every theme alike. */
body.th-candle {
    color-scheme: light;
    --bg: #f1e7d2; --panel: #f8f1df; --panel-2: #f0e6ce;
    --ink: #3a2e1d; --muted: #8a7658; --line: #e0d2b2;
    --accent: #b07e33; --accent-deep: #8f6425; --accent-soft: #f0e2c4;
    --danger: #b23b3b; --play: #cf8a2f;
}
body.dm.th-candle {
    color-scheme: dark;
    --bg: #211b14; --panel: #2a241c; --panel-2: #241e17;
    --ink: #e3d7bf; --muted: #99917f; --line: #3b3223;
    --accent: #c89b5a; --accent-deep: #a87f42; --accent-soft: #3a2f1e;
    --danger: #d97a7a; --play: #d79a3f;
}
body.th-beach {
    color-scheme: light;
    --bg: #dde8e4; --panel: #f2f8f4; --panel-2: #e6f0eb;
    --ink: #2b3b3a; --muted: #6b7f7c; --line: #cfded7;
    --accent: #3e7d6c; --accent-deep: #2e5f52; --accent-soft: #dceae2;
    --danger: #b23b3b; --play: #cf8a2f;
}
body.th-noir {
    color-scheme: light;
    --bg: #e8e8e6; --panel: #f4f4f2; --panel-2: #ececea;
    --ink: #2a2a2e; --muted: #6e6e6c; --line: #d2d2d0;
    --accent: #55555a; --accent-deep: #3c3c40; --accent-soft: #e0e0de;
    --danger: #b23b3b; --play: #8c8c8a;
}
body.dm.th-noir {
    color-scheme: dark;
    --bg: #1b1c1e; --panel: #242527; --panel-2: #1f2022;
    --ink: #d8d8d6; --muted: #8c8c8a; --line: #37383a;
    --accent: #a8b0b8; --accent-deep: #8c949c; --accent-soft: #2a2c2e;
    --danger: #d97a7a; --play: #b8b8b6;
}
body.th-evergreen {
    color-scheme: light;
    --bg: #e3ead9; --panel: #f1f5e8; --panel-2: #e8eedc;
    --ink: #26332b; --muted: #667a6c; --line: #cbd6bc;
    --accent: #3e7d5a; --accent-deep: #2e5f44; --accent-soft: #dde8d4;
    --danger: #b23b3b; --play: #cf8a2f;
}
body.dm.th-evergreen {
    color-scheme: dark;
    --bg: #19261f; --panel: #22332c; --panel-2: #1d2b24;
    --ink: #cfdccf; --muted: #7e9284; --line: #33473d;
    --accent: #6fae8c; --accent-deep: #4e8a6c; --accent-soft: #26382e;
    --danger: #d97a7a; --play: #d79a3f;
}
body.th-dusk {
    color-scheme: light;
    --bg: #ece4ec; --panel: #f6f0f4; --panel-2: #efe7ee;
    --ink: #3a3044; --muted: #77688a; --line: #d9cddb;
    --accent: #c97d52; --accent-deep: #a96540; --accent-soft: #efdde4;
    --danger: #b23b3b; --play: #cf8a2f;
}
body.dm.th-dusk {
    color-scheme: dark;
    --bg: #2c2740; --panel: #362f4e; --panel-2: #302946;
    --ink: #dcd3e8; --muted: #948ba8; --line: #4a4168;
    --accent: #d99a78; --accent-deep: #c08560; --accent-soft: #403652;
    --danger: #e08a8a; --play: #d79a3f;
}
/* Cherry Blossom: a calm ink garden — rose-washed paper whites, soft charcoal
   ink, rosewood accents. Dark = the garden after the lanterns go out. */
body.th-cherry {
    color-scheme: light;
    --bg: #f4e9e7; --panel: #fbf8f5; --panel-2: #f6efec;
    --ink: #3a3534; --muted: #968e87; --line: #e9e2da;
    --accent: #b8434e; --accent-deep: #9a3641; --accent-soft: #f6e3e4;
    --danger: #b23b3b; --play: #cf8a2f;
}
body.dm.th-cherry {
    color-scheme: dark;
    --bg: #2b2124; --panel: #332629; --panel-2: #2d2225;
    --ink: #d9cfc9; --muted: #9c918a; --line: #453a3d;
    --accent: #d98a93; --accent-deep: #b96a74; --accent-soft: #3f2e33;
    --danger: #d97a7a; --play: #d79a3f;
}
/* Rainy Day: soft overcast blue-gray — the coziest writing weather. A DAY
   theme (light default); dark = the storm at night, a lamp within. */
body.th-rainy {
    color-scheme: light;
    --bg: #dde4eb; --panel: #f5f8fb; --panel-2: #e8eef3;
    --ink: #333b44; --muted: #7c8794; --line: #d6dfe8;
    --accent: #3e6389; --accent-deep: #2f4e6e; --accent-soft: #dce6f0;
    --danger: #b23b3b; --play: #cf8a2f;
}
body.dm.th-rainy {
    color-scheme: dark;
    --bg: #1c2831; --panel: #263542; --panel-2: #202e39;
    --ink: #cbd5de; --muted: #8492a0; --line: #35434f;
    --accent: #6e97c0; --accent-deep: #517699; --accent-soft: #2a3a47;
    --danger: #d97a7a; --play: #d79a3f;
}

/* ==== Dark-mode modifier (body.dm, from users.theme_dark): night versions
   of the two DAYLIGHT themes. The four night themes are already dark, so
   the modifier deliberately leaves them alone — hence the :not() chain on
   the base block (which is "Quiet Room at night"). ==== */
body.dm:not(.th-candle):not(.th-noir):not(.th-evergreen):not(.th-dusk):not(.th-beach):not(.th-cherry):not(.th-rainy) {
    color-scheme: dark;
    --bg: #232019; --panel: #2a2721; --panel-2: #26231d;
    --ink: #d8d2c4; --muted: #918a7a; --line: #3b372f;
    --accent: #7fae8f; --accent-deep: #567f63; --accent-soft: #2c3a31;
    --danger: #d97a7a; --play: #d79a3f;
}
/* Dark Beach is MOONLIT OCEAN — blue-slate, not teal-green — so it reads
   clearly apart from Evergreen's pine darkness. */
body.dm.th-beach {
    color-scheme: dark;
    --bg: #16222c; --panel: #1e2c38; --panel-2: #192631;
    --ink: #c6d8e2; --muted: #7a91a0; --line: #2e4250;
    --accent: #5fa8b8; --accent-deep: #43828f; --accent-soft: #21343c;
    --danger: #d97a7a; --play: #cf8a2f;
}