:root {
  /* --- Default palette (Blue): Light --- */
  --color-bg: #eef4fb;
  --color-bg-alt: #e2ecf7;
  --color-surface: #f8fbff;
  --color-text: #17263a;
  --color-text-muted: #4b6078;
  --color-accent: #285f9e;
  --color-accent-hover: #1c4d84;
  --color-on-accent: #fff;
  --color-border: #cbd9e8;
  --color-link: #245b96;
  --color-link-hover: #163f6d;
  --color-browser: #eef4fb;
  --color-scrollbar-track: var(--color-bg-alt);
  --color-scrollbar-thumb: color-mix(
    in srgb,
    var(--color-accent) 55%,
    var(--color-border)
  );
  --color-scrollbar-thumb-hover: var(--color-accent);

  /* --- Type Scale (1.25 ratio) --- */
  --text-xs: 0.8rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.563rem;
  --text-3xl: 1.953rem;
  --text-4xl: 2.441rem;
  --text-5xl: 3.052rem;

  /* --- Spacing Scale --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* --- Layout --- */
  --max-width: clamp(64rem, 80vw, 80rem);
  --content-width: 48rem;
  --radius: 0.5rem;
  --radius-lg: 1rem;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

[data-theme="dark"] {
  /* --- Default palette (Blue): Dark --- */
  --color-bg: #152235;
  --color-bg-alt: #1d3049;
  --color-surface: #1a2940;
  --color-text: #edf5ff;
  --color-text-muted: #afbed0;
  --color-accent: #77afea;
  --color-accent-hover: #9ac8f2;
  --color-on-accent: #152235;
  --color-border: #314965;
  --color-link: #77afea;
  --color-link-hover: #c5e2fb;
  --color-browser: #152235;
}

[data-palette="nordic"] {
  /* --- Nordic palette: Light --- */
  --color-bg: #eceff4;
  --color-bg-alt: #e5e9f0;
  --color-surface: #f2f4f8;
  --color-text: #2e3440;
  --color-text-muted: #4c566a;
  --color-accent: #4a6f99;
  --color-accent-hover: #3d5f85;
  --color-on-accent: #fff;
  --color-border: #d8dee9;
  --color-link: #4a6f99;
  --color-link-hover: #2e3440;
  --color-browser: #eceff4;
}

[data-theme="dark"][data-palette="nordic"] {
  /* --- Nordic palette: Dark --- */
  --color-bg: #2e3440;
  --color-bg-alt: #3b4252;
  --color-surface: #343a48;
  --color-text: #eceff4;
  --color-text-muted: #a8afb5;
  --color-accent: #88c0d0;
  --color-accent-hover: #a3d4e0;
  --color-on-accent: #2e3440;
  --color-border: #434c5e;
  --color-link: #88c0d0;
  --color-link-hover: #eceff4;
  --color-browser: #2e3440;
}

[data-palette="teal"] {
  /* --- Teal palette: Light --- */
  --color-bg: #edf7f5;
  --color-bg-alt: #e0f0ec;
  --color-surface: #f7fbfa;
  --color-text: #16332f;
  --color-text-muted: #4a655f;
  --color-accent: #197567;
  --color-accent-hover: #115f54;
  --color-on-accent: #fff;
  --color-border: #c6ded8;
  --color-link: #176d61;
  --color-link-hover: #0f5149;
  --color-browser: #edf7f5;
}

[data-theme="dark"][data-palette="teal"] {
  /* --- Teal palette: Dark --- */
  --color-bg: #102825;
  --color-bg-alt: #183a35;
  --color-surface: #15312d;
  --color-text: #edf9f6;
  --color-text-muted: #a9c6bf;
  --color-accent: #63c9b5;
  --color-accent-hover: #8adcca;
  --color-on-accent: #102825;
  --color-border: #2b5049;
  --color-link: #71d1be;
  --color-link-hover: #b4ede2;
  --color-browser: #102825;
}

[data-palette="violet"] {
  /* --- Violet palette: Light --- */
  --color-bg: #f4f1f8;
  --color-bg-alt: #eae4f1;
  --color-surface: #fbf9fd;
  --color-text: #2d2138;
  --color-text-muted: #655772;
  --color-accent: #6b4c8f;
  --color-accent-hover: #573b78;
  --color-on-accent: #fff;
  --color-border: #ddd3e7;
  --color-link: #634587;
  --color-link-hover: #422d5c;
  --color-browser: #f4f1f8;
}

[data-theme="dark"][data-palette="violet"] {
  /* --- Violet palette: Dark --- */
  --color-bg: #241c2d;
  --color-bg-alt: #342640;
  --color-surface: #2c2236;
  --color-text: #f7f1fb;
  --color-text-muted: #c2b3cc;
  --color-accent: #c3a2df;
  --color-accent-hover: #d8bbed;
  --color-on-accent: #241c2d;
  --color-border: #4d3a59;
  --color-link: #caa9e5;
  --color-link-hover: #ead9f7;
  --color-browser: #241c2d;
}

[data-palette="amber"] {
  /* --- Amber palette: Light --- */
  --color-bg: #faf5e9;
  --color-bg-alt: #f2ead8;
  --color-surface: #fffaf0;
  --color-text: #382a16;
  --color-text-muted: #6d5b3f;
  --color-accent: #8a5a13;
  --color-accent-hover: #70460a;
  --color-on-accent: #fff;
  --color-border: #e2d3b7;
  --color-link: #80500d;
  --color-link-hover: #5b3708;
  --color-browser: #faf5e9;
}

[data-theme="dark"][data-palette="amber"] {
  /* --- Amber palette: Dark --- */
  --color-bg: #2d2417;
  --color-bg-alt: #40321e;
  --color-surface: #352a1a;
  --color-text: #fff7e8;
  --color-text-muted: #d0bea0;
  --color-accent: #e6b75f;
  --color-accent-hover: #f2cd88;
  --color-on-accent: #2d2417;
  --color-border: #59462a;
  --color-link: #edbd64;
  --color-link-hover: #ffe0a4;
  --color-browser: #2d2417;
}

[data-palette="rose"] {
  /* --- Rose palette: Light --- */
  --color-bg: #faf0f2;
  --color-bg-alt: #f3e2e7;
  --color-surface: #fff8f9;
  --color-text: #3b2229;
  --color-text-muted: #755861;
  --color-accent: #9a3f5c;
  --color-accent-hover: #7f3049;
  --color-on-accent: #fff;
  --color-border: #e5ccd3;
  --color-link: #923854;
  --color-link-hover: #6b263c;
  --color-browser: #faf0f2;
}

[data-theme="dark"][data-palette="rose"] {
  /* --- Rose palette: Dark --- */
  --color-bg: #2e1d23;
  --color-bg-alt: #432731;
  --color-surface: #372229;
  --color-text: #fff1f4;
  --color-text-muted: #d1b4bd;
  --color-accent: #e28ba7;
  --color-accent-hover: #f0adc1;
  --color-on-accent: #2e1d23;
  --color-border: #5c3945;
  --color-link: #e996b0;
  --color-link-hover: #ffc5d5;
  --color-browser: #2e1d23;
}