:root,
html[data-theme="dark"] {
    --mws-radius: 6px;
    --shell-pad: clamp(12px, 1.6vw, 24px);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --mws-font-body: "Segoe UI Variable Text", "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --mws-font-heading: "Bahnschrift", "Sora", "Segoe UI Variable Display", sans-serif;
    --mws-bg: #06020c;
    --mws-surface: #12071c;
    --mws-surface-soft: rgba(30, 14, 46, 0.92);
    --mws-text: #f8f3ff;
    --mws-text-muted: #baa8d5;
    --mws-border: rgba(157, 121, 255, 0.20);
    --mws-primary: #8b4dff;
    --mws-primary-rgb: 139, 77, 255;
    --mws-accent: #c8a7ff;
    --mws-accent-rgb: 200, 167, 255;
    --mws-card-bg: rgba(17, 8, 28, 0.88);
    --mws-topbar-bg: rgba(8, 3, 14, 0.82);
    --mws-shadow: 0 24px 52px rgba(2, 0, 7, 0.46);
    --mws-panel-glow: 0 0 32px rgba(139, 77, 255, 0.12);
    --mws-workspace-glow: 0 0 46px rgba(139, 77, 255, 0.14);
    --mws-grid: rgba(248, 240, 255, 0.05);
    --mws-success: #38d996;
    --mws-warning: #f2b84b;
    --mws-danger: #ff6b88;
    --mws-status-success-text: #d9ffee;
    --mws-status-warning-text: #fff0cf;
    --mws-status-danger-text: #ffd9df;
    --mws-status-info-text: #d9e8ff;
    --mws-status-orange-text: #ffeccc;
    --mws-moon: #8b5cf6;
    --mws-sun: #f6c453;
    color-scheme: dark;
}

html[data-theme="light"] {
    --mws-bg: #fcfaff;
    --mws-surface: rgba(255, 255, 255, 0.66);
    --mws-surface-soft: rgba(243, 236, 255, 0.58);
    --mws-text: #2f164d;
    --mws-text-muted: #6e5a90;
    --mws-border: rgba(89, 49, 145, 0.14);
    --mws-primary: #7331ff;
    --mws-primary-rgb: 115, 49, 255;
    --mws-accent: #431c84;
    --mws-accent-rgb: 67, 28, 132;
    --mws-card-bg: rgba(255, 255, 255, 0.62);
    --mws-topbar-bg: rgba(255, 255, 255, 0.68);
    --mws-shadow: 0 20px 46px rgba(69, 27, 129, 0.12);
    --mws-panel-glow: 0 0 24px rgba(115, 49, 255, 0.08);
    --mws-workspace-glow: 0 0 34px rgba(115, 49, 255, 0.10);
    --mws-grid: rgba(92, 56, 143, 0.06);
    --mws-status-success-text: #08764a;
    --mws-status-warning-text: #8b5a00;
    --mws-status-danger-text: #a91e3c;
    --mws-status-info-text: #1557b7;
    --mws-status-orange-text: #8a4f00;
    --mws-moon: #8b5cf6;
    --mws-sun: #f6c453;
    color-scheme: light;
}


/* ================================================================
   M-OS USER COLOR THEMES
   Persisted per account through portal_settings.color_scheme.
   ================================================================ */

html[data-color="purple"][data-theme="dark"] {
    --mws-bg:#06020c; --mws-surface:#12071c; --mws-surface-soft:rgba(30,14,46,.92);
    --mws-text:#f8f3ff; --mws-text-muted:#baa8d5; --mws-border:rgba(157,121,255,.20);
    --mws-primary:#8b4dff; --mws-primary-rgb:139,77,255; --mws-accent:#c8a7ff; --mws-accent-rgb:200,167,255;
    --mws-card-bg:rgba(17,8,28,.88); --mws-topbar-bg:rgba(8,3,14,.82);
    --mws-shadow:0 24px 52px rgba(2,0,7,.46); --mws-panel-glow:0 0 32px rgba(139,77,255,.12);
    --mws-workspace-glow:0 0 46px rgba(139,77,255,.14); --mws-grid:rgba(248,240,255,.05);
}
html[data-color="purple"][data-theme="light"] {
    --mws-bg:#fcfaff; --mws-surface:rgba(255,255,255,.66); --mws-surface-soft:rgba(243,236,255,.58);
    --mws-text:#2f164d; --mws-text-muted:#6e5a90; --mws-border:rgba(89,49,145,.14);
    --mws-primary:#7331ff; --mws-primary-rgb:115,49,255; --mws-accent:#431c84; --mws-accent-rgb:67,28,132;
    --mws-card-bg:rgba(255,255,255,.62); --mws-topbar-bg:rgba(255,255,255,.68);
    --mws-shadow:0 20px 42px rgba(69,27,129,.10); --mws-panel-glow:0 0 24px rgba(115,49,255,.08);
    --mws-workspace-glow:0 0 34px rgba(115,49,255,.10); --mws-grid:rgba(92,56,143,.06);
}
html[data-color="blue"][data-theme="dark"] {
    --mws-bg:#030813; --mws-surface:#081525; --mws-surface-soft:rgba(10,29,51,.92);
    --mws-text:#f1f7ff; --mws-text-muted:#9eb1ca; --mws-border:rgba(90,153,255,.20);
    --mws-primary:#3884ff; --mws-primary-rgb:56,132,255; --mws-accent:#8ebcff; --mws-accent-rgb:142,188,255;
    --mws-card-bg:rgba(6,18,34,.88); --mws-topbar-bg:rgba(3,10,21,.84);
    --mws-shadow:0 24px 52px rgba(0,5,14,.46); --mws-panel-glow:0 0 32px rgba(56,132,255,.12);
    --mws-workspace-glow:0 0 46px rgba(56,132,255,.14); --mws-grid:rgba(220,235,255,.05);
}
html[data-color="blue"][data-theme="light"] {
    --mws-bg:#f8fbff; --mws-surface:rgba(255,255,255,.66); --mws-surface-soft:rgba(237,245,255,.58);
    --mws-text:#102947; --mws-text-muted:#58708f; --mws-border:rgba(23,105,232,.14);
    --mws-primary:#1769e8; --mws-primary-rgb:23,105,232; --mws-accent:#174f9f; --mws-accent-rgb:23,79,159;
    --mws-card-bg:rgba(255,255,255,.62); --mws-topbar-bg:rgba(255,255,255,.68);
    --mws-shadow:0 20px 42px rgba(20,76,150,.10); --mws-panel-glow:0 0 24px rgba(23,105,232,.08);
    --mws-workspace-glow:0 0 34px rgba(23,105,232,.10); --mws-grid:rgba(33,96,175,.06);
}
html[data-color="green"][data-theme="dark"] {
    --mws-bg:#020b08; --mws-surface:#071a13; --mws-surface-soft:rgba(9,38,28,.92);
    --mws-text:#effff8; --mws-text-muted:#9ec8b5; --mws-border:rgba(55,208,142,.20);
    --mws-primary:#28c880; --mws-primary-rgb:40,200,128; --mws-accent:#8ce2bc; --mws-accent-rgb:140,226,188;
    --mws-card-bg:rgba(5,24,17,.88); --mws-topbar-bg:rgba(2,13,9,.84);
    --mws-shadow:0 24px 52px rgba(0,9,5,.44); --mws-panel-glow:0 0 32px rgba(40,200,128,.11);
    --mws-workspace-glow:0 0 46px rgba(40,200,128,.13); --mws-grid:rgba(220,255,240,.05);
}
html[data-color="green"][data-theme="light"] {
    --mws-bg:#f6fcf9; --mws-surface:rgba(255,255,255,.66); --mws-surface-soft:rgba(234,248,241,.58);
    --mws-text:#143b2b; --mws-text-muted:#557a68; --mws-border:rgba(19,138,89,.14);
    --mws-primary:#138a59; --mws-primary-rgb:19,138,89; --mws-accent:#176a49; --mws-accent-rgb:23,106,73;
    --mws-card-bg:rgba(255,255,255,.62); --mws-topbar-bg:rgba(255,255,255,.68);
    --mws-shadow:0 20px 42px rgba(20,109,72,.09); --mws-panel-glow:0 0 24px rgba(19,138,89,.08);
    --mws-workspace-glow:0 0 34px rgba(19,138,89,.09); --mws-grid:rgba(24,119,82,.055);
}
html[data-color="red"][data-theme="dark"] {
    --mws-bg:#0d0305; --mws-surface:#21090e; --mws-surface-soft:rgba(48,13,20,.92);
    --mws-text:#fff4f6; --mws-text-muted:#d1a1a9; --mws-border:rgba(239,70,92,.22);
    --mws-primary:#ef465c; --mws-primary-rgb:239,70,92; --mws-accent:#ff9cab; --mws-accent-rgb:255,156,171;
    --mws-card-bg:rgba(31,7,12,.88); --mws-topbar-bg:rgba(15,3,6,.84);
    --mws-shadow:0 24px 52px rgba(12,0,3,.45); --mws-panel-glow:0 0 32px rgba(239,70,92,.11);
    --mws-workspace-glow:0 0 46px rgba(239,70,92,.13); --mws-grid:rgba(255,230,235,.05);
}
html[data-color="red"][data-theme="light"] {
    --mws-bg:#fff8f8; --mws-surface:rgba(255,255,255,.66); --mws-surface-soft:rgba(255,240,242,.58);
    --mws-text:#4a1720; --mws-text-muted:#865b63; --mws-border:rgba(215,47,72,.14);
    --mws-primary:#d72f48; --mws-primary-rgb:215,47,72; --mws-accent:#8f2133; --mws-accent-rgb:143,33,51;
    --mws-card-bg:rgba(255,255,255,.62); --mws-topbar-bg:rgba(255,255,255,.68);
    --mws-shadow:0 20px 42px rgba(143,33,51,.09); --mws-panel-glow:0 0 24px rgba(215,47,72,.07);
    --mws-workspace-glow:0 0 34px rgba(215,47,72,.09); --mws-grid:rgba(143,33,51,.05);
}
html[data-color="mono"][data-theme="dark"] {
    --mws-bg:#050505; --mws-surface:#131313; --mws-surface-soft:rgba(28,28,28,.94);
    --mws-text:#f7f7f7; --mws-text-muted:#aaa; --mws-border:rgba(255,255,255,.14);
    --mws-primary:#ededed; --mws-primary-rgb:237,237,237; --mws-accent:#bdbdbd; --mws-accent-rgb:189,189,189;
    --mws-card-bg:rgba(18,18,18,.90); --mws-topbar-bg:rgba(8,8,8,.88);
    --mws-shadow:0 24px 52px rgba(0,0,0,.46); --mws-panel-glow:0 0 28px rgba(255,255,255,.055);
    --mws-workspace-glow:0 0 40px rgba(255,255,255,.055); --mws-grid:rgba(255,255,255,.045);
}
html[data-color="mono"][data-theme="light"] {
    --mws-bg:#fff; --mws-surface:rgba(255,255,255,.66); --mws-surface-soft:rgba(241,241,241,.58);
    --mws-text:#111; --mws-text-muted:#666; --mws-border:rgba(0,0,0,.13);
    --mws-primary:#171717; --mws-primary-rgb:23,23,23; --mws-accent:#444; --mws-accent-rgb:68,68,68;
    --mws-card-bg:rgba(255,255,255,.64); --mws-topbar-bg:rgba(255,255,255,.70);
    --mws-shadow:0 20px 42px rgba(0,0,0,.09); --mws-panel-glow:0 0 24px rgba(0,0,0,.04);
    --mws-workspace-glow:0 0 34px rgba(0,0,0,.05); --mws-grid:rgba(0,0,0,.05);
}

/* ================================================================
   M-OS APPEARANCE ENGINE
   Shared visual tokens for every M-OS page/app. Runtime state is
   controlled through data-ui-* attributes on <html> by main.js.
   ================================================================ */
:root {
    --mws-on-primary: #fff;
    --mws-accent-gradient: linear-gradient(135deg, var(--mws-primary), color-mix(in srgb, var(--mws-primary) 62%, var(--mws-accent) 38%));
    --mws-focus-ring: 0 0 0 3px rgba(var(--mws-primary-rgb), .20);
    --mos-glass-blur: 22px;
    --mos-glass-saturate: 138%;
    --mos-motion-fast: 160ms;
    --mos-motion-normal: 220ms;
    --mos-motion-slow: 360ms;
    --mos-motion-ease: cubic-bezier(.2,.75,.25,1);
    --mos-panel-solid: color-mix(in srgb, var(--mws-bg) 78%, var(--mws-surface) 22%);
    --mos-card-solid: color-mix(in srgb, var(--mws-bg) 70%, var(--mws-surface) 30%);
    --mos-control-solid: color-mix(in srgb, var(--mws-bg) 64%, var(--mws-surface) 36%);
    --mos-glass-highlight: rgba(255,255,255,.07);
}

html[data-theme="light"] {
    --mos-panel-solid: color-mix(in srgb, #fff 91%, var(--mws-bg) 9%);
    --mos-card-solid: color-mix(in srgb, #fff 94%, var(--mws-bg) 6%);
    --mos-control-solid: color-mix(in srgb, #fff 90%, var(--mws-bg) 10%);
    --mos-glass-highlight: rgba(255,255,255,.58);
}

html[data-color="mono"][data-theme="dark"] {
    --mws-on-primary: #111;
}

html[data-color="mono"][data-theme="light"] {
    --mws-on-primary: #fff;
}

/* The selected accent drives controls, focus rings, highlights and glows. */
::selection {
    color: var(--mws-on-primary);
    background: var(--mws-primary);
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline-color: var(--mws-primary);
}