:root {
  color-scheme: dark;

  --bg-0: #050b18;
  --bg-1: #081426;
  --bg-2: #0c1b31;
  --page-bg: #01040a;
  --surface: rgba(15, 29, 50, 0.72);
  --surface-strong: rgba(12, 27, 49, 0.94);
  --surface-soft: rgba(18, 40, 68, 0.42);
  --surface-hover: rgba(25, 56, 91, 0.48);
  --surface-solid: #0b1a2d;
  --surface-inset: rgba(7, 18, 34, 0.52);
  --surface-floating: rgba(3, 11, 23, 0.96);
  --input-bg: rgba(255, 255, 255, 0.025);

  --text-1: #edf4ff;
  --text-2: #a5b8d1;
  --text-3: #7187a3;
  --line: #263a56;
  --line-soft: rgba(75, 103, 139, 0.28);

  --cyan: #26d9ff;
  --cyan-rgb: 38, 217, 255;
  --magenta: #ff4fd8;
  --magenta-rgb: 255, 79, 216;
  --amber: #ffb84a;
  --amber-rgb: 255, 184, 74;
  --green: #55e6a5;
  --green-rgb: 85, 230, 165;
  --red: #ff6577;
  --red-rgb: 255, 101, 119;
  --violet: #9d7bff;
  --violet-rgb: 157, 123, 255;
  --blue: #6faeff;
  --blue-rgb: 111, 174, 255;

  --accent: var(--cyan);
  --accent-rgb: var(--cyan-rgb);

  --stage-bg:
    radial-gradient(circle at 15% 15%, rgba(var(--cyan-rgb), 0.06), transparent 31%),
    radial-gradient(circle at 88% 82%, rgba(var(--magenta-rgb), 0.045), transparent 28%),
    linear-gradient(145deg, var(--bg-0), #04101f 58%, #030916);
  --stage-grid-line: rgba(116, 151, 193, 0.08);
  --stage-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.48);
  --card-bg: linear-gradient(145deg, rgba(16, 34, 58, 0.56), rgba(9, 22, 41, 0.3));
  --control-bar-bg: rgba(3, 10, 22, 0.78);
  --progress-track-bg: rgba(255, 255, 255, 0.04);
  --dialog-border: rgba(99, 129, 168, 0.44);
  --dialog-backdrop: rgba(0, 3, 9, 0.78);
  --chart-bg: linear-gradient(145deg, rgba(8, 22, 41, 0.72), rgba(10, 26, 47, 0.35));
  --chart-grid: rgba(108, 139, 177, 0.16);
  --chart-axis: rgba(129, 155, 188, 0.34);
  --chart-center: rgba(5, 11, 24, 0.96);
  --chart-center-stroke: rgba(107, 137, 174, 0.18);
  --segmented-bg: rgba(0, 0, 0, 0.18);
  --event-bg: rgba(5, 11, 24, 0.72);
  --caption-bg: rgba(3, 9, 18, 0.82);
  --caption-border: rgba(255, 255, 255, 0.12);
  --caption-text: #d7e4f4;
  --code-bg: rgba(1, 6, 15, 0.72);
  --code-text: #c8d8ee;
  --overview-bg: linear-gradient(145deg, #0a1930, #061020);
  --kbd-border: #40536b;
  --kbd-bg: rgba(255, 255, 255, 0.035);
  --selection-bg: rgba(var(--cyan-rgb), 0.28);
  --blackout-bg: #000;
  --theme-browser-color: #050b18;

  --radius-xs: 0.32rem;
  --radius-sm: 0.55rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 0.55rem 1.6rem rgba(0, 0, 0, 0.22);
  --shadow-md: 0 1.2rem 3rem rgba(0, 0, 0, 0.34);
  --glow: 0 0 1.4rem rgba(var(--accent-rgb), 0.16);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 150ms;
  --normal: 280ms;
  --slow: 480ms;

  --font-sans: Inter, "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", Inter, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg-0: #f7f9fc;
  --bg-1: #eef3f8;
  --bg-2: #dfe8f2;
  --page-bg: #dfe7f0;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: rgba(255, 255, 255, 0.97);
  --surface-soft: rgba(221, 231, 242, 0.72);
  --surface-hover: rgba(202, 218, 235, 0.76);
  --surface-solid: #e7eef6;
  --surface-inset: rgba(229, 237, 246, 0.88);
  --surface-floating: rgba(255, 255, 255, 0.98);
  --input-bg: rgba(255, 255, 255, 0.84);

  --text-1: #10233b;
  --text-2: #36516f;
  --text-3: #58728e;
  --line: #a9bacd;
  --line-soft: rgba(75, 103, 134, 0.24);

  --cyan: #006f8a;
  --cyan-rgb: 0, 111, 138;
  --magenta: #a20f72;
  --magenta-rgb: 162, 15, 114;
  --amber: #8a5200;
  --amber-rgb: 138, 82, 0;
  --green: #08724f;
  --green-rgb: 8, 114, 79;
  --red: #b11f35;
  --red-rgb: 177, 31, 53;
  --violet: #5640ae;
  --violet-rgb: 86, 64, 174;
  --blue: #1c5f9f;
  --blue-rgb: 28, 95, 159;

  --stage-bg:
    radial-gradient(circle at 15% 15%, rgba(var(--cyan-rgb), 0.08), transparent 31%),
    radial-gradient(circle at 88% 82%, rgba(var(--magenta-rgb), 0.055), transparent 28%),
    linear-gradient(145deg, #fbfcfe, var(--bg-0) 58%, #e8eef5);
  --stage-grid-line: rgba(57, 88, 120, 0.10);
  --stage-shadow: 0 2rem 5rem rgba(26, 48, 72, 0.22);
  --card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.90), rgba(226, 235, 245, 0.64));
  --control-bar-bg: rgba(249, 251, 253, 0.90);
  --progress-track-bg: rgba(16, 35, 59, 0.09);
  --dialog-border: rgba(79, 108, 139, 0.42);
  --dialog-backdrop: rgba(28, 45, 63, 0.34);
  --chart-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(225, 235, 245, 0.72));
  --chart-grid: rgba(40, 72, 104, 0.14);
  --chart-axis: rgba(40, 72, 104, 0.34);
  --chart-center: rgba(255, 255, 255, 0.98);
  --chart-center-stroke: rgba(75, 103, 134, 0.24);
  --segmented-bg: rgba(92, 118, 146, 0.12);
  --event-bg: rgba(247, 249, 252, 0.88);
  --code-bg: rgba(224, 233, 243, 0.92);
  --code-text: #233d59;
  --overview-bg: linear-gradient(145deg, #ffffff, #e5edf6);
  --kbd-border: #8297ad;
  --kbd-bg: rgba(255, 255, 255, 0.82);
  --selection-bg: rgba(var(--cyan-rgb), 0.20);
  --theme-browser-color: #f7f9fc;

  --shadow-sm: 0 0.55rem 1.6rem rgba(30, 52, 75, 0.14);
  --shadow-md: 0 1.2rem 3rem rgba(30, 52, 75, 0.22);
}

:root[data-theme="copper"] {
  color-scheme: dark;

  --bg-0: #3b211b;
  --bg-1: #4a2b22;
  --bg-2: #62392b;
  --page-bg: #1b0f0c;
  --surface: rgba(79, 43, 33, 0.78);
  --surface-strong: rgba(55, 30, 25, 0.96);
  --surface-soft: rgba(113, 62, 45, 0.48);
  --surface-hover: rgba(139, 77, 55, 0.58);
  --surface-solid: #522f26;
  --surface-inset: rgba(45, 24, 20, 0.74);
  --surface-floating: rgba(39, 21, 18, 0.97);
  --input-bg: rgba(255, 240, 225, 0.055);

  --text-1: #fff5e9;
  --text-2: #e5c9b8;
  --text-3: #bfa08e;
  --line: #8a5b49;
  --line-soft: rgba(215, 151, 112, 0.28);

  --cyan: #63e6ce;
  --cyan-rgb: 99, 230, 206;
  --magenta: #ff9aaf;
  --magenta-rgb: 255, 154, 175;
  --amber: #ffd080;
  --amber-rgb: 255, 208, 128;
  --green: #8ce4a2;
  --green-rgb: 140, 228, 162;
  --red: #ff968a;
  --red-rgb: 255, 150, 138;
  --violet: #cdb2ff;
  --violet-rgb: 205, 178, 255;
  --blue: #84c8ff;
  --blue-rgb: 132, 200, 255;

  --stage-bg:
    radial-gradient(circle at 14% 14%, rgba(var(--amber-rgb), 0.16), transparent 32%),
    radial-gradient(circle at 86% 82%, rgba(var(--cyan-rgb), 0.11), transparent 30%),
    linear-gradient(145deg, #2b1713, #5a3025 58%, #21130f);
  --stage-grid-line: rgba(255, 196, 145, 0.10);
  --stage-shadow: 0 2rem 5rem rgba(21, 8, 4, 0.54);
  --card-bg: linear-gradient(145deg, rgba(104, 57, 43, 0.78), rgba(61, 32, 26, 0.54));
  --control-bar-bg: rgba(42, 23, 19, 0.88);
  --progress-track-bg: rgba(255, 239, 222, 0.065);
  --dialog-border: rgba(209, 139, 98, 0.48);
  --dialog-backdrop: rgba(25, 10, 7, 0.80);
  --chart-bg: linear-gradient(145deg, rgba(91, 49, 38, 0.90), rgba(55, 29, 24, 0.70));
  --chart-grid: rgba(255, 205, 164, 0.14);
  --chart-axis: rgba(225, 177, 144, 0.34);
  --chart-center: rgba(49, 26, 22, 0.98);
  --chart-center-stroke: rgba(214, 147, 108, 0.30);
  --segmented-bg: rgba(28, 12, 9, 0.28);
  --event-bg: rgba(51, 27, 22, 0.84);
  --code-bg: rgba(34, 17, 14, 0.86);
  --code-text: #f4dbc9;
  --overview-bg: linear-gradient(145deg, #63382b, #321c17);
  --kbd-border: #9d6d58;
  --kbd-bg: rgba(255, 241, 226, 0.055);
  --selection-bg: rgba(var(--cyan-rgb), 0.24);
  --theme-browser-color: #3b211b;

  --shadow-sm: 0 0.55rem 1.6rem rgba(22, 8, 4, 0.26);
  --shadow-md: 0 1.2rem 3rem rgba(22, 8, 4, 0.40);
}

.slide[data-accent="cyan"], .card[data-accent="cyan"] { --accent: var(--cyan); --accent-rgb: var(--cyan-rgb); }
.slide[data-accent="magenta"], .card[data-accent="magenta"] { --accent: var(--magenta); --accent-rgb: var(--magenta-rgb); }
.slide[data-accent="amber"], .card[data-accent="amber"] { --accent: var(--amber); --accent-rgb: var(--amber-rgb); }
.slide[data-accent="green"], .card[data-accent="green"] { --accent: var(--green); --accent-rgb: var(--green-rgb); }
.slide[data-accent="red"], .card[data-accent="red"] { --accent: var(--red); --accent-rgb: var(--red-rgb); }
.slide[data-accent="violet"], .card[data-accent="violet"] { --accent: var(--violet); --accent-rgb: var(--violet-rgb); }