/*
 * Themes. <html> carries data-accent (ocean | teal | lavender | slate) and the class "dark".
 * Each accent redefines the --blue* tokens (they mean "accent" everywhere in the CSS);
 * dark mode redefines the neutrals and soft status colours, with lighter accent steps.
 */

html[data-accent="teal"] { --blue: #0f766e; --blue-dark: #134e4a; --blue-soft: #e0f2ef; --blue-hover: #0d645d; --blue-light: #2aa198; }
html[data-accent="lavender"] { --blue: #6d4fd1; --blue-dark: #3b2d80; --blue-soft: #efebfc; --blue-hover: #5d42b8; --blue-light: #8d74e6; }
html[data-accent="slate"] { --blue: #3f5a7a; --blue-dark: #1f2d40; --blue-soft: #e8edf3; --blue-hover: #34506d; --blue-light: #64809f; }

html.dark {
	color-scheme: dark;
	--bg: #0f141d;
	--surface: #161c27;
	--surface-2: #1d2532;
	--border: #283142;
	--text: #e5e8ef;
	--muted: #9aa3b4;
	--faint: #6c7588;
	--line-strong: #3a4558;
	--input-border: #384356;
	--green: #4cc38a;
	--green-soft: #13322a;
	--amber: #f0b64a;
	--amber-soft: #382a12;
	--red: #f27c7c;
	--red-soft: #3a1b1d;
	--shadow: 0 1px 2px rgba(0, 0, 0, .3);
	/* ocean (default) in the dark */
	--blue: #6f9bff; --blue-dark: #2a4aa8; --blue-soft: #1b2847; --blue-hover: #86abff; --blue-light: #4f7fe6;
	--topbar: #121a2e;
}
html.dark[data-accent="teal"] { --blue: #4cc2b5; --blue-dark: #1d6b63; --blue-soft: #123230; --blue-hover: #66d3c7; --blue-light: #2e9c90; --topbar: #0f2321; }
html.dark[data-accent="lavender"] { --blue: #a58ff5; --blue-dark: #5541b0; --blue-soft: #262046; --blue-hover: #b8a6f8; --blue-light: #8a72e8; --topbar: #1a1630; }
html.dark[data-accent="slate"] { --blue: #93abc8; --blue-dark: #3d5574; --blue-soft: #1f2a38; --blue-hover: #a9bfd8; --blue-light: #6f8aab; --topbar: #151c26; }

/* text that sits on an accent-coloured fill stays readable in the dark */
html.dark .btn.primary, html.dark .calendar .day.selected .num, html.dark .subnav a.active { color: #0f141d; }
html.dark .subnav a.active .count { background: #0f141d; color: var(--blue); }
html.dark .next-shift { background: linear-gradient(135deg, var(--blue-dark), #1b2b55); }
html.dark[data-accent="teal"] .next-shift { background: linear-gradient(135deg, #1d6b63, #12403c); }
html.dark[data-accent="lavender"] .next-shift { background: linear-gradient(135deg, #5541b0, #2c2360); }
html.dark[data-accent="slate"] .next-shift { background: linear-gradient(135deg, #3d5574, #222f40); }
html.dark .auth { background: linear-gradient(160deg, #0b0f17, var(--topbar) 60%, var(--blue-dark)); }
html.dark .btn.success { color: #0f141d; }
/* the same for tabs, counts and badges, which the line above didn't cover */
html.dark .shift-tabs a.active, html.dark .day-picker button[aria-pressed="true"], html.dark .badge, html.dark .subnav .count { color: #0f141d; }
html.dark .shift-tabs a.active .dot { background: #0f141d; }
html.dark .client-badge { background: var(--blue-soft); }
html.dark input[type=date], html.dark input[type=datetime-local] { color-scheme: dark; }

/* appearance picker */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; background: var(--surface); font-size: 14px; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch .dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.swatch:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); font-weight: 600; }
.swatch:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.dot.accent-ocean { background: #1d4ed8; }
.dot.accent-teal { background: #0f766e; }
.dot.accent-lavender { background: #6d4fd1; }
.dot.accent-slate { background: #3f5a7a; }
/* --blue-dark is a background in dark mode: too dark to read as text on the soft boxes */
html.dark .info-box, html.dark .messages li, html.dark .day-part { color: var(--blue); }