/* Site themes: the whole page follows the theme picked in the hero property sheet (site.js sets
   <html data-theme>). Each block overrides the tokens declared in style.css; XP is the default there.
   Colours come from the app's own themes (src/renderer/src/styles/theme-*.css). */

:root[data-theme] body,
:root[data-theme] .desktop,
:root[data-theme] .window,
:root[data-theme] .body,
:root[data-theme] .hero {
  transition:
    background-color 0.35s,
    color 0.35s;
}

/* ---- Modern (macOS) ---------------------------------------------------------------------------- */

:root[data-theme='apple'] {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
  --title-font: var(--font);
  --face: #f5f5f7;
  --face-light: #fff;
  --face-dark: rgba(0, 0, 0, 0.12);
  --border-dark: rgba(0, 0, 0, 0.25);
  --text: #1d1d1f;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --link: #0066cc;
  --link-hover: #0077ed;
  --window-border: transparent;
  --title-gradient: #ececec;
  --title-text: #1d1d1f;
  --title-glyph: #6e6e73;
  --title-shadow: none;
  --title-btn: #dcdcde;
  --title-btn-close: #ff5f57;
  --taskpane-bg: #e8e8ea;
  --task-header: transparent;
  --task-body: transparent;
  --task-header-text: #6e6e73;
  --list-bg: #fff;
  --header-bg: #fff;
  --accent: #007aff;
  --accent-2: #4da3ff;
  --page-bg: #cfd6e2;
  --desktop-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 255, 255, 0.75), transparent 70%);
  --desktop: linear-gradient(180deg, #e9ecf2, #cfd6e2);
  --hero-glow: radial-gradient(ellipse 70% 90% at 15% 0%, rgba(0, 122, 255, 0.12), transparent 60%);
  --hero: linear-gradient(180deg, #fbfbfd, #f0f0f3);
  --hero-text: #1d1d1f;
  --hero-soft: #0066cc;
  --hero-em: #6e6e73;
  --hero-lede: #424245;
  --hero-shadow: none;
  --raised: #fff;
  --pressed: #e8e8ea;
  --btn-border: rgba(0, 0, 0, 0.15);
  --btn-hover: 0 0 0 3px rgba(0, 122, 255, 0.25);
  --btn-default: inset 0 0 0 1px #007aff;
  --field-border: rgba(0, 0, 0, 0.15);
  --field-bg: #fff;
  --line: rgba(0, 0, 0, 0.08);
  --row-line: rgba(0, 0, 0, 0.06);
  --th-line: rgba(0, 0, 0, 0.1);
  --row-hover: #f0f5ff;
  --sheet: #fff;
  --tab-border: rgba(0, 0, 0, 0.15);
  --group-line: linear-gradient(90deg, rgba(0, 0, 0, 0.15), transparent);
  --rule: rgba(0, 122, 255, 0.35);
  --bevel: rgba(0, 0, 0, 0.08);
  --shadow: rgba(0, 0, 0, 0.18);
  --shadow-soft: rgba(0, 0, 0, 0.1);
  --radius: 10px;
}

/* ---- Classic (Windows 98) ---------------------------------------------------------------------- */

:root[data-theme='classic'] {
  --font: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Geneva, sans-serif;
  --display: var(--font);
  --title-font: var(--font);
  --face: #c0c0c0;
  --face-light: #dfdfdf;
  --face-dark: #808080;
  --border-dark: #404040;
  --text: #000;
  --ink: #000;
  --ink-2: #222;
  --muted: #444;
  --link: #000080;
  --link-hover: #0000ff;
  --window-border: #c0c0c0;
  --title-gradient: linear-gradient(90deg, #000080, #1084d0);
  --title-text: #fff;
  --title-glyph: #000;
  --title-shadow: none;
  --title-btn: #c0c0c0;
  --title-btn-close: #c0c0c0;
  --taskpane-bg: #c0c0c0;
  --task-header: #000080;
  --task-body: #dfdfdf;
  --task-header-text: #fff;
  --list-bg: #fff;
  --header-bg: #c0c0c0;
  --accent: #000080;
  --accent-2: #1084d0;
  --page-bg: #008080;
  --desktop-glow: linear-gradient(transparent, transparent);
  --desktop: #008080;
  --hero-glow: linear-gradient(transparent, transparent);
  --hero: linear-gradient(90deg, #000080, #1084d0);
  --hero-text: #fff;
  --hero-soft: #c0c0c0;
  --hero-em: #dfe8ff;
  --hero-lede: #fff;
  --hero-shadow: none;
  --raised: #c0c0c0;
  --pressed: #b4b4b4;
  --btn-border: #000;
  --btn-hover: inset -1px -1px #404040, inset 1px 1px #fff;
  --btn-default: inset -1px -1px #404040, inset 1px 1px #fff, inset 0 0 0 2px #808080;
  --field-border: #808080;
  --field-bg: #fff;
  --line: #c0c0c0;
  --row-line: #e0e0e0;
  --th-line: #808080;
  --row-hover: #e0e0f0;
  --sheet: #c0c0c0;
  --tab-border: #808080;
  --group-line: linear-gradient(90deg, #808080, transparent);
  --rule: #000080;
  --bevel: #fff;
  --shadow: rgba(0, 0, 0, 0.4);
  --shadow-soft: rgba(0, 0, 0, 0.2);
  --radius: 0px;
}

/* ---- Cyberpunk --------------------------------------------------------------------------------- */

:root[data-theme='cyberpunk'] {
  color-scheme: dark;
  --font: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, monospace;
  --display: var(--font);
  --title-font: var(--font);
  --face: #0b0b14;
  --face-light: #12121f;
  --face-dark: #2a2a4a;
  --border-dark: #00f0ff;
  --text: #d1f7ff;
  --ink: #b8e8f2;
  --ink-2: #9ab6c8;
  --muted: #7d8db0;
  --link: #00f0ff;
  --link-hover: #fcee0a;
  --window-border: #00f0ff;
  --title-gradient: #fcee0a;
  --title-text: #0b0b14;
  --title-glyph: #0b0b14;
  --title-shadow: none;
  --title-btn: transparent;
  --title-btn-close: #ff2a6d;
  --taskpane-bg: #12121f;
  --task-header: transparent;
  --task-body: transparent;
  --task-header-text: #ff2a6d;
  --list-bg: #0b0b14;
  --header-bg: #12121f;
  --accent: #ff2a6d;
  --accent-2: #fcee0a;
  --page-bg: #05050a;
  --desktop-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 42, 109, 0.35), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 110%, rgba(0, 240, 255, 0.25), transparent 70%);
  --desktop: linear-gradient(180deg, #14061f, #05050a);
  --hero-glow: radial-gradient(ellipse 70% 90% at 15% 0%, rgba(0, 240, 255, 0.22), transparent 60%);
  --hero: linear-gradient(180deg, #1a0b2e, #0b0b14);
  --hero-text: #fcee0a;
  --hero-soft: #00f0ff;
  --hero-em: #ff2a6d;
  --hero-lede: #d1f7ff;
  --hero-shadow: 0 0 18px rgba(252, 238, 10, 0.35);
  --raised: #12121f;
  --pressed: #1d1d33;
  --btn-border: #00f0ff;
  --btn-hover: 0 0 0 1px #00f0ff, 0 0 12px rgba(0, 240, 255, 0.5);
  --btn-default: 0 0 0 1px #fcee0a, 0 0 12px rgba(252, 238, 10, 0.4);
  --field-border: #2a2a4a;
  --field-bg: #05050a;
  --line: #2a2a4a;
  --row-line: #1a1a2e;
  --th-line: #2a2a4a;
  --row-hover: rgba(0, 240, 255, 0.07);
  --sheet: #0b0b14;
  --tab-border: #2a2a4a;
  --group-line: linear-gradient(90deg, #ff2a6d, transparent);
  --rule: #ff2a6d;
  --bevel: #2a2a4a;
  --shadow: rgba(0, 240, 255, 0.25);
  --shadow-soft: rgba(0, 0, 0, 0.6);
  --radius: 0px;
}

/* ---- FBI --------------------------------------------------------------------------------------- */

:root[data-theme='fbi'] {
  --font: 'Helvetica Neue', Arial, sans-serif;
  --display: var(--font);
  --title-font: var(--font);
  --face: #e9e6dc;
  --face-light: #f6f4ee;
  --face-dark: #a9a390;
  --border-dark: #0b2545;
  --text: #16202e;
  --ink: #16202e;
  --ink-2: #3a4250;
  --muted: #5d6470;
  --link: #13315c;
  --link-hover: #1f4d8c;
  --window-border: #0b2545;
  --title-gradient: linear-gradient(180deg, #13315c, #071a33);
  --title-text: #fff;
  --title-glyph: #c5a253;
  --title-shadow: none;
  --title-btn: #13315c;
  --title-btn-close: #8b1e1e;
  --taskpane-bg: linear-gradient(180deg, #0b2545, #071a33);
  --task-header: #071a33;
  --task-body: #f6f4ee;
  --task-header-text: #c5a253;
  --list-bg: #fff;
  --header-bg: linear-gradient(180deg, #f3f1ea, #e2ddcd);
  --accent: #c5a253;
  --accent-2: #e0c787;
  --page-bg: #071a33;
  --desktop-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(197, 162, 83, 0.22), transparent 70%);
  --desktop: linear-gradient(180deg, #13315c, #071a33);
  --hero-glow: radial-gradient(ellipse 70% 90% at 15% 0%, rgba(197, 162, 83, 0.18), transparent 60%);
  --hero: linear-gradient(180deg, #13315c, #0b2545);
  --hero-text: #fff;
  --hero-soft: #c5a253;
  --hero-em: #e0c787;
  --hero-lede: #e6ebf2;
  --hero-shadow: none;
  --raised: linear-gradient(180deg, #fff, #e9e6dc);
  --pressed: #e2ddcd;
  --btn-border: #0b2545;
  --btn-hover: inset 0 -2px 0 #c5a253;
  --btn-default: inset 0 0 0 1px #0b2545, inset 0 -2px 0 #c5a253;
  --field-border: #a9a390;
  --field-bg: #fff;
  --line: #d9d4c4;
  --row-line: #ece8dc;
  --th-line: #d9d4c4;
  --row-hover: #eef1f6;
  --sheet: #fff;
  --tab-border: #a9a390;
  --group-line: linear-gradient(90deg, #c5a253, transparent);
  --rule: #c5a253;
  --bevel: #fff;
  --shadow: rgba(7, 26, 51, 0.45);
  --shadow-soft: rgba(7, 26, 51, 0.25);
  --radius: 2px;
}

/* ---- J.A.R.V.I.S. ------------------------------------------------------------------------------ */

:root[data-theme='jarvis'] {
  color-scheme: dark;
  --font: 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
  --display: var(--font);
  --title-font: var(--font);
  --face: #020b16;
  --face-light: #04162a;
  --face-dark: rgba(57, 213, 255, 0.3);
  --border-dark: #39d5ff;
  --text: #c9f3ff;
  --ink: #b5e6f5;
  --ink-2: #8fc4d8;
  --muted: #6f9bb6;
  --link: #39d5ff;
  --link-hover: #ffc23d;
  --window-border: rgba(57, 213, 255, 0.45);
  --title-gradient: linear-gradient(90deg, rgba(215, 38, 61, 0.45), #020b16 40%);
  --title-text: #c9f3ff;
  --title-glyph: #39d5ff;
  --title-shadow: 0 0 8px rgba(57, 213, 255, 0.6);
  --title-btn: transparent;
  --title-btn-close: rgba(215, 38, 61, 0.6);
  --taskpane-bg: #031020;
  --task-header: transparent;
  --task-body: transparent;
  --task-header-text: #39d5ff;
  --list-bg: #020b16;
  --header-bg: #04162a;
  --accent: #39d5ff;
  --accent-2: #ffc23d;
  --page-bg: #01060d;
  --desktop-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(57, 213, 255, 0.18), transparent 70%);
  --desktop: linear-gradient(rgba(57, 213, 255, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(57, 213, 255, 0.06) 1px, transparent 1px) 0 0 / 32px 32px, #01060d;
  --hero-glow: radial-gradient(ellipse 70% 90% at 15% 0%, rgba(57, 213, 255, 0.25), transparent 60%);
  --hero: linear-gradient(180deg, #04213d, #020b16);
  --hero-text: #c9f3ff;
  --hero-soft: #39d5ff;
  --hero-em: #ffc23d;
  --hero-lede: #b5e6f5;
  --hero-shadow: 0 0 18px rgba(57, 213, 255, 0.45);
  --raised: rgba(57, 213, 255, 0.08);
  --pressed: rgba(57, 213, 255, 0.18);
  --btn-border: #39d5ff;
  --btn-hover: 0 0 12px rgba(57, 213, 255, 0.6);
  --btn-default: inset 0 0 0 1px #ffc23d;
  --field-border: rgba(57, 213, 255, 0.35);
  --field-bg: #01060d;
  --line: rgba(57, 213, 255, 0.2);
  --row-line: rgba(57, 213, 255, 0.1);
  --th-line: rgba(57, 213, 255, 0.25);
  --row-hover: rgba(57, 213, 255, 0.08);
  --sheet: #020b16;
  --tab-border: rgba(57, 213, 255, 0.35);
  --group-line: linear-gradient(90deg, #39d5ff, transparent);
  --rule: #39d5ff;
  --bevel: rgba(57, 213, 255, 0.2);
  --shadow: rgba(57, 213, 255, 0.25);
  --shadow-soft: rgba(0, 0, 0, 0.6);
  --radius: 0px;
}

/* ---- Barbie ------------------------------------------------------------------------------------ */

:root[data-theme='barbie'] {
  --font: 'Avenir Next', Futura, 'Helvetica Neue', sans-serif;
  --display: var(--font);
  --title-font: var(--font);
  --face: #ffd6ea;
  --face-light: #fff3f9;
  --face-dark: #ff8fc8;
  --border-dark: #e0218a;
  --text: #4a0d2e;
  --ink: #4a0d2e;
  --ink-2: #6e2a50;
  --muted: #8f3d6b;
  --link: #c4167a;
  --link-hover: #e0218a;
  --window-border: #e0218a;
  --title-gradient: linear-gradient(90deg, #e0218a, #ff4fa8 50%, #e0218a);
  --title-text: #fff;
  --title-glyph: #fff;
  --title-shadow: 1px 1px #b3126b;
  --title-btn: rgba(255, 255, 255, 0.25);
  --title-btn-close: #b3126b;
  --taskpane-bg: linear-gradient(180deg, #ff8fc8, #e0218a);
  --task-header: #fff;
  --task-body: #fff3f9;
  --task-header-text: #e0218a;
  --list-bg: #fff;
  --header-bg: linear-gradient(180deg, #fff, #ffd6ea);
  --accent: #e0218a;
  --accent-2: #ff8fc8;
  --page-bg: #e0218a;
  --desktop-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 255, 255, 0.45), transparent 70%);
  --desktop: linear-gradient(180deg, #ff8fc8, #e0218a);
  --hero-glow: radial-gradient(ellipse 70% 90% at 15% 0%, rgba(255, 214, 234, 0.5), transparent 60%);
  --hero: linear-gradient(180deg, #ff4fa8, #e0218a 60%, #b3126b);
  --hero-text: #fff;
  --hero-soft: #ffe0f0;
  --hero-em: #ffd6ea;
  --hero-lede: #fff3f9;
  --hero-shadow: 0 2px 0 rgba(120, 0, 60, 0.3);
  --raised: linear-gradient(180deg, #fff, #ffe6f2);
  --pressed: #ffd6ea;
  --btn-border: #e0218a;
  --btn-hover: inset 0 0 0 2px #ff8fc8;
  --btn-default: inset 0 0 0 2px #e0218a;
  --field-border: #ff8fc8;
  --field-bg: #fff;
  --line: #ffc2df;
  --row-line: #ffe6f2;
  --th-line: #ffc2df;
  --row-hover: #fff0f7;
  --sheet: #fff;
  --tab-border: #ff8fc8;
  --group-line: linear-gradient(90deg, #ff8fc8, transparent);
  --rule: #ff8fc8;
  --bevel: #fff;
  --shadow: rgba(179, 18, 107, 0.4);
  --shadow-soft: rgba(179, 18, 107, 0.2);
  --radius: 14px;
}

/* ---- Batman ------------------------------------------------------------------------------------ */

:root[data-theme='batman'] {
  color-scheme: dark;
  --font: Futura, 'Avenir Next Condensed', 'Helvetica Neue', sans-serif;
  --display: var(--font);
  --title-font: var(--font);
  --face: #16171b;
  --face-light: #24262c;
  --face-dark: #3a3d45;
  --border-dark: #0a0a0c;
  --text: #d6d8dd;
  --ink: #c4c7cd;
  --ink-2: #a3a7b0;
  --muted: #8a8e98;
  --link: #ffd400;
  --link-hover: #fff;
  --window-border: #0a0a0c;
  --title-gradient: linear-gradient(180deg, #24262c, #0a0a0c);
  --title-text: #ffd400;
  --title-glyph: #ffd400;
  --title-shadow: none;
  --title-btn: #24262c;
  --title-btn-close: #3a3d45;
  --taskpane-bg: linear-gradient(180deg, #16171b, #0a0a0c);
  --task-header: #24262c;
  --task-body: #16171b;
  --task-header-text: #ffd400;
  --list-bg: #0a0a0c;
  --header-bg: #24262c;
  --accent: #ffd400;
  --accent-2: #fff3a0;
  --page-bg: #000;
  --desktop-glow: radial-gradient(ellipse 40% 30% at 50% 0%, rgba(255, 212, 0, 0.18), transparent 70%);
  --desktop: linear-gradient(180deg, #16171b, #000);
  --hero-glow: radial-gradient(ellipse 70% 90% at 15% 0%, rgba(255, 212, 0, 0.15), transparent 60%);
  --hero: linear-gradient(180deg, #24262c, #0a0a0c);
  --hero-text: #fff;
  --hero-soft: #ffd400;
  --hero-em: #ffd400;
  --hero-lede: #c4c7cd;
  --hero-shadow: none;
  --raised: linear-gradient(180deg, #2c2e35, #1b1c21);
  --pressed: #0a0a0c;
  --btn-border: #3a3d45;
  --btn-hover: inset 0 0 0 1px #ffd400;
  --btn-default: inset 0 -2px 0 #ffd400;
  --field-border: #3a3d45;
  --field-bg: #0a0a0c;
  --line: #3a3d45;
  --row-line: #1d1e23;
  --th-line: #3a3d45;
  --row-hover: #1b1c21;
  --sheet: #16171b;
  --tab-border: #3a3d45;
  --group-line: linear-gradient(90deg, #ffd400, transparent);
  --rule: #ffd400;
  --bevel: #2c2e35;
  --shadow: rgba(0, 0, 0, 0.7);
  --shadow-soft: rgba(0, 0, 0, 0.4);
  --radius: 2px;
}

/* ---- Bitcoin ----------------------------------------------------------------------------------- */

:root[data-theme='bitcoin'] {
  color-scheme: dark;
  --font: 'SF Mono', Menlo, 'JetBrains Mono', monospace;
  --display: var(--font);
  --title-font: var(--font);
  --face: #0d0d0f;
  --face-light: #16161a;
  --face-dark: #2a2a32;
  --border-dark: #2a2a32;
  --text: #e6e6ea;
  --ink: #d0d0d6;
  --ink-2: #a8a8b2;
  --muted: #8a8a96;
  --link: #f7931a;
  --link-hover: #ffb54d;
  --window-border: #2a2a32;
  --title-gradient: #16161a;
  --title-text: #e6e6ea;
  --title-glyph: #f7931a;
  --title-shadow: none;
  --title-btn: #1f1f25;
  --title-btn-close: #ea3943;
  --taskpane-bg: #0d0d0f;
  --task-header: #1f1f25;
  --task-body: #16161a;
  --task-header-text: #f7931a;
  --list-bg: #0d0d0f;
  --header-bg: #16161a;
  --accent: #f7931a;
  --accent-2: #ffb54d;
  --page-bg: #050506;
  --desktop-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(247, 147, 26, 0.25), transparent 70%);
  --desktop: linear-gradient(180deg, #1a1206, #050506);
  --hero-glow: radial-gradient(ellipse 70% 90% at 15% 0%, rgba(247, 147, 26, 0.28), transparent 60%);
  --hero: linear-gradient(180deg, #1f1609, #0d0d0f);
  --hero-text: #fff;
  --hero-soft: #f7931a;
  --hero-em: #f7931a;
  --hero-lede: #d0d0d6;
  --hero-shadow: none;
  --raised: #1f1f25;
  --pressed: #16161a;
  --btn-border: #2a2a32;
  --btn-hover: inset 0 0 0 1px #f7931a;
  --btn-default: inset 0 0 0 1px #f7931a, 0 0 14px rgba(247, 147, 26, 0.3);
  --field-border: #2a2a32;
  --field-bg: #050506;
  --line: #2a2a32;
  --row-line: #1a1a20;
  --th-line: #2a2a32;
  --row-hover: #16161a;
  --sheet: #0d0d0f;
  --tab-border: #2a2a32;
  --group-line: linear-gradient(90deg, #f7931a, transparent);
  --rule: #f7931a;
  --bevel: #1f1f25;
  --shadow: rgba(0, 0, 0, 0.7);
  --shadow-soft: rgba(0, 0, 0, 0.4);
  --radius: 6px;
}

/* ---- Matrix ------------------------------------------------------------------------------------ */

:root[data-theme='matrix'] {
  color-scheme: dark;
  --font: 'SF Mono', Menlo, Monaco, 'Cascadia Mono', Consolas, monospace;
  --display: var(--font);
  --title-font: var(--font);
  --face: #000400;
  --face-light: #020d04;
  --face-dark: #0a3d16;
  --border-dark: #00b32d;
  --text: #9dffb5;
  --ink: #8ef0a6;
  --ink-2: #6bd48a;
  --muted: #3fa85a;
  --link: #00ff41;
  --link-hover: #d7ffe0;
  --window-border: #0a3d16;
  --title-gradient: #000400;
  --title-text: #00ff41;
  --title-glyph: #00ff41;
  --title-shadow: 0 0 5px rgba(0, 255, 65, 0.8);
  --title-btn: transparent;
  --title-btn-close: transparent;
  --taskpane-bg: #020d04;
  --task-header: transparent;
  --task-body: transparent;
  --task-header-text: #00ff41;
  --list-bg: #000400;
  --header-bg: #020d04;
  --accent: #00ff41;
  --accent-2: #d7ffe0;
  --page-bg: #000;
  --desktop-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 255, 65, 0.12), transparent 70%);
  --desktop: repeating-linear-gradient(90deg, rgba(0, 255, 65, 0.04) 0 1px, transparent 1px 14px), #000;
  --hero-glow: radial-gradient(ellipse 70% 90% at 15% 0%, rgba(0, 255, 65, 0.18), transparent 60%);
  --hero: linear-gradient(180deg, #021a08, #000400);
  --hero-text: #00ff41;
  --hero-soft: #00b32d;
  --hero-em: #d7ffe0;
  --hero-lede: #9dffb5;
  --hero-shadow: 0 0 12px rgba(0, 255, 65, 0.6);
  --raised: #020d04;
  --pressed: #0a3d16;
  --btn-border: #00b32d;
  --btn-hover: 0 0 8px rgba(0, 255, 65, 0.55);
  --btn-default: inset 0 0 0 1px #00ff41, 0 0 8px rgba(0, 255, 65, 0.55);
  --field-border: #0a3d16;
  --field-bg: #000;
  --line: #0a3d16;
  --row-line: #04200b;
  --th-line: #0a3d16;
  --row-hover: rgba(0, 255, 65, 0.08);
  --sheet: #000400;
  --tab-border: #0a3d16;
  --group-line: linear-gradient(90deg, #00ff41, transparent);
  --rule: #00b32d;
  --bevel: #0a3d16;
  --shadow: rgba(0, 255, 65, 0.18);
  --shadow-soft: rgba(0, 0, 0, 0.6);
  --radius: 0px;
}

/* ---- DOS: Norton Commander blue, VGA text-mode colours --------------------------------------- */

:root[data-theme='dos'] {
  color-scheme: dark;
  --font: 'Perfect DOS VGA 437', 'Px437 IBM VGA 8x16', 'Lucida Console', Consolas, 'Courier New', monospace;
  --display: var(--font);
  --title-font: var(--font);
  --mono: var(--font);
  --face: #0000aa;
  --face-light: #0000aa;
  --face-dark: #55ffff;
  --border-dark: #55ffff;
  --text: #55ffff;
  --ink: #fff;
  --ink-2: #aaaaaa;
  --muted: #aaaaaa;
  --link: #ffff55;
  --link-hover: #fff;
  --window-border: #aaaaaa;
  --title-gradient: #00aaaa;
  --title-text: #000;
  --title-glyph: #000;
  --title-shadow: none;
  --title-btn: #00aaaa;
  --title-btn-close: #00aaaa;
  --taskpane-bg: #0000aa;
  --task-header: #00aaaa;
  --task-body: #0000aa;
  --task-header-text: #000;
  --list-bg: #0000aa;
  --header-bg: #0000aa;
  --accent: #ffff55;
  --accent-2: #fff;
  --page-bg: #000;
  --desktop-glow: linear-gradient(transparent, transparent);
  --desktop: #000;
  --hero-glow: linear-gradient(transparent, transparent);
  --hero: #000;
  --hero-text: #fff;
  --hero-soft: #aaaaaa;
  --hero-em: #ffff55;
  --hero-lede: #aaaaaa;
  --hero-shadow: none;
  --raised: #00aaaa;
  --pressed: #55ffff;
  --btn-border: #000;
  --btn-hover: inset 0 0 0 2px #ffff55;
  --btn-default: inset 0 0 0 2px #fff;
  --field-border: #55ffff;
  --field-bg: #000;
  --line: #55ffff;
  --row-line: rgba(85, 255, 255, 0.25);
  --th-line: #55ffff;
  --row-hover: #00aaaa;
  --sheet: #0000aa;
  --tab-border: #55ffff;
  --group-line: linear-gradient(90deg, #55ffff, #55ffff);
  --rule: #ffff55;
  --bevel: #55ffff;
  --shadow: rgba(0, 0, 0, 0.8);
  --shadow-soft: rgba(0, 0, 0, 0.6);
  --radius: 0px;
}

/* Text-mode details: double rules like box-drawing frames, and a hard drop shadow. */
:root[data-theme='dos'] .window,
:root[data-theme='dos'] .dialog {
  border: 4px double #aaaaaa;
  box-shadow: 12px 12px 0 #000;
}

:root[data-theme='dos'] .titlebar,
:root[data-theme='dos'] .dialog-title {
  margin: 0;
}

:root[data-theme='dos'] .btn,
:root[data-theme='dos'] .tool:hover,
:root[data-theme='dos'] .tabs button {
  color: #000;
}

:root[data-theme='dos'] .tabs button[aria-selected='true'] {
  color: #ffff55;
}

:root[data-theme='dos'] tbody tr:hover td {
  color: #000;
}

:root[data-theme='dos'] .hero::before {
  display: none;
}