/*
 * ═══ OutaStory UI v2 — the seven color worlds ═══
 * Per-world palette overrides on top of ui-v2.css's default token layer.
 * Everything is scoped to html[data-ui="v2"] with a per-world data-theme
 * attribute (plus the .theme-preview duplicates below) and is INERT unless
 * App.Web stamps data-ui="v2". Loads after ui-v2.css in App.razor/index.html.
 * NOTE: keep comments in this file free of curly braces — UiV2ContrastTests'
 * ParseBlock splits on brace pairs across the whole file text.
 *
 * Structure per world = two blocks mirroring ui-v2.css exactly:
 *   light — bare world anchor (fallback), the html-level mode attribute, the
 *           binary descendant re-anchor div, and the Theme Studio preview tile;
 *   dark  — same minus the bare fallback.
 * The descendant re-anchor is required for the same reason ui-v2.css documents
 * on its own light block: AppLayout/ReaderLayout/GateLayout stamp an inner
 * binary div where themes/default.css would otherwise re-win.
 *
 * Preview tiles: each selector list carries a .theme-preview duplicate so the
 * Theme Studio can render an inactive world inside the active one — sharing the
 * selector list keeps every value single-sourced (no copied blocks). The one
 * exception is "default", whose canonical palette lives in ui-v2.css; its two
 * preview blocks at the end of this file are literal value copies and MUST be
 * kept in lockstep with ui-v2.css.
 *
 * Contrast pairs are enforced by UiV2ContrastTests (7 worlds x 2 modes) —
 * adjust lightness, keep hue, if a value change fails the harness.
 */

/* ══ NEBULA — cosmic violet-indigo, aurora accents ══ */

/* Observatory day: indigo ink on cool starlit paper. */
html[data-ui="v2"][data-theme="nebula"],
html[data-ui="v2"][data-theme="nebula"][data-theme-mode="light"],
html[data-ui="v2"][data-theme="nebula"] [data-theme="light"],
.theme-preview[data-theme="nebula"][data-theme-mode="light"] {
	--os-primary: #4B3BD8;
	--os-primary-hover: #3D2EC2;
	--os-primary-light: #E7E4FB;
	--os-primary-dark: #372AAE;
	--os-gradient-start: #4B3BD8;
	--os-gradient-end: #2A1E7E;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #0A8FA8;
	--os-accent-hover: #0C7E93;

	--os-background: #F2F2FA;
	--os-surface: #FFFFFF;
	--os-surface-variant: #EAEAF6;
	--os-surface-elevated: #FFFFFF;

	--os-text-primary: #14122B;
	--os-text-secondary: #454363;
	--os-text-tertiary: #63608A;
	--os-text-on-primary: #FFFFFF;
	--os-text-on-dark: #EAEAF8;

	--os-border: #DEDCEE;
	--os-border-light: #E9E7F5;
	--os-border-focus: #4B3BD8;

	--os-success: #12805C;
	--os-success-light: #DCF5EA;
	--os-error: #C93B52;
	--os-error-light: #FCE7EA;
	--os-warning: #94660A;
	--os-warning-light: #FBF1DA;
	--os-info: #3A5FE0;

	--os-star-filled: #E09C2E;
	--os-star-empty: #D7D5E6;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(10, 9, 26, 0.55);
	--os-overlay-light: rgba(10, 9, 26, 0.35);

	--os-shadow-sm: 0 1px 2px rgba(20, 18, 43, 0.05), 0 2px 8px rgba(20, 18, 43, 0.05);
	--os-shadow-md: 0 2px 4px rgba(20, 18, 43, 0.06), 0 8px 24px rgba(20, 18, 43, 0.09);
	--os-shadow-lg: 0 4px 8px rgba(20, 18, 43, 0.07), 0 16px 48px rgba(20, 18, 43, 0.14);

	--os-glass-bg: rgba(255, 255, 255, 0.62);
	--os-glass-bg-strong: rgba(255, 255, 255, 0.78);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(20, 18, 43, 0.08);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(20, 18, 43, 0.10), 0 32px 80px rgba(20, 18, 43, 0.18);
	--os-glow-primary: 0 8px 24px rgba(75, 59, 216, 0.20);
	--os-glow-accent: 0 8px 24px rgba(10, 143, 168, 0.18);

	--os-focus-ring-color: #4B3BD8;

	color-scheme: light;
}

/* Deep space: violet plasma over a void-black starfield. */
html[data-ui="v2"][data-theme="nebula"][data-theme-mode="dark"],
html[data-ui="v2"][data-theme="nebula"] [data-theme="dark"],
.theme-preview[data-theme="nebula"][data-theme-mode="dark"] {
	--os-primary: #8F82FF;
	--os-primary-hover: #A49AFF;
	--os-primary-light: #232350;
	--os-primary-dark: #4B3BD8;
	--os-gradient-start: #8F82FF;
	--os-gradient-end: #4636D6;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #2FD5E6;
	--os-accent-hover: #55E0ED;

	--os-background: #070714;
	--os-surface: #101022;
	--os-surface-variant: #16162D;
	--os-surface-elevated: #1B1B38;

	--os-text-primary: #EAEAF8;
	--os-text-secondary: #B4B2D4;
	--os-text-tertiary: #8A88B0;
	--os-text-on-primary: #0D0B24;
	--os-text-on-dark: #EAEAF8;

	--os-border: #26264A;
	--os-border-light: #1E1E3C;
	--os-border-focus: #8F82FF;

	--os-success: #34D9A4;
	--os-success-light: #0E3A2C;
	--os-error: #FF7B84;
	--os-error-light: #3C1922;
	--os-warning: #FFBE4F;
	--os-warning-light: #3A2C10;
	--os-info: #7CA5FF;

	--os-star-filled: #FFBE4F;
	--os-star-empty: #34345A;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(4, 4, 12, 0.74);
	--os-overlay-light: rgba(4, 4, 12, 0.5);

	--os-shadow-sm: 0 1px 2px rgba(2, 2, 10, 0.45), 0 2px 8px rgba(2, 2, 10, 0.35);
	--os-shadow-md: 0 2px 4px rgba(2, 2, 10, 0.5), 0 8px 24px rgba(2, 2, 10, 0.45);
	--os-shadow-lg: 0 4px 8px rgba(2, 2, 10, 0.55), 0 16px 48px rgba(2, 2, 10, 0.55);

	--os-glass-bg: rgba(16, 16, 34, 0.55);
	--os-glass-bg-strong: rgba(16, 16, 34, 0.72);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(160, 160, 255, 0.10);
	--os-glass-highlight: inset 0 1px 0 rgba(180, 180, 255, 0.06);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(2, 2, 10, 0.6), 0 32px 80px rgba(2, 2, 10, 0.65);
	--os-glow-primary: 0 0 24px rgba(143, 130, 255, 0.4);
	--os-glow-accent: 0 0 24px rgba(47, 213, 230, 0.32);

	--os-focus-ring-color: #8F82FF;

	color-scheme: dark;
}

/* ══ VELVET — deep plum & rose, luxurious ══ */

/* Boudoir cream: plum ink on blushed paper, antique gold trim. */
html[data-ui="v2"][data-theme="velvet"],
html[data-ui="v2"][data-theme="velvet"][data-theme-mode="light"],
html[data-ui="v2"][data-theme="velvet"] [data-theme="light"],
.theme-preview[data-theme="velvet"][data-theme-mode="light"] {
	--os-primary: #8E2D55;
	--os-primary-hover: #7B2447;
	--os-primary-light: #F7E4EC;
	--os-primary-dark: #6C1E3C;
	--os-gradient-start: #8E2D55;
	--os-gradient-end: #55152F;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #96702B;
	--os-accent-hover: #855F22;

	--os-background: #FAF1EE;
	--os-surface: #FFFCFA;
	--os-surface-variant: #F3E4DF;
	--os-surface-elevated: #FFFCFA;

	--os-text-primary: #2C1420;
	--os-text-secondary: #5C4250;
	--os-text-tertiary: #7A6270;
	--os-text-on-primary: #FFFFFF;
	--os-text-on-dark: #F6E9EE;

	--os-border: #EBDAD4;
	--os-border-light: #F2E5E0;
	--os-border-focus: #8E2D55;

	--os-success: #1E7D5A;
	--os-success-light: #DFF3EA;
	--os-error: #C23A46;
	--os-error-light: #FAE5E7;
	--os-warning: #96660D;
	--os-warning-light: #F9EFDA;
	--os-info: #6E4FB2;

	--os-star-filled: #C08A28;
	--os-star-empty: #E2D3CD;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(30, 10, 20, 0.55);
	--os-overlay-light: rgba(30, 10, 20, 0.35);

	--os-shadow-sm: 0 1px 2px rgba(44, 20, 32, 0.05), 0 2px 8px rgba(44, 20, 32, 0.05);
	--os-shadow-md: 0 2px 4px rgba(44, 20, 32, 0.06), 0 8px 24px rgba(44, 20, 32, 0.09);
	--os-shadow-lg: 0 4px 8px rgba(44, 20, 32, 0.07), 0 16px 48px rgba(44, 20, 32, 0.14);

	--os-glass-bg: rgba(255, 250, 248, 0.62);
	--os-glass-bg-strong: rgba(255, 250, 248, 0.78);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(44, 20, 32, 0.08);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(44, 20, 32, 0.10), 0 32px 80px rgba(44, 20, 32, 0.18);
	--os-glow-primary: 0 8px 24px rgba(142, 45, 85, 0.20);
	--os-glow-accent: 0 8px 24px rgba(150, 112, 43, 0.18);

	--os-focus-ring-color: #8E2D55;

	color-scheme: light;
}

/* Midnight velvet: rose glow and gold thread on deep plum. */
html[data-ui="v2"][data-theme="velvet"][data-theme-mode="dark"],
html[data-ui="v2"][data-theme="velvet"] [data-theme="dark"],
.theme-preview[data-theme="velvet"][data-theme-mode="dark"] {
	--os-primary: #E58BB0;
	--os-primary-hover: #EDA2C0;
	--os-primary-light: #3C1F2E;
	--os-primary-dark: #C9688F;
	--os-gradient-start: #E58BB0;
	--os-gradient-end: #8E2D55;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #D9B25F;
	--os-accent-hover: #E3C078;

	--os-background: #170D13;
	--os-surface: #211219;
	--os-surface-variant: #2A1821;
	--os-surface-elevated: #321D28;

	--os-text-primary: #F6E9EE;
	--os-text-secondary: #D0B3C0;
	--os-text-tertiary: #A8899A;
	--os-text-on-primary: #2A0E1C;
	--os-text-on-dark: #F6E9EE;

	--os-border: #432A36;
	--os-border-light: #362028;
	--os-border-focus: #E58BB0;

	--os-success: #4BD6A0;
	--os-success-light: #103828;
	--os-error: #FF8585;
	--os-error-light: #3E1720;
	--os-warning: #F5C05A;
	--os-warning-light: #3A2B12;
	--os-info: #B79BE8;

	--os-star-filled: #E9C46A;
	--os-star-empty: #4A3440;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(12, 4, 9, 0.72);
	--os-overlay-light: rgba(12, 4, 9, 0.5);

	--os-shadow-sm: 0 1px 2px rgba(8, 2, 5, 0.45), 0 2px 8px rgba(8, 2, 5, 0.35);
	--os-shadow-md: 0 2px 4px rgba(8, 2, 5, 0.5), 0 8px 24px rgba(8, 2, 5, 0.45);
	--os-shadow-lg: 0 4px 8px rgba(8, 2, 5, 0.55), 0 16px 48px rgba(8, 2, 5, 0.55);

	--os-glass-bg: rgba(33, 18, 25, 0.55);
	--os-glass-bg-strong: rgba(33, 18, 25, 0.72);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(255, 210, 225, 0.08);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 220, 235, 0.05);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(8, 2, 5, 0.6), 0 32px 80px rgba(8, 2, 5, 0.65);
	--os-glow-primary: 0 0 24px rgba(229, 139, 176, 0.35);
	--os-glow-accent: 0 0 24px rgba(217, 178, 95, 0.3);

	--os-focus-ring-color: #E58BB0;

	color-scheme: dark;
}

/* ══ NOIR — disciplined monochrome ink, one cold accent ══ */

/* Case file: printing ink on bone paper, steel-blue evidence tags. */
html[data-ui="v2"][data-theme="noir"],
html[data-ui="v2"][data-theme="noir"][data-theme-mode="light"],
html[data-ui="v2"][data-theme="noir"] [data-theme="light"],
.theme-preview[data-theme="noir"][data-theme-mode="light"] {
	--os-primary: #22201B;
	--os-primary-hover: #35322B;
	--os-primary-light: #E2E0D8;
	--os-primary-dark: #121110;
	--os-gradient-start: #2E2B25;
	--os-gradient-end: #121110;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #2E5F74;
	--os-accent-hover: #264F61;

	--os-background: #EFEDE8;
	--os-surface: #F8F7F3;
	--os-surface-variant: #E4E1DA;
	--os-surface-elevated: #FCFBF8;

	--os-text-primary: #171612;
	--os-text-secondary: #47453F;
	--os-text-tertiary: #66645B;
	--os-text-on-primary: #F8F7F3;
	--os-text-on-dark: #ECEAE2;

	--os-border: #D8D5CC;
	--os-border-light: #E5E2DA;
	--os-border-focus: #2E5F74;

	--os-success: #2E6B4F;
	--os-success-light: #E0EEE6;
	--os-error: #A83A32;
	--os-error-light: #F6E4E2;
	--os-warning: #83600F;
	--os-warning-light: #F3ECD8;
	--os-info: #33627E;

	--os-star-filled: #A87F24;
	--os-star-empty: #D3D0C6;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(15, 14, 10, 0.55);
	--os-overlay-light: rgba(15, 14, 10, 0.35);

	--os-shadow-sm: 0 1px 2px rgba(23, 22, 18, 0.06), 0 2px 8px rgba(23, 22, 18, 0.05);
	--os-shadow-md: 0 2px 4px rgba(23, 22, 18, 0.07), 0 8px 24px rgba(23, 22, 18, 0.09);
	--os-shadow-lg: 0 4px 8px rgba(23, 22, 18, 0.08), 0 16px 48px rgba(23, 22, 18, 0.14);

	--os-glass-bg: rgba(248, 247, 243, 0.62);
	--os-glass-bg-strong: rgba(248, 247, 243, 0.78);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(23, 22, 18, 0.10);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.55);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(23, 22, 18, 0.11), 0 32px 80px rgba(23, 22, 18, 0.18);
	--os-glow-primary: 0 8px 24px rgba(34, 32, 27, 0.18);
	--os-glow-accent: 0 8px 24px rgba(46, 95, 116, 0.2);

	--os-focus-ring-color: #2E5F74;

	color-scheme: light;
}

/* After hours: bone type on ink black, the accent stays cold. */
html[data-ui="v2"][data-theme="noir"][data-theme-mode="dark"],
html[data-ui="v2"][data-theme="noir"] [data-theme="dark"],
.theme-preview[data-theme="noir"][data-theme-mode="dark"] {
	--os-primary: #E0DCCE;
	--os-primary-hover: #EDEADF;
	--os-primary-light: #2A2A26;
	--os-primary-dark: #C9C4B2;
	--os-gradient-start: #E0DCCE;
	--os-gradient-end: #8F8B7C;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #6FB3CC;
	--os-accent-hover: #8CC4D9;

	--os-background: #0C0C0B;
	--os-surface: #151513;
	--os-surface-variant: #1C1C1A;
	--os-surface-elevated: #232320;

	--os-text-primary: #ECEAE2;
	--os-text-secondary: #B5B2A6;
	--os-text-tertiary: #8A887D;
	--os-text-on-primary: #171612;
	--os-text-on-dark: #ECEAE2;

	--os-border: #2E2E2A;
	--os-border-light: #232320;
	--os-border-focus: #6FB3CC;

	--os-success: #4EC98F;
	--os-success-light: #12302A;
	--os-error: #FF8177;
	--os-error-light: #38191B;
	--os-warning: #E8B54A;
	--os-warning-light: #332811;
	--os-info: #7FB6D9;

	--os-star-filled: #E8B54A;
	--os-star-empty: #33332E;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(3, 3, 2, 0.74);
	--os-overlay-light: rgba(3, 3, 2, 0.5);

	--os-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
	--os-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.45);
	--os-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.55), 0 16px 48px rgba(0, 0, 0, 0.55);

	--os-glass-bg: rgba(21, 21, 19, 0.55);
	--os-glass-bg-strong: rgba(21, 21, 19, 0.74);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(236, 234, 226, 0.08);
	--os-glass-highlight: inset 0 1px 0 rgba(236, 234, 226, 0.05);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.6), 0 32px 80px rgba(0, 0, 0, 0.65);
	--os-glow-primary: 0 0 24px rgba(224, 220, 206, 0.2);
	--os-glow-accent: 0 0 24px rgba(111, 179, 204, 0.28);

	--os-focus-ring-color: #6FB3CC;

	color-scheme: dark;
}

/* ══ PARCHMENT — warm paper & sepia, literary ══ */

/* Manuscript: sepia ink on aged paper, rubricated red accents. */
html[data-ui="v2"][data-theme="parchment"],
html[data-ui="v2"][data-theme="parchment"][data-theme-mode="light"],
html[data-ui="v2"][data-theme="parchment"] [data-theme="light"],
.theme-preview[data-theme="parchment"][data-theme-mode="light"] {
	--os-primary: #6B4A1A;
	--os-primary-hover: #5A3D14;
	--os-primary-light: #EFE2C6;
	--os-primary-dark: #4E350F;
	--os-gradient-start: #7A5522;
	--os-gradient-end: #45300D;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #9C3D22;
	--os-accent-hover: #86331B;

	--os-background: #F4E9D4;
	--os-surface: #FBF4E4;
	--os-surface-variant: #ECDFC0;
	--os-surface-elevated: #FDF8EC;

	--os-text-primary: #241A0C;
	--os-text-secondary: #55452C;
	--os-text-tertiary: #6F5F42;
	--os-text-on-primary: #FBF4E4;
	--os-text-on-dark: #F0E4C8;

	--os-border: #E0D2B2;
	--os-border-light: #EADDC2;
	--os-border-focus: #6B4A1A;

	--os-success: #4E6B1C;
	--os-success-light: #E8EFD2;
	--os-error: #A83A22;
	--os-error-light: #F5E2D8;
	--os-warning: #855A08;
	--os-warning-light: #F1E5C2;
	--os-info: #325FA8;

	--os-star-filled: #A8770E;
	--os-star-empty: #D9CBA8;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(30, 22, 8, 0.55);
	--os-overlay-light: rgba(30, 22, 8, 0.35);

	--os-shadow-sm: 0 1px 2px rgba(36, 26, 12, 0.06), 0 2px 8px rgba(36, 26, 12, 0.05);
	--os-shadow-md: 0 2px 4px rgba(36, 26, 12, 0.07), 0 8px 24px rgba(36, 26, 12, 0.09);
	--os-shadow-lg: 0 4px 8px rgba(36, 26, 12, 0.08), 0 16px 48px rgba(36, 26, 12, 0.14);

	--os-glass-bg: rgba(251, 244, 228, 0.62);
	--os-glass-bg-strong: rgba(251, 244, 228, 0.78);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(36, 26, 12, 0.10);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 252, 240, 0.6);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(36, 26, 12, 0.11), 0 32px 80px rgba(36, 26, 12, 0.18);
	--os-glow-primary: 0 8px 24px rgba(107, 74, 26, 0.2);
	--os-glow-accent: 0 8px 24px rgba(156, 61, 34, 0.18);

	--os-focus-ring-color: #6B4A1A;

	color-scheme: light;
}

/* Candlelit study: gilt lettering and ember light on old oak. */
html[data-ui="v2"][data-theme="parchment"][data-theme-mode="dark"],
html[data-ui="v2"][data-theme="parchment"] [data-theme="dark"],
.theme-preview[data-theme="parchment"][data-theme-mode="dark"] {
	--os-primary: #D9BC84;
	--os-primary-hover: #E5CB9B;
	--os-primary-light: #3A2F1A;
	--os-primary-dark: #C0A468;
	--os-gradient-start: #D9BC84;
	--os-gradient-end: #8A6B38;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #E08560;
	--os-accent-hover: #EA9B7B;

	--os-background: #16110A;
	--os-surface: #201910;
	--os-surface-variant: #292013;
	--os-surface-elevated: #322817;

	--os-text-primary: #F0E4C8;
	--os-text-secondary: #C7B694;
	--os-text-tertiary: #9C8C6C;
	--os-text-on-primary: #241A0C;
	--os-text-on-dark: #F0E4C8;

	--os-border: #40351F;
	--os-border-light: #322817;
	--os-border-focus: #D9BC84;

	--os-success: #A4C462;
	--os-success-light: #26300F;
	--os-error: #FF9273;
	--os-error-light: #3C1E14;
	--os-warning: #EEC463;
	--os-warning-light: #3A2E10;
	--os-info: #8FB0E8;

	--os-star-filled: #EEC463;
	--os-star-empty: #453A22;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(8, 6, 2, 0.72);
	--os-overlay-light: rgba(8, 6, 2, 0.5);

	--os-shadow-sm: 0 1px 2px rgba(4, 3, 0, 0.45), 0 2px 8px rgba(4, 3, 0, 0.35);
	--os-shadow-md: 0 2px 4px rgba(4, 3, 0, 0.5), 0 8px 24px rgba(4, 3, 0, 0.45);
	--os-shadow-lg: 0 4px 8px rgba(4, 3, 0, 0.55), 0 16px 48px rgba(4, 3, 0, 0.55);

	--os-glass-bg: rgba(32, 25, 16, 0.55);
	--os-glass-bg-strong: rgba(32, 25, 16, 0.72);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(240, 228, 200, 0.09);
	--os-glass-highlight: inset 0 1px 0 rgba(240, 228, 200, 0.05);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(4, 3, 0, 0.6), 0 32px 80px rgba(4, 3, 0, 0.65);
	--os-glow-primary: 0 0 24px rgba(217, 188, 132, 0.3);
	--os-glow-accent: 0 0 24px rgba(224, 133, 96, 0.28);

	--os-focus-ring-color: #D9BC84;

	color-scheme: dark;
}

/* ══ QUILL — classic ink-blue on cream ══ */

/* Fountain pen: blue-black ink on cream stock, a brass nib. */
html[data-ui="v2"][data-theme="quill"],
html[data-ui="v2"][data-theme="quill"][data-theme-mode="light"],
html[data-ui="v2"][data-theme="quill"] [data-theme="light"],
.theme-preview[data-theme="quill"][data-theme-mode="light"] {
	--os-primary: #1E4468;
	--os-primary-hover: #173854;
	--os-primary-light: #E2EAF2;
	--os-primary-dark: #12314E;
	--os-gradient-start: #23507A;
	--os-gradient-end: #122E48;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #8F6E1F;
	--os-accent-hover: #7C5E18;

	--os-background: #FAF6EB;
	--os-surface: #FFFDF6;
	--os-surface-variant: #F1EBD8;
	--os-surface-elevated: #FFFDF6;

	--os-text-primary: #14202E;
	--os-text-secondary: #42536A;
	--os-text-tertiary: #5E6F86;
	--os-text-on-primary: #FFFFFF;
	--os-text-on-dark: #EAE4D2;

	--os-border: #E4DCC8;
	--os-border-light: #EEE8D6;
	--os-border-focus: #1E4468;

	--os-success: #22704E;
	--os-success-light: #DEF0E4;
	--os-error: #B03A30;
	--os-error-light: #F8E5E2;
	--os-warning: #8E6608;
	--os-warning-light: #F6ECD2;
	--os-info: #2C5FA8;

	--os-star-filled: #BE8E1E;
	--os-star-empty: #DCD4BE;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(12, 20, 30, 0.55);
	--os-overlay-light: rgba(12, 20, 30, 0.35);

	--os-shadow-sm: 0 1px 2px rgba(20, 32, 46, 0.05), 0 2px 8px rgba(20, 32, 46, 0.05);
	--os-shadow-md: 0 2px 4px rgba(20, 32, 46, 0.06), 0 8px 24px rgba(20, 32, 46, 0.09);
	--os-shadow-lg: 0 4px 8px rgba(20, 32, 46, 0.07), 0 16px 48px rgba(20, 32, 46, 0.14);

	--os-glass-bg: rgba(255, 253, 246, 0.62);
	--os-glass-bg-strong: rgba(255, 253, 246, 0.78);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(20, 32, 46, 0.08);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(20, 32, 46, 0.10), 0 32px 80px rgba(20, 32, 46, 0.18);
	--os-glow-primary: 0 8px 24px rgba(30, 68, 104, 0.2);
	--os-glow-accent: 0 8px 24px rgba(143, 110, 31, 0.18);

	--os-focus-ring-color: #1E4468;

	color-scheme: light;
}

/* Midnight ink: cream type in an inkwell-blue night. */
html[data-ui="v2"][data-theme="quill"][data-theme-mode="dark"],
html[data-ui="v2"][data-theme="quill"] [data-theme="dark"],
.theme-preview[data-theme="quill"][data-theme-mode="dark"] {
	--os-primary: #8FB8E4;
	--os-primary-hover: #A6C7EC;
	--os-primary-light: #1E3348;
	--os-primary-dark: #6E9CC9;
	--os-gradient-start: #8FB8E4;
	--os-gradient-end: #3A6890;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #D9B25A;
	--os-accent-hover: #E4C176;

	--os-background: #0D1320;
	--os-surface: #141E2C;
	--os-surface-variant: #1A2738;
	--os-surface-elevated: #213042;

	--os-text-primary: #EAE4D2;
	--os-text-secondary: #C2BCAA;
	--os-text-tertiary: #94937E;
	--os-text-on-primary: #0D1B2A;
	--os-text-on-dark: #EAE4D2;

	--os-border: #2A3A4E;
	--os-border-light: #22303F;
	--os-border-focus: #8FB8E4;

	--os-success: #4CC896;
	--os-success-light: #0F3324;
	--os-error: #FF8A78;
	--os-error-light: #3A1B18;
	--os-warning: #E9BC55;
	--os-warning-light: #34290F;
	--os-info: #86AEE8;

	--os-star-filled: #E9BC55;
	--os-star-empty: #33424F;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(4, 8, 14, 0.72);
	--os-overlay-light: rgba(4, 8, 14, 0.5);

	--os-shadow-sm: 0 1px 2px rgba(2, 5, 9, 0.45), 0 2px 8px rgba(2, 5, 9, 0.35);
	--os-shadow-md: 0 2px 4px rgba(2, 5, 9, 0.5), 0 8px 24px rgba(2, 5, 9, 0.45);
	--os-shadow-lg: 0 4px 8px rgba(2, 5, 9, 0.55), 0 16px 48px rgba(2, 5, 9, 0.55);

	--os-glass-bg: rgba(20, 30, 44, 0.55);
	--os-glass-bg-strong: rgba(20, 30, 44, 0.72);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(234, 228, 210, 0.08);
	--os-glass-highlight: inset 0 1px 0 rgba(234, 228, 210, 0.05);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(2, 5, 9, 0.6), 0 32px 80px rgba(2, 5, 9, 0.65);
	--os-glow-primary: 0 0 24px rgba(143, 184, 228, 0.3);
	--os-glow-accent: 0 0 24px rgba(217, 178, 90, 0.28);

	--os-focus-ring-color: #8FB8E4;

	color-scheme: dark;
}

/* ══ AETHER — ethereal cyan-lavender, the glass showcase ══ */

/* Morning mist: periwinkle ink in icy light; glass turns thinner
 * and blurrier here than anywhere else (alphas down, blur up) —
 * still zero new backdrop-filter rules, tokens only. */
html[data-ui="v2"][data-theme="aether"],
html[data-ui="v2"][data-theme="aether"][data-theme-mode="light"],
html[data-ui="v2"][data-theme="aether"] [data-theme="light"],
.theme-preview[data-theme="aether"][data-theme-mode="light"] {
	--os-primary: #5450D6;
	--os-primary-hover: #4643C0;
	--os-primary-light: #E8E8FB;
	--os-primary-dark: #3B38A8;
	--os-gradient-start: #5450D6;
	--os-gradient-end: #2F5EB8;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #0A8FB0;
	--os-accent-hover: #0B7D9A;

	--os-background: #F3F5FB;
	--os-surface: #FDFDFF;
	--os-surface-variant: #E9EDF8;
	--os-surface-elevated: #FFFFFF;

	--os-text-primary: #191830;
	--os-text-secondary: #4B4A68;
	--os-text-tertiary: #64648C;
	--os-text-on-primary: #FFFFFF;
	--os-text-on-dark: #EDF0FB;

	--os-border: #DEE2F0;
	--os-border-light: #E9ECF6;
	--os-border-focus: #5450D6;

	--os-success: #0E8070;
	--os-success-light: #DDF4EF;
	--os-error: #CC4258;
	--os-error-light: #FBE6EA;
	--os-warning: #91680A;
	--os-warning-light: #F8F0DA;
	--os-info: #3E6AE0;

	--os-star-filled: #E0A23A;
	--os-star-empty: #D6DAE8;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(12, 12, 28, 0.5);
	--os-overlay-light: rgba(12, 12, 28, 0.32);

	--os-shadow-sm: 0 1px 2px rgba(25, 24, 48, 0.04), 0 2px 8px rgba(25, 24, 48, 0.05);
	--os-shadow-md: 0 2px 4px rgba(25, 24, 48, 0.05), 0 8px 24px rgba(25, 24, 48, 0.08);
	--os-shadow-lg: 0 4px 8px rgba(25, 24, 48, 0.06), 0 16px 48px rgba(25, 24, 48, 0.13);

	--os-glass-bg: rgba(255, 255, 255, 0.45);
	--os-glass-bg-strong: rgba(255, 255, 255, 0.66);
	--os-glass-blur: 28px;
	--os-glass-border: rgba(84, 80, 214, 0.14);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(25, 24, 48, 0.09), 0 32px 80px rgba(25, 24, 48, 0.16);
	--os-glow-primary: 0 8px 24px rgba(84, 80, 214, 0.22);
	--os-glow-accent: 0 8px 24px rgba(10, 143, 176, 0.2);

	--os-focus-ring-color: #5450D6;

	color-scheme: light;
}

/* Aurora veil: lavender light through cyan glass on deep indigo. */
html[data-ui="v2"][data-theme="aether"][data-theme-mode="dark"],
html[data-ui="v2"][data-theme="aether"] [data-theme="dark"],
.theme-preview[data-theme="aether"][data-theme-mode="dark"] {
	--os-primary: #96A0FF;
	--os-primary-hover: #ACB4FF;
	--os-primary-light: #232A52;
	--os-primary-dark: #7580E8;
	--os-gradient-start: #8F9DFF;
	--os-gradient-end: #3ECBDD;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #46DCE8;
	--os-accent-hover: #6AE5EE;

	--os-background: #0A0D1C;
	--os-surface: #121627;
	--os-surface-variant: #181D33;
	--os-surface-elevated: #1E2440;

	--os-text-primary: #EDF0FB;
	--os-text-secondary: #B7BCDC;
	--os-text-tertiary: #8B90B4;
	--os-text-on-primary: #0E1230;
	--os-text-on-dark: #EDF0FB;

	--os-border: #272E52;
	--os-border-light: #1F2542;
	--os-border-focus: #96A0FF;

	--os-success: #3EDCB4;
	--os-success-light: #0D3A30;
	--os-error: #FF8296;
	--os-error-light: #3C1826;
	--os-warning: #FFC55E;
	--os-warning-light: #382C10;
	--os-info: #7FB2FF;

	--os-star-filled: #FFC55E;
	--os-star-empty: #333A5E;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(5, 7, 16, 0.66);
	--os-overlay-light: rgba(5, 7, 16, 0.44);

	--os-shadow-sm: 0 1px 2px rgba(2, 3, 9, 0.4), 0 2px 8px rgba(2, 3, 9, 0.3);
	--os-shadow-md: 0 2px 4px rgba(2, 3, 9, 0.45), 0 8px 24px rgba(2, 3, 9, 0.4);
	--os-shadow-lg: 0 4px 8px rgba(2, 3, 9, 0.5), 0 16px 48px rgba(2, 3, 9, 0.5);

	--os-glass-bg: rgba(18, 22, 39, 0.42);
	--os-glass-bg-strong: rgba(18, 22, 39, 0.62);
	--os-glass-blur: 28px;
	--os-glass-border: rgba(150, 160, 255, 0.16);
	--os-glass-highlight: inset 0 1px 0 rgba(190, 200, 255, 0.12);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(2, 3, 9, 0.55), 0 32px 80px rgba(2, 3, 9, 0.6);
	--os-glow-primary: 0 0 24px rgba(150, 160, 255, 0.45);
	--os-glow-accent: 0 0 24px rgba(70, 220, 232, 0.35);

	--os-focus-ring-color: #96A0FF;

	color-scheme: dark;
}

/* ══ CRIMSON — deep red & ember, dramatic ══ */

/* Daylight manuscript: blood-red ink on smoked paper. */
html[data-ui="v2"][data-theme="crimson"],
html[data-ui="v2"][data-theme="crimson"][data-theme-mode="light"],
html[data-ui="v2"][data-theme="crimson"] [data-theme="light"],
.theme-preview[data-theme="crimson"][data-theme-mode="light"] {
	--os-primary: #9A1B23;
	--os-primary-hover: #841219;
	--os-primary-light: #F5DEDD;
	--os-primary-dark: #6E0F14;
	--os-gradient-start: #A32028;
	--os-gradient-end: #520A0E;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #A4491A;
	--os-accent-hover: #8F3D13;

	--os-background: #F0EAE2;
	--os-surface: #FAF6F0;
	--os-surface-variant: #E6DED0;
	--os-surface-elevated: #FCF9F4;

	--os-text-primary: #1E1412;
	--os-text-secondary: #52443E;
	--os-text-tertiary: #6F5F58;
	--os-text-on-primary: #FFFFFF;
	--os-text-on-dark: #F4E3D8;

	--os-border: #DFD5C6;
	--os-border-light: #E9E1D4;
	--os-border-focus: #9A1B23;

	--os-success: #37704A;
	--os-success-light: #E1EEDF;
	--os-error: #B3362B;
	--os-error-light: #F8E3DE;
	--os-warning: #8E5E06;
	--os-warning-light: #F4EAD2;
	--os-info: #3E5BAA;

	--os-star-filled: #C08428;
	--os-star-empty: #D8CDBC;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(20, 10, 8, 0.55);
	--os-overlay-light: rgba(20, 10, 8, 0.35);

	--os-shadow-sm: 0 1px 2px rgba(30, 20, 18, 0.06), 0 2px 8px rgba(30, 20, 18, 0.05);
	--os-shadow-md: 0 2px 4px rgba(30, 20, 18, 0.07), 0 8px 24px rgba(30, 20, 18, 0.09);
	--os-shadow-lg: 0 4px 8px rgba(30, 20, 18, 0.08), 0 16px 48px rgba(30, 20, 18, 0.14);

	--os-glass-bg: rgba(250, 246, 240, 0.62);
	--os-glass-bg-strong: rgba(250, 246, 240, 0.78);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(30, 20, 18, 0.10);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 252, 248, 0.6);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(30, 20, 18, 0.11), 0 32px 80px rgba(30, 20, 18, 0.18);
	--os-glow-primary: 0 8px 24px rgba(154, 27, 35, 0.2);
	--os-glow-accent: 0 8px 24px rgba(164, 73, 26, 0.18);

	--os-focus-ring-color: #9A1B23;

	color-scheme: light;
}

/* Embers: the candle just blew out — heat still in the walls. */
html[data-ui="v2"][data-theme="crimson"][data-theme-mode="dark"],
html[data-ui="v2"][data-theme="crimson"] [data-theme="dark"],
.theme-preview[data-theme="crimson"][data-theme-mode="dark"] {
	--os-primary: #E86452;
	--os-primary-hover: #EF7D6C;
	--os-primary-light: #3C1B16;
	--os-primary-dark: #C74534;
	--os-gradient-start: #E86452;
	--os-gradient-end: #8E1F1A;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #E8A050;
	--os-accent-hover: #EFB36C;

	--os-background: #120808;
	--os-surface: #1C0F0E;
	--os-surface-variant: #251413;
	--os-surface-elevated: #2E1A18;

	--os-text-primary: #F4E3D8;
	--os-text-secondary: #CCAF9F;
	--os-text-tertiary: #A08578;
	--os-text-on-primary: #240A06;
	--os-text-on-dark: #F4E3D8;

	--os-border: #442622;
	--os-border-light: #331B18;
	--os-border-focus: #E86452;

	--os-success: #56C990;
	--os-success-light: #0F3322;
	--os-error: #FF9282;
	--os-error-light: #401A16;
	--os-warning: #F0B855;
	--os-warning-light: #3A2A10;
	--os-info: #8FA8EE;

	--os-star-filled: #F0B855;
	--os-star-empty: #4C2E28;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(8, 3, 2, 0.76);
	--os-overlay-light: rgba(8, 3, 2, 0.52);

	--os-shadow-sm: 0 1px 2px rgba(5, 1, 1, 0.45), 0 2px 8px rgba(5, 1, 1, 0.35);
	--os-shadow-md: 0 2px 4px rgba(5, 1, 1, 0.5), 0 8px 24px rgba(5, 1, 1, 0.45);
	--os-shadow-lg: 0 4px 8px rgba(5, 1, 1, 0.55), 0 16px 48px rgba(5, 1, 1, 0.55);

	--os-glass-bg: rgba(28, 15, 14, 0.55);
	--os-glass-bg-strong: rgba(28, 15, 14, 0.74);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(244, 227, 216, 0.08);
	--os-glass-highlight: inset 0 1px 0 rgba(244, 227, 216, 0.05);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(5, 1, 1, 0.6), 0 32px 80px rgba(5, 1, 1, 0.65);
	--os-glow-primary: 0 0 24px rgba(232, 100, 82, 0.4);
	--os-glow-accent: 0 0 24px rgba(232, 160, 80, 0.32);

	--os-focus-ring-color: #E86452;

	color-scheme: dark;
}

/* ══ DEFAULT — Theme Studio preview duplicates ══
 * The canonical default palette lives in ui-v2.css; preview tiles for it need
 * a self-contained anchor here because the ui-v2.css blocks are keyed on <html>
 * attributes a tile can't carry. Values below are literal copies of ui-v2.css's
 * light/dark blocks — KEEP IN LOCKSTEP with that file. */
.theme-preview[data-theme="default"][data-theme-mode="light"] {
	--os-primary: #6D4AFF;
	--os-primary-hover: #5B3AE6;
	--os-primary-light: #EDE8FF;
	--os-primary-dark: #4C2FD6;
	--os-gradient-start: #6D4AFF;
	--os-gradient-end: #3E1F9E;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #0E9F85;
	--os-accent-hover: #0C8A73;

	--os-background: #F7F4EE;
	--os-surface: #FFFFFF;
	--os-surface-variant: #F1EDE4;
	--os-surface-elevated: #FFFFFF;

	--os-text-primary: #17141F;
	--os-text-secondary: #4A4458;
	--os-text-tertiary: #6E6880;
	--os-text-on-primary: #FFFFFF;
	--os-text-on-dark: #F2EFF8;

	--os-border: #E4DFD3;
	--os-border-light: #EFEBE1;
	--os-border-focus: #6D4AFF;

	--os-success: #0E7C68;
	--os-success-light: #DFF7F1;
	--os-error: #CC3B3B;
	--os-error-light: #FCE8E8;
	--os-warning: #9A6B00;
	--os-warning-light: #FBF1DC;
	--os-info: #2F6BE4;

	--os-star-filled: #E8A33D;
	--os-star-empty: #D9D3C7;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(13, 11, 22, 0.55);
	--os-overlay-light: rgba(13, 11, 22, 0.35);

	--os-shadow-sm: 0 1px 2px rgba(23, 20, 31, 0.05), 0 2px 8px rgba(23, 20, 31, 0.05);
	--os-shadow-md: 0 2px 4px rgba(23, 20, 31, 0.06), 0 8px 24px rgba(23, 20, 31, 0.09);
	--os-shadow-lg: 0 4px 8px rgba(23, 20, 31, 0.07), 0 16px 48px rgba(23, 20, 31, 0.14);

	--os-glass-bg: rgba(255, 255, 255, 0.62);
	--os-glass-bg-strong: rgba(255, 255, 255, 0.78);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(23, 20, 31, 0.08);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(23, 20, 31, 0.10), 0 32px 80px rgba(23, 20, 31, 0.18);
	--os-glow-primary: 0 8px 24px rgba(109, 74, 255, 0.18);
	--os-glow-accent: 0 8px 24px rgba(14, 159, 133, 0.18);

	--os-focus-ring-color: #6D4AFF;

	color-scheme: light;
}

.theme-preview[data-theme="default"][data-theme-mode="dark"] {
	--os-primary: #8B70FF;
	--os-primary-hover: #9D85FF;
	--os-primary-light: #2A2344;
	--os-primary-dark: #6D4AFF;
	--os-gradient-start: #8B70FF;
	--os-gradient-end: #4C2FD6;
	--os-gradient: linear-gradient(135deg, var(--os-gradient-start), var(--os-gradient-end));
	--os-accent: #2BD4B4;
	--os-accent-hover: #4BE0C4;

	--os-background: #0F0D18;
	--os-surface: #171422;
	--os-surface-variant: #1E1A2C;
	--os-surface-elevated: #231E33;

	--os-text-primary: #F2EFF8;
	--os-text-secondary: #B9B2CC;
	--os-text-tertiary: #8D86A6;
	--os-text-on-primary: #14102A;
	--os-text-on-dark: #F2EFF8;

	--os-border: #2C2740;
	--os-border-light: #241F36;
	--os-border-focus: #8B70FF;

	--os-success: #2BD4B4;
	--os-success-light: #123B33;
	--os-error: #FF7A70;
	--os-error-light: #3C1A20;
	--os-warning: #FFB94D;
	--os-warning-light: #3A2B12;
	--os-info: #6E9BFF;

	--os-star-filled: #FFB94D;
	--os-star-empty: #3A3450;
	--os-tab-active: var(--os-primary);
	--os-tab-inactive: var(--os-text-tertiary);
	--os-overlay: rgba(6, 5, 12, 0.72);
	--os-overlay-light: rgba(6, 5, 12, 0.5);

	--os-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
	--os-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.4);
	--os-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.5);

	--os-glass-bg: rgba(23, 20, 34, 0.55);
	--os-glass-bg-strong: rgba(23, 20, 34, 0.72);
	--os-glass-blur: 16px;
	--os-glass-border: rgba(255, 255, 255, 0.08);
	--os-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);

	--os-elevation-1: var(--os-shadow-sm);
	--os-elevation-2: var(--os-shadow-md);
	--os-elevation-3: var(--os-shadow-lg);
	--os-elevation-4: 0 8px 16px rgba(0, 0, 0, 0.55), 0 32px 80px rgba(0, 0, 0, 0.6);
	--os-glow-primary: 0 0 24px rgba(139, 112, 255, 0.35);
	--os-glow-accent: 0 0 24px rgba(43, 212, 180, 0.3);

	--os-focus-ring-color: #8B70FF;

	color-scheme: dark;
}