/* Niche themes. is set from config.theme (niche.json, client.json can override).
A theme changes the neutrals, the sidebar, shapes, calendar cards and decoration; the brand colour
(--accent, --signal) stays the client's own. Dark themes also lighten brand text and soft status colours. */
/* ---------- Blush · beauty: warm cream, deep plum sidebar, soft pills ---------- */
:root[data-theme="blush"] {
--bg: #fffdfc; --bg-app: #f8f1ef; --surface: #f6eeeb; --surface-2: #eee2de;
--ink: #2a1622; --ink-2: #6e5563; --ink-3: #8f7784;
--line: #f0e4e0; --line-strong: #e2d2cd; --line-soft: #f8f0ed;
--radius: 14px; --radius-sm: 12px; --radius-xs: 8px;
--sidebar-bg: #3b1530;
--sidebar-deco: radial-gradient(140% 55% at 0% 0%, rgba(232, 123, 164, .28), transparent 62%), radial-gradient(90% 40% at 100% 100%, rgba(232, 123, 164, .14), transparent 70%);
--sidebar-ink: rgba(255, 238, 246, .7); --sidebar-ink-strong: #ffffff; --sidebar-line: rgba(255, 255, 255, .1);
--sidebar-hover: rgba(255, 255, 255, .07); --sidebar-active-bg: rgba(232, 123, 164, .24); --sidebar-active-ink: #ffffff;
--appt-tint: 9%; --appt-tint-done: 6%; --appt-radius: 12px; --appt-bar: 0px; --appt-border: #f0e0e4;
--hero-bg: #3b1530; --hero-muted: #d7b3c6; --hero-line: #5a2a4b;
--display-weight: 600;
}
/* ---------- Clinic · dental: cool, crisp, precise; white sidebar with a brand band ---------- */
:root[data-theme="clinic"] {
--bg: #ffffff; --bg-app: #eef4f5; --surface: #eef4f5; --surface-2: #e0eaec;
--ink: #0e2a30; --ink-2: #4c666c; --ink-3: #6f878c;
--line: #e2ebed; --line-strong: #cddcdf; --line-soft: #f0f5f6;
--radius: 8px; --radius-sm: 6px; --radius-xs: 4px;
--sidebar-bg: #ffffff;
--sidebar-deco: linear-gradient(to bottom, var(--accent) 0 72px, transparent 72px);
--sidebar-brand-ink: #ffffff;
--sidebar-ink: #4c666c; --sidebar-ink-strong: #0e2a30; --sidebar-line: #e2ebed;
--sidebar-hover: #f1f6f7; --sidebar-active-bg: color-mix(in srgb, var(--accent) 10%, #ffffff);
--appt-tint: 0%; --appt-tint-done: 5%; --appt-radius: 4px; --appt-bar: 4px; --appt-border: #d5e2e5;
--hero-bg: #0e2a30; --hero-muted: #9fb8bd; --hero-line: #1f444b;
--display-weight: 600; --display-tracking: -.01em;
}
/* ---------- Energy · fitness: black sidebar with stripes, bold type, solid brand pill ---------- */
:root[data-theme="energy"] {
--bg: #ffffff; --bg-app: #f3f1ef; --surface: #f2efec; --surface-2: #e6e1dc;
--ink: #151211; --ink-2: #5c5550; --ink-3: #7c746e;
--line: #ebe6e2; --line-strong: #d9d2cc; --line-soft: #f5f2ef;
--radius: 6px; --radius-sm: 4px; --radius-xs: 3px;
--sidebar-bg: #151211;
--sidebar-deco: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 14px, transparent 14px 28px);
--sidebar-ink: rgba(255, 255, 255, .62); --sidebar-ink-strong: #ffffff; --sidebar-line: rgba(255, 255, 255, .09);
--sidebar-hover: rgba(255, 255, 255, .07); --sidebar-active-bg: var(--accent); --sidebar-active-ink: var(--accent-ink);
--appt-tint: 13%; --appt-tint-done: 8%; --appt-radius: 3px; --appt-bar: 4px; --appt-border: transparent;
--hero-bg: #151211; --hero-muted: #a8a09a; --hero-line: #2c2724;
--display-weight: 800; --display-tracking: -.035em;
}
/* ---------- Campus · education: ink-navy sidebar on graph paper, notebook background ---------- */
:root[data-theme="campus"] {
--bg: #fffefb; --bg-app: #f6f4ec; --surface: #f2efe4; --surface-2: #e7e2d3;
--ink: #141c3a; --ink-2: #545b76; --ink-3: #767c93;
--line: #ebe7da; --line-strong: #d9d3c1; --line-soft: #f4f1e7;
--app-deco: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(30, 58, 138, .045) 31px 32px);
--sidebar-bg: #16255c;
--sidebar-deco: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
--sidebar-ink: rgba(232, 237, 255, .68); --sidebar-ink-strong: #ffffff; --sidebar-line: rgba(255, 255, 255, .1);
--sidebar-hover: rgba(255, 255, 255, .07); --sidebar-active-bg: color-mix(in srgb, var(--signal) 22%, transparent); --sidebar-active-ink: #ffd66b;
--appt-tint: 8%; --appt-radius: 6px; --appt-bar: 3px;
--hero-bg: #16255c; --hero-muted: #aab4dd; --hero-line: #283a7a;
}
:root[data-theme="campus"] .sidebar { background-size: 22px 22px; }
/* ---------- Playroom · kids: pastel lilac, confetti, very round, bright pills ---------- */
:root[data-theme="playroom"] {
--bg: #ffffff; --bg-app: #f5f1ff; --surface: #f3eefd; --surface-2: #e8e0fa;
--ink: #231a3a; --ink-2: #625a7c; --ink-3: #847c9c;
--line: #ece6fa; --line-strong: #dcd3f3; --line-soft: #f6f2ff;
--radius: 20px; --radius-sm: 14px; --radius-xs: 10px;
--sidebar-bg: #efe8ff;
--sidebar-deco: radial-gradient(circle at 18% 88%, rgba(245, 180, 0, .35) 0 5px, transparent 6px), radial-gradient(circle at 78% 94%, rgba(109, 63, 192, .3) 0 7px, transparent 8px), radial-gradient(circle at 55% 82%, rgba(232, 123, 164, .35) 0 4px, transparent 5px), radial-gradient(circle at 88% 76%, rgba(27, 175, 122, .3) 0 5px, transparent 6px);
--sidebar-ink: #625a7c; --sidebar-ink-strong: #231a3a; --sidebar-line: #e0d6f7;
--sidebar-hover: rgba(255, 255, 255, .6); --sidebar-active-bg: var(--accent); --sidebar-active-ink: var(--accent-ink);
--appt-tint: 15%; --appt-tint-done: 8%; --appt-radius: 12px; --appt-bar: 0px; --appt-border: transparent;
--hero-bg: #4b2a8c; --hero-muted: #d4c6f5; --hero-line: #5f3aa8;
--display-weight: 700;
}
/* ---------- Garage · car service: dark graphite workshop, hazard stripe ---------- */
:root[data-theme="garage"] {
color-scheme: dark;
--bg: #1d2026; --bg-app: #15171b; --surface: #252932; --surface-2: #2e333d;
--ink: #eef0f3; --ink-2: #a7adb8; --ink-3: #7f8692;
--line: #2b2f37; --line-strong: #3a3f4a; --line-soft: #22252b;
--accent-text: color-mix(in srgb, var(--accent) 70%, #ffffff);
--accent-soft: color-mix(in srgb, var(--accent) 20%, var(--bg));
--ok-soft: #173427; --warn-soft: #3a2c12; --bad-soft: #3d1d1a; --note-bg: #2c2716; --note-line: #4a4020;
--hatch-1: rgba(255, 255, 255, .015); --hatch-2: rgba(255, 255, 255, .045);
--shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 12px 32px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04);
--backdrop: rgba(0, 0, 0, .6); --focus-ring: rgba(255, 255, 255, .12);
--radius: 6px; --radius-sm: 5px; --radius-xs: 3px;
--sidebar-bg: #111316;
--sidebar-deco: linear-gradient(to top, transparent 8px, #111316 8px), repeating-linear-gradient(135deg, var(--accent) 0 10px, #111316 10px 20px);
--sidebar-ink: #9aa1ad; --sidebar-ink-strong: #f3f4f6; --sidebar-line: #23262c;
--sidebar-hover: #1b1e23; --sidebar-active-bg: color-mix(in srgb, var(--accent) 18%, #111316); --sidebar-active-ink: color-mix(in srgb, var(--accent) 60%, #ffffff);
--appt-bg: #252932; --appt-tint: 10%; --appt-tint-done: 8%; --appt-radius: 4px; --appt-bar: 4px; --appt-border: #343944;
--hero-bg: #111316; --hero-muted: #8f96a2; --hero-line: #262a31;
--display-weight: 700; --display-tracking: -.02em;
}
/* ---------- Aqua · car wash: ocean-blue gradient sidebar, bubbles in the background ---------- */
:root[data-theme="aqua"] {
--bg: #ffffff; --bg-app: #edf5fc; --surface: #edf4fb; --surface-2: #dde9f5;
--ink: #0c2340; --ink-2: #4a6180; --ink-3: #6f84a0;
--line: #e1ebf5; --line-strong: #cbdaea; --line-soft: #f1f6fb;
--radius: 12px; --radius-sm: 10px; --radius-xs: 6px;
--app-deco: radial-gradient(circle at 92% 8%, rgba(34, 193, 238, .10) 0 110px, transparent 111px), radial-gradient(circle at 84% 92%, rgba(10, 102, 194, .07) 0 170px, transparent 171px), radial-gradient(circle at 60% 50%, rgba(34, 193, 238, .05) 0 60px, transparent 61px);
--sidebar-bg: #0a5fb4;
--sidebar-deco: radial-gradient(circle at 80% 86%, rgba(255, 255, 255, .12) 0 26px, transparent 27px), radial-gradient(circle at 30% 94%, rgba(255, 255, 255, .1) 0 14px, transparent 15px), radial-gradient(circle at 62% 78%, rgba(255, 255, 255, .08) 0 9px, transparent 10px), linear-gradient(180deg, #0a66c2, #073f7c);
--sidebar-ink: rgba(232, 244, 255, .76); --sidebar-ink-strong: #ffffff; --sidebar-line: rgba(255, 255, 255, .14);
--sidebar-hover: rgba(255, 255, 255, .1); --sidebar-active-bg: rgba(255, 255, 255, .2); --sidebar-active-ink: #ffffff;
--appt-tint: 10%; --appt-radius: 10px; --appt-bar: 3px; --appt-border: #d6e4f2;
--hero-bg: #073f7c; --hero-muted: #a9c7ea; --hero-line: #11559f;
}
/* ---------- Calm · spa: linen and sage, soft type, borderless cards ---------- */
:root[data-theme="calm"] {
--bg: #fffdf8; --bg-app: #f2eee4; --surface: #f3eee3; --surface-2: #e8e1d2;
--ink: #22302a; --ink-2: #5d6b63; --ink-3: #808b84;
--line: #ebe5d8; --line-strong: #dcd4c3; --line-soft: #f5f1e8;
--radius: 16px; --radius-sm: 12px; --radius-xs: 8px;
--sidebar-bg: #2f4a3e;
--sidebar-deco: radial-gradient(120% 50% at 100% 100%, rgba(200, 162, 107, .22), transparent 65%);
--sidebar-ink: rgba(243, 237, 225, .7); --sidebar-ink-strong: #fbf7ee; --sidebar-line: rgba(255, 255, 255, .1);
--sidebar-hover: rgba(255, 255, 255, .06); --sidebar-active-bg: rgba(200, 162, 107, .24); --sidebar-active-ink: #f5e2bf;
--appt-tint: 8%; --appt-tint-done: 6%; --appt-radius: 12px; --appt-bar: 0px; --appt-border: transparent;
--shadow-1: 0 1px 3px rgba(60, 50, 30, .08);
--hero-bg: #2f4a3e; --hero-muted: #c6d1c9; --hero-line: #426253;
--display-weight: 500; --display-tracking: -.01em;
}
/* ---------- Fresh · vet: mint, white sidebar with a big brand header ---------- */
:root[data-theme="fresh"] {
--bg: #ffffff; --bg-app: #edf6f3; --surface: #edf5f2; --surface-2: #ddebe6;
--ink: #12302b; --ink-2: #4e6a64; --ink-3: #718a85;
--line: #e0ece8; --line-strong: #cbdcd6; --line-soft: #f1f7f5;
--radius: 14px; --radius-sm: 10px; --radius-xs: 6px;
--sidebar-bg: #ffffff;
--sidebar-deco: radial-gradient(circle at 88% 30px, rgba(255, 255, 255, .16) 0 22px, transparent 23px), linear-gradient(to bottom, var(--accent) 0 76px, transparent 76px);
--sidebar-brand-ink: #ffffff;
--sidebar-ink: #4e6a64; --sidebar-ink-strong: #12302b; --sidebar-line: #e0ece8;
--sidebar-hover: #f1f7f5; --sidebar-active-bg: color-mix(in srgb, var(--signal) 18%, #ffffff); --sidebar-active-ink: #12302b;
--appt-tint: 7%; --appt-radius: 10px; --appt-bar: 4px;
--hero-bg: #0f5f58; --hero-muted: #b6d6cf; --hero-line: #1c7a71;
}
/* ---------- Soft · therapy: quiet lavender, rounded, no hard lines ---------- */
:root[data-theme="soft"] {
--bg: #ffffff; --bg-app: #f0f1f8; --surface: #f0f1f8; --surface-2: #e3e6f2;
--ink: #1f2340; --ink-2: #5c6282; --ink-3: #7f84a0;
--line: #e7e9f4; --line-strong: #d6daea; --line-soft: #f4f5fa;
--radius: 18px; --radius-sm: 14px; --radius-xs: 10px;
--sidebar-bg: #e7e9f5;
--sidebar-deco: radial-gradient(100% 40% at 0% 100%, rgba(157, 180, 224, .35), transparent 70%);
--sidebar-ink: #5c6282; --sidebar-ink-strong: #1f2340; --sidebar-line: #d9ddee;
--sidebar-hover: rgba(255, 255, 255, .55); --sidebar-active-bg: #ffffff; --sidebar-active-ink: var(--accent-text);
--appt-tint: 10%; --appt-tint-done: 6%; --appt-radius: 14px; --appt-bar: 0px; --appt-border: transparent;
--hero-bg: #3b4670; --hero-muted: #c3c9e6; --hero-line: #4d5a8a;
--display-weight: 500; --display-tracking: -.01em;
}
/* ---------- Neon · game club: night purple, glowing cyan, dark everything ---------- */
:root[data-theme="neon"] {
color-scheme: dark;
--bg: #161127; --bg-app: #0e0a1a; --surface: #1f1936; --surface-2: #2a2247;
--ink: #f1edff; --ink-2: #b3a9d6; --ink-3: #8a80ad;
--line: #262040; --line-strong: #372e5a; --line-soft: #1b1530;
--accent-text: color-mix(in srgb, var(--accent) 45%, #ffffff);
--accent-soft: color-mix(in srgb, var(--accent) 28%, var(--bg));
--ok-soft: #13332c; --warn-soft: #37290f; --bad-soft: #3a1626; --note-bg: #28213d; --note-line: #3d3160;
--hatch-1: rgba(255, 255, 255, .012); --hatch-2: rgba(255, 255, 255, .04);
--shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --shadow-2: 0 14px 36px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05);
--backdrop: rgba(5, 3, 12, .7); --focus-ring: rgba(34, 211, 238, .2);
--app-deco: radial-gradient(60% 40% at 100% 0%, rgba(91, 33, 182, .22), transparent 70%), radial-gradient(40% 30% at 0% 100%, rgba(34, 211, 238, .08), transparent 70%);
--sidebar-bg: #0b0816;
--sidebar-deco: radial-gradient(120% 45% at 0% 0%, rgba(91, 33, 182, .45), transparent 65%), radial-gradient(80% 30% at 100% 100%, rgba(34, 211, 238, .16), transparent 70%);
--sidebar-ink: #a79dcc; --sidebar-ink-strong: #ffffff; --sidebar-line: #1f1936;
--sidebar-hover: rgba(255, 255, 255, .05); --sidebar-active-bg: color-mix(in srgb, var(--signal) 16%, transparent); --sidebar-active-ink: var(--signal);
--appt-bg: #1f1936; --appt-tint: 18%; --appt-tint-done: 10%; --appt-radius: 8px; --appt-bar: 3px; --appt-border: #3a2f63;
--hero-bg: #0b0816; --hero-muted: #9d93c4; --hero-line: #231c3d;
--display-weight: 700; --display-tracking: -.02em;
}
:root[data-theme="neon"] .sidebar__nav a.is-active { box-shadow: inset 3px 0 0 var(--signal), 0 0 18px -6px var(--signal); }
:root[data-theme="neon"] .appt { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent), 0 0 14px -8px var(--c); }
/* ---------- Court · sports courts: deep green, court lines, lime pill ---------- */
:root[data-theme="court"] {
--bg: #ffffff; --bg-app: #eef3ea; --surface: #edf2e8; --surface-2: #dde6d5;
--ink: #122616; --ink-2: #4f6553; --ink-3: #728676;
--line: #e1e9dc; --line-strong: #ccd8c5; --line-soft: #f1f5ee;
--radius: 8px; --radius-sm: 6px; --radius-xs: 4px;
--sidebar-bg: #0f3d22;
--sidebar-deco: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .09) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(transparent calc(55% - 1px), rgba(255, 255, 255, .09) calc(55% - 1px) calc(55% + 1px), transparent calc(55% + 1px)), linear-gradient(180deg, #11472a, #0c331c);
--sidebar-ink: rgba(228, 246, 232, .72); --sidebar-ink-strong: #ffffff; --sidebar-line: rgba(255, 255, 255, .1);
--sidebar-hover: rgba(255, 255, 255, .07); --sidebar-active-bg: var(--signal); --sidebar-active-ink: #0f3d22;
--appt-tint: 10%; --appt-radius: 5px; --appt-bar: 4px;
--hero-bg: #0f3d22; --hero-muted: #b3d1bb; --hero-line: #1c5a34;
--display-weight: 700; --display-tracking: -.02em;
}
/* ---------- Wood · sauna: dark warm timber, planks, glowing amber ---------- */
:root[data-theme="wood"] {
color-scheme: dark;
--bg: #231812; --bg-app: #1a120d; --surface: #2e2019; --surface-2: #3a291f;
--ink: #f6ebe2; --ink-2: #c9b3a3; --ink-3: #9c8575;
--line: #33251d; --line-strong: #4a3629; --line-soft: #291c15;
--accent-text: color-mix(in srgb, var(--accent) 45%, #ffe2c9);
--accent-soft: color-mix(in srgb, var(--accent) 30%, var(--bg));
--ok-soft: #1e3322; --warn-soft: #3b2a12; --bad-soft: #3e1d16; --note-bg: #332517; --note-line: #4d3822;
--hatch-1: rgba(255, 220, 190, .015); --hatch-2: rgba(255, 220, 190, .045);
--shadow-1: 0 1px 2px rgba(0, 0, 0, .45); --shadow-2: 0 14px 36px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .04);
--backdrop: rgba(10, 5, 2, .65); --focus-ring: rgba(240, 138, 60, .22);
--app-deco: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .14) 0 1px, transparent 1px 46px);
--radius: 10px; --radius-sm: 8px; --radius-xs: 5px;
--sidebar-bg: #140d09;
--sidebar-deco: radial-gradient(90% 35% at 50% 100%, rgba(240, 138, 60, .22), transparent 70%), repeating-linear-gradient(to bottom, rgba(255, 255, 255, .03) 0 1px, transparent 1px 38px);
--sidebar-ink: #bfa894; --sidebar-ink-strong: #fff3e8; --sidebar-line: #2a1d15;
--sidebar-hover: rgba(255, 255, 255, .05); --sidebar-active-bg: color-mix(in srgb, var(--signal) 20%, transparent); --sidebar-active-ink: #ffc08a;
--appt-bg: #2e2019; --appt-tint: 14%; --appt-tint-done: 8%; --appt-radius: 8px; --appt-bar: 3px; --appt-border: #4a3629;
--hero-bg: #140d09; --hero-muted: #b89f8b; --hero-line: #2e2019;
--display-weight: 600;
}
/* ---------- Razor · barbershop: charcoal and saddle leather, brass trim, the barber's pole down the menu's edge ---------- */
:root[data-theme="razor"] {
color-scheme: dark;
--bg: #1c1a19; --bg-app: #131211; --surface: #252220; --surface-2: #302c29;
--ink: #f3ede6; --ink-2: #b9aea4; --ink-3: #8f847b;
--line: #2c2826; --line-strong: #403a36; --line-soft: #201e1c;
--accent-text: color-mix(in srgb, var(--accent) 50%, #ffe8d4);
--accent-soft: color-mix(in srgb, var(--accent) 24%, var(--bg));
--ok-soft: #1b3226; --warn-soft: #3a2b12; --bad-soft: #3d1c18; --note-bg: #2e2716; --note-line: #4a3e22;
--hatch-1: rgba(255, 240, 220, .015); --hatch-2: rgba(255, 240, 220, .045);
--shadow-1: 0 1px 2px rgba(0, 0, 0, .45); --shadow-2: 0 14px 36px -12px rgba(0, 0, 0, .78), 0 0 0 1px rgba(255, 255, 255, .04);
--backdrop: rgba(8, 6, 5, .66); --focus-ring: color-mix(in srgb, var(--signal) 24%, transparent);
--app-deco: radial-gradient(50% 35% at 100% 0%, color-mix(in srgb, var(--signal) 9%, transparent), transparent 70%);
--radius: 8px; --radius-sm: 6px; --radius-xs: 4px;
--sidebar-bg: #0f0e0d;
--sidebar-deco: linear-gradient(90deg, transparent 0 5px, #0f0e0d 5px), repeating-linear-gradient(160deg, var(--accent) 0 10px, #f3ede6 10px 15px, var(--signal) 15px 23px, #f3ede6 23px 28px);
--sidebar-ink: #b3a89e; --sidebar-ink-strong: #f6efe7; --sidebar-line: #221f1d;
--sidebar-hover: rgba(255, 255, 255, .05); --sidebar-active-bg: color-mix(in srgb, var(--signal) 14%, transparent); --sidebar-active-ink: var(--signal);
--appt-bg: #252220; --appt-tint: 14%; --appt-tint-done: 8%; --appt-radius: 6px; --appt-bar: 3px; --appt-border: #403a36;
--hero-bg: #0f0e0d; --hero-muted: #a89c91; --hero-line: #262220;
--display-weight: 700; --display-tracking: -.015em;
}
:root[data-theme="razor"] .sidebar__nav a.is-active { box-shadow: inset 2px 0 0 var(--signal); }
/* ---------- Cyber · computer club: graphite and a monitor's grid, emerald glow, sharp corners, numbers in mono ---------- */
:root[data-theme="cyber"] {
color-scheme: dark;
--bg: #0f141a; --bg-app: #090d12; --surface: #151c24; --surface-2: #1d2630;
--ink: #e6edf3; --ink-2: #9aa8b6; --ink-3: #6f7d8b;
--line: #1a222c; --line-strong: #283442; --line-soft: #121920;
--accent-text: color-mix(in srgb, var(--accent) 60%, #ffffff);
--accent-soft: color-mix(in srgb, var(--accent) 20%, var(--bg));
--ok-soft: #0f2e25; --warn-soft: #33270e; --bad-soft: #3a1520; --note-bg: #1a2230; --note-line: #2b3a4d;
--hatch-1: rgba(255, 255, 255, .012); --hatch-2: rgba(255, 255, 255, .035);
--shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --shadow-2: 0 14px 36px -12px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .05);
--backdrop: rgba(3, 6, 9, .72); --focus-ring: color-mix(in srgb, var(--accent) 26%, transparent);
--app-deco: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 100% 28px,
linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px) 0 0 / 28px 100%,
radial-gradient(45% 35% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
--radius: 6px; --radius-sm: 5px; --radius-xs: 3px;
--sidebar-bg: #070a0e;
--sidebar-deco: linear-gradient(180deg, transparent 0 calc(100% - 3px), var(--accent) calc(100% - 3px)),
radial-gradient(120% 40% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%),
radial-gradient(90% 30% at 100% 100%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 70%);
--sidebar-ink: #8d9aa8; --sidebar-ink-strong: #ffffff; --sidebar-line: #131a22;
--sidebar-hover: rgba(255, 255, 255, .05); --sidebar-active-bg: color-mix(in srgb, var(--accent) 16%, transparent); --sidebar-active-ink: color-mix(in srgb, var(--accent) 70%, #ffffff);
--appt-bg: #151c24; --appt-tint: 16%; --appt-tint-done: 8%; --appt-radius: 4px; --appt-bar: 3px; --appt-border: #283442;
--hero-bg: #070a0e; --hero-muted: #8d9aa8; --hero-line: #1a222c;
--display-weight: 700; --display-tracking: -.02em;
}
:root[data-theme="cyber"] .sidebar__nav a.is-active { box-shadow: inset 3px 0 0 var(--accent), 0 0 20px -8px var(--accent); }
:root[data-theme="cyber"] .num { font-family: var(--font-mono); letter-spacing: -.01em; }
:root[data-theme="cyber"] .demo-bar { background: #000; }
/* ---------- Road · driving school: asphalt sidebar with lane marking, yellow signals ---------- */
:root[data-theme="road"] {
--bg: #ffffff; --bg-app: #f1f1ee; --surface: #f0f0ec; --surface-2: #e3e3de;
--ink: #17181b; --ink-2: #56585f; --ink-3: #797b82;
--line: #e7e7e2; --line-strong: #d4d4ce; --line-soft: #f4f4f1;
--radius: 6px; --radius-sm: 5px; --radius-xs: 3px;
--sidebar-bg: #2b2d31;
--sidebar-deco: linear-gradient(90deg, transparent 0 6px, #2b2d31 6px), repeating-linear-gradient(to bottom, #fbbf24 0 22px, transparent 22px 40px);
--sidebar-ink: rgba(255, 255, 255, .64); --sidebar-ink-strong: #ffffff; --sidebar-line: rgba(255, 255, 255, .09);
--sidebar-hover: rgba(255, 255, 255, .06); --sidebar-active-bg: rgba(251, 191, 36, .16); --sidebar-active-ink: #fbd46a;
--appt-tint: 8%; --appt-radius: 3px; --appt-bar: 4px;
--hero-bg: #2b2d31; --hero-muted: #b3b5bb; --hero-line: #3d4046;
--display-weight: 700; --display-tracking: -.02em;
}
/* dark themes: native controls, soft brand badges and the demo bar stay readable */
:root[data-theme="garage"] .demo-bar, :root[data-theme="neon"] .demo-bar, :root[data-theme="wood"] .demo-bar, :root[data-theme="razor"] .demo-bar { background: #000; }