/* ============================================================
   Holiday Mashup — colour schemes
   ============================================================

   Selectable palettes, layered over the tokens app.css defines. Loads after
   app.css, so what is declared here wins.

   Each scheme declares BOTH its light (--l-*) and dark (--d-*) values in one
   block; the resolvers at the bottom map one set onto the real tokens. That
   keeps a scheme to a single block rather than the three that app.css's
   light / auto-dark / forced-dark split would otherwise need.

   Schemes only override the hue-carrying tokens. Shadows, --danger and
   --pill-text fall through to app.css, which already switches them per theme.

   Adding a scheme: a block here plus an entry in Models/ColorScheme.cs, which
   is the single source of truth for what the picker offers.
   ============================================================ */

/* --- Neutral slate — THE DEFAULT, and the fallback -------------------------

   Deliberately on :root rather than [data-accent="slate"]. A data-accent value
   with no block of its own — a stale id left in localStorage by a scheme that
   was renamed or removed, a typo in a shared ?accent= link — inherits these.
   Without a fallback set, every light and dark reference below would resolve
   to nothing, and because an invalid var() poisons the whole declaration, all
   fifteen tokens would die at once and the page would lose its colours.

   Chrome recedes here so the 12 country colours carry the page; no hue overlap
   with any of them, so an accent can never be mistaken for a country.
   -------------------------------------------------------------------------- */
:root {
	--l-bg: #f1f3f6;             --d-bg: #101216;
	--l-bg-accent: #e8ebf0;      --d-bg-accent: #171a21;
	--l-surface: #ffffff;        --d-surface: #1a1d24;
	--l-surface-2: #f5f6f9;      --d-surface-2: #22262f;
	--l-surface-hover: #eceff3;  --d-surface-hover: #272c36;
	--l-border: #e2e5ea;         --d-border: #2b2f38;
	--l-border-strong: #cbd0d9;  --d-border-strong: #3b414d;
	--l-text: #16181d;           --d-text: #e8eaee;
	--l-text-muted: #5c626e;     --d-text-muted: #99a0ad;
	--l-accent: #334155;         --d-accent: #cbd5e1;
	--l-accent-strong: #1e293b;  --d-accent-strong: #e2e8f0;
	--l-accent-soft: #e6eaf0;    --d-accent-soft: #232833;
	--l-on-accent: #ffffff;      --d-on-accent: #101216;
	--l-focus: #475569;          --d-focus: #cbd5e1;
	--l-today: #334155;          --d-today: #cbd5e1;
}

/* --- Original indigo — the palette the app shipped with, kept selectable.
       Mirrors app.css's own :root token values, which are also what a visitor
       with JavaScript disabled sees, since nothing sets data-accent then. --- */
:root[data-accent="original"] {
	--l-bg: #eef1f8;             --d-bg: #0e1117;
	--l-bg-accent: #e5e9f8;      --d-bg-accent: #141a2b;
	--l-surface: #ffffff;        --d-surface: #171b24;
	--l-surface-2: #f3f5fb;      --d-surface-2: #1f2430;
	--l-surface-hover: #eef1f9;  --d-surface-hover: #232937;
	--l-border: #e2e6ef;         --d-border: #2a303c;
	--l-border-strong: #ccd3e2;  --d-border-strong: #3a4252;
	--l-text: #1a1f2e;           --d-text: #e6e9f0;
	--l-text-muted: #5b6478;     --d-text-muted: #9aa3b5;
	--l-accent: #4f46e5;         --d-accent: #818cf8;
	--l-accent-strong: #4338ca;  --d-accent-strong: #a5b4fc;
	--l-accent-soft: #ecebfe;    --d-accent-soft: #232945;
	--l-on-accent: #ffffff;      --d-on-accent: #0e1117;
	--l-focus: #6366f1;          --d-focus: #a5b4fc;
	--l-today: #4f46e5;          --d-today: #818cf8;
}

/* --- Ocean — sky-700/400 rather than blue-600, to stay clear of the
       #2563eb country blue. ---------------------------------------------- */
:root[data-accent="ocean"] {
	--l-bg: #eef2f8;             --d-bg: #0d1117;
	--l-bg-accent: #e2eaf6;      --d-bg-accent: #121a26;
	--l-surface: #ffffff;        --d-surface: #161b23;
	--l-surface-2: #f2f6fb;      --d-surface-2: #1e2530;
	--l-surface-hover: #e9eff8;  --d-surface-hover: #232b38;
	--l-border: #dfe5ee;         --d-border: #29303b;
	--l-border-strong: #c7d2e2;  --d-border-strong: #394352;
	--l-text: #131922;           --d-text: #e6eaf0;
	--l-text-muted: #566172;     --d-text-muted: #97a1b2;
	--l-accent: #0369a1;         --d-accent: #38bdf8;
	--l-accent-strong: #075985;  --d-accent-strong: #7dd3fc;
	--l-accent-soft: #dceffa;    --d-accent-soft: #102a3d;
	--l-on-accent: #ffffff;      --d-on-accent: #0d1117;
	--l-focus: #0284c7;          --d-focus: #7dd3fc;
	--l-today: #0369a1;          --d-today: #38bdf8;
}

/* --- Evergreen — sits near the teal (#0d9488) and cyan (#0891b2) country
       colours, so those two are harder to tell from the chrome here. ----- */
:root[data-accent="teal"] {
	--l-bg: #eef4f2;             --d-bg: #0c1211;
	--l-bg-accent: #e0eeea;      --d-bg-accent: #111b19;
	--l-surface: #ffffff;        --d-surface: #151c1b;
	--l-surface-2: #f2f7f5;      --d-surface-2: #1d2624;
	--l-surface-hover: #e8f2ef;  --d-surface-hover: #222c2a;
	--l-border: #dde8e5;         --d-border: #27322f;
	--l-border-strong: #c4d5d0;  --d-border-strong: #36443f;
	--l-text: #121a18;           --d-text: #e4ecea;
	--l-text-muted: #55655f;     --d-text-muted: #95a6a1;
	--l-accent: #0f766e;         --d-accent: #2dd4bf;
	--l-accent-strong: #115e59;  --d-accent-strong: #5eead4;
	--l-accent-soft: #d6efeb;    --d-accent-soft: #0d2d29;
	--l-on-accent: #ffffff;      --d-on-accent: #0c1211;
	--l-focus: #0d9488;          --d-focus: #5eead4;
	--l-today: #0f766e;          --d-today: #2dd4bf;
}

/* --- Clay — warm neutrals throughout, not just the accent. The biggest
       departure; brushes against the gold and orange country colours. ---- */
:root[data-accent="clay"] {
	--l-bg: #f6f3ee;             --d-bg: #14110d;
	--l-bg-accent: #efe9df;      --d-bg-accent: #1d1811;
	--l-surface: #ffffff;        --d-surface: #1f1b15;
	--l-surface-2: #faf7f2;      --d-surface-2: #29241c;
	--l-surface-hover: #f3efe7;  --d-surface-hover: #302a20;
	--l-border: #e9e3d8;         --d-border: #342d23;
	--l-border-strong: #d5ccbc;  --d-border-strong: #473e30;
	--l-text: #1c1813;           --d-text: #efe9df;
	--l-text-muted: #6b6155;     --d-text-muted: #a99e8d;
	--l-accent: #b45309;         --d-accent: #fbbf24;
	--l-accent-strong: #92400e;  --d-accent-strong: #fcd34d;
	--l-accent-soft: #fbeedd;    --d-accent-soft: #33240d;
	--l-on-accent: #ffffff;      --d-on-accent: #14110d;
	--l-focus: #d97706;          --d-focus: #fcd34d;
	--l-today: #b45309;          --d-today: #fbbf24;
}

/* --- Resolvers ---------------------------------------------------------

   Screen only, deliberately: app.css's @media print block flattens every token
   to black-on-white for ink, and these rules are specific enough and late
   enough to beat it. Scoping them to `screen` leaves printing alone.

   The three cases mirror app.css exactly — default light, system dark unless
   light is forced, and explicitly forced dark. --------------------------- */

@media screen {
	:root[data-accent] {
		--bg: var(--l-bg);
		--bg-accent: var(--l-bg-accent);
		--surface: var(--l-surface);
		--surface-2: var(--l-surface-2);
		--surface-hover: var(--l-surface-hover);
		--border: var(--l-border);
		--border-strong: var(--l-border-strong);
		--text: var(--l-text);
		--text-muted: var(--l-text-muted);
		--accent: var(--l-accent);
		--accent-strong: var(--l-accent-strong);
		--accent-soft: var(--l-accent-soft);
		--on-accent: var(--l-on-accent);
		--focus: var(--l-focus);
		--today: var(--l-today);
		color-scheme: light;
	}
}

@media screen and (prefers-color-scheme: dark) {
	:root[data-accent]:not([data-theme="light"]) {
		--bg: var(--d-bg);
		--bg-accent: var(--d-bg-accent);
		--surface: var(--d-surface);
		--surface-2: var(--d-surface-2);
		--surface-hover: var(--d-surface-hover);
		--border: var(--d-border);
		--border-strong: var(--d-border-strong);
		--text: var(--d-text);
		--text-muted: var(--d-text-muted);
		--accent: var(--d-accent);
		--accent-strong: var(--d-accent-strong);
		--accent-soft: var(--d-accent-soft);
		--on-accent: var(--d-on-accent);
		--focus: var(--d-focus);
		--today: var(--d-today);
		color-scheme: dark;
	}
}

@media screen {
	:root[data-accent][data-theme="dark"] {
		--bg: var(--d-bg);
		--bg-accent: var(--d-bg-accent);
		--surface: var(--d-surface);
		--surface-2: var(--d-surface-2);
		--surface-hover: var(--d-surface-hover);
		--border: var(--d-border);
		--border-strong: var(--d-border-strong);
		--text: var(--d-text);
		--text-muted: var(--d-text-muted);
		--accent: var(--d-accent);
		--accent-strong: var(--d-accent-strong);
		--accent-soft: var(--d-accent-soft);
		--on-accent: var(--d-on-accent);
		--focus: var(--d-focus);
		--today: var(--d-today);
		color-scheme: dark;
	}
}