/*
 * Color themes. Each block overrides the CSS custom properties declared in
 * main.css `:root`. Applying a theme is a single attribute write on <html>
 * (`document.documentElement.dataset.theme = id`, see src/services/theme-service.ts).
 *
 * Selectors use the bare `[data-theme="…"]` attribute (not `:root[data-theme]`)
 * on purpose: the same block themes both the <html> root AND the nested Settings
 * swatch tiles, which carry their own `data-theme` so their preview chips render
 * in that theme's colors. Loaded after main.css, so equal-specificity rules win
 * by source order for the root element.
 *
 * RGB triplets such as `--accent-rgb`, `--danger-rgb`, and `--warning-rgb`
 * are converted to legacy-compatible colors at build time.
 */

/* Midnight — the default. Mirrors main.css :root so an explicit
   data-theme="midnight" (and the Midnight swatch) resolve correctly on any
   element, not just the unset root. Keep in sync with main.css :root. */
[data-theme="midnight"] {
  --bg-primary: #0a0a0f;
  --catalog-hero-scrim-rgb: 10 10 15;
  --catalog-hero-scrim-rgb-legacy: 10, 10, 15;
  --bg-secondary: #12121a;
  --bg-tertiary: #1a1a2e;
  --bg-card: #16213e;
  --text-primary: #e8e8e8;
  --text-secondary: #a0a0b0;
  --text-muted: #666680;
  --accent: #00d4ff;
  --accent-dim: #0088aa;
  --accent-rgb: 0 212 255;
  --accent-rgb-legacy: 0, 212, 255;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.3);
  --danger: #ff4757;
  --danger-rgb: 255 71 87;
  --danger-rgb-legacy: 255, 71, 87;
  --success: #2ed573;
  --warning: #ffa502;
  --warning-rgb: 255 165 2;
  --warning-rgb-legacy: 255, 165, 2;
  --border: #2a2a3e;
  --glass-tint: rgba(22, 33, 62, 0.5);
  --glass-tint-solid: rgba(22, 33, 62, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(0, 212, 255, 0.6);
  --glass-accent-solid: #00d4ff;
}

[data-theme="ember"] {
  --bg-primary: #14110f;
  --catalog-hero-scrim-rgb: 20 17 15;
  --catalog-hero-scrim-rgb-legacy: 20, 17, 15;
  --bg-secondary: #1c1815;
  --bg-tertiary: #241e19;
  --bg-card: #26201b;
  --text-primary: #f0e9e2;
  --text-secondary: #c2b6aa;
  --text-muted: #7a6f64;
  --accent: #ff8c42;
  --accent-dim: #b35a1e;
  --accent-rgb: 255 140 66;
  --accent-rgb-legacy: 255, 140, 66;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.3);
  --danger: #ff5a5f;
  --danger-rgb: 255 90 95;
  --danger-rgb-legacy: 255, 90, 95;
  --success: #4cd07d;
  --warning: #ffb703;
  --warning-rgb: 255 183 3;
  --warning-rgb-legacy: 255, 183, 3;
  --border: #362e27;
  --glass-tint: rgba(38, 32, 27, 0.5);
  --glass-tint-solid: rgba(38, 32, 27, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(255, 140, 66, 0.6);
  --glass-accent-solid: #ff8c42;
}

[data-theme="emerald"] {
  --bg-primary: #0a1410;
  --catalog-hero-scrim-rgb: 10 20 16;
  --catalog-hero-scrim-rgb-legacy: 10, 20, 16;
  --bg-secondary: #0f1c17;
  --bg-tertiary: #12241d;
  --bg-card: #14261f;
  --text-primary: #e6efe9;
  --text-secondary: #a8c2b5;
  --text-muted: #5f7a6d;
  --accent: #35e0c5;
  --accent-dim: #1c9a86;
  --accent-rgb: 53 224 197;
  --accent-rgb-legacy: 53, 224, 197;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.3);
  --danger: #ff6b6b;
  --danger-rgb: 255 107 107;
  --danger-rgb-legacy: 255, 107, 107;
  --success: #4cd07d;
  --warning: #ffcf56;
  --warning-rgb: 255 207 86;
  --warning-rgb-legacy: 255, 207, 86;
  --border: #21362d;
  --glass-tint: rgba(20, 38, 31, 0.5);
  --glass-tint-solid: rgba(20, 38, 31, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(53, 224, 197, 0.6);
  --glass-accent-solid: #35e0c5;
}

[data-theme="amethyst"] {
  --bg-primary: #100a1a;
  --catalog-hero-scrim-rgb: 16 10 26;
  --catalog-hero-scrim-rgb-legacy: 16, 10, 26;
  --bg-secondary: #170f26;
  --bg-tertiary: #1b1230;
  --bg-card: #1f1533;
  --text-primary: #ece6f5;
  --text-secondary: #b8aacc;
  --text-muted: #6f6188;
  --accent: #b06cff;
  --accent-dim: #7a3fd0;
  --accent-rgb: 176 108 255;
  --accent-rgb-legacy: 176, 108, 255;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.3);
  --danger: #ff5470;
  --danger-rgb: 255 84 112;
  --danger-rgb-legacy: 255, 84, 112;
  --success: #4cd07d;
  --warning: #ffb020;
  --warning-rgb: 255 176 32;
  --warning-rgb-legacy: 255, 176, 32;
  --border: #2c2140;
  --glass-tint: rgba(31, 21, 51, 0.5);
  --glass-tint-solid: rgba(31, 21, 51, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(176, 108, 255, 0.6);
  --glass-accent-solid: #b06cff;
}

/* Daylight — our light theme. */
[data-theme="daylight"] {
  --bg-primary: #f6f7f9;
  --catalog-hero-scrim-rgb: 246 247 249;
  --catalog-hero-scrim-rgb-legacy: 246, 247, 249;
  --bg-secondary: #eceef2;
  --bg-tertiary: #e2e6ec;
  --bg-card: #ffffff;
  --text-primary: #1f2430;
  --text-secondary: #4a5160;
  --text-muted: #8a91a0;
  --accent: #2f6bff;
  --accent-dim: #1f57e6;
  --accent-rgb: 47 107 255;
  --accent-rgb-legacy: 47, 107, 255;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.22);
  --danger: #e5484d;
  --danger-rgb: 229 72 77;
  --danger-rgb-legacy: 229, 72, 77;
  --success: #2ea043;
  --warning: #d9820b;
  --warning-rgb: 217 130 11;
  --warning-rgb-legacy: 217, 130, 11;
  --border: #dfe3ea;
  --glass-tint: rgba(255, 255, 255, 0.62);
  --glass-tint-solid: rgba(255, 255, 255, 0.96);
  --glass-edge: rgba(0, 0, 0, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --glass-accent: rgba(47, 107, 255, 0.6);
  --glass-accent-solid: #2f6bff;
}

/* Amethyst OLED — Amethyst's violet on true black. The page background is
   pure #000 so an OLED panel switches those pixels off; surfaces stay only a
   step above black, and a stronger accent glow carries focus instead. */
[data-theme="amethyst-oled"] {
  --bg-primary: #000000;
  --catalog-hero-scrim-rgb: 0 0 0;
  --catalog-hero-scrim-rgb-legacy: 0, 0, 0;
  --bg-secondary: #050308;
  --bg-tertiary: #0c0814;
  --bg-card: #110b1b;
  --text-primary: #efe8f8;
  --text-secondary: #b8aacc;
  --text-muted: #76688f;
  --accent: #b77aff;
  --accent-dim: #7a3fd0;
  --accent-rgb: 183 122 255;
  --accent-rgb-legacy: 183, 122, 255;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.45);
  --danger: #ff5470;
  --danger-rgb: 255 84 112;
  --danger-rgb-legacy: 255, 84, 112;
  --success: #4cd07d;
  --warning: #ffb020;
  --warning-rgb: 255 176 32;
  --warning-rgb-legacy: 255, 176, 32;
  --border: #221732;
  --glass-tint: rgba(17, 11, 27, 0.5);
  --glass-tint-solid: rgba(17, 11, 27, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(183, 122, 255, 0.6);
  --glass-accent-solid: #b77aff;
}

[data-theme="arctic"] {
  --bg-primary: #2e3440;
  --catalog-hero-scrim-rgb: 46 52 64;
  --catalog-hero-scrim-rgb-legacy: 46, 52, 64;
  --bg-secondary: #272c36;
  --bg-tertiary: #353b48;
  --bg-card: #3b4252;
  --text-primary: #eceff4;
  --text-secondary: #d8dee9;
  --text-muted: #7b88a1;
  --accent: #88c0d0;
  --accent-dim: #5e81ac;
  --accent-rgb: 136 192 208;
  --accent-rgb-legacy: 136, 192, 208;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.3);
  --danger: #bf616a;
  --danger-rgb: 191 97 106;
  --danger-rgb-legacy: 191, 97, 106;
  --success: #a3be8c;
  --warning: #ebcb8b;
  --warning-rgb: 235 203 139;
  --warning-rgb-legacy: 235, 203, 139;
  --border: #434c5e;
  --glass-tint: rgba(59, 66, 82, 0.5);
  --glass-tint-solid: rgba(59, 66, 82, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(136, 192, 208, 0.6);
  --glass-accent-solid: #88c0d0;
}

[data-theme="ocean-dark"] {
  --bg-primary: #002b36;
  --catalog-hero-scrim-rgb: 0 43 54;
  --catalog-hero-scrim-rgb-legacy: 0, 43, 54;
  --bg-secondary: #00252e;
  --bg-tertiary: #052f39;
  --bg-card: #073642;
  --text-primary: #93a1a1;
  --text-secondary: #839496;
  --text-muted: #586e75;
  --accent: #268bd2;
  --accent-dim: #1a6699;
  --accent-rgb: 38 139 210;
  --accent-rgb-legacy: 38, 139, 210;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.3);
  --danger: #dc322f;
  --danger-rgb: 220 50 47;
  --danger-rgb-legacy: 220, 50, 47;
  --success: #859900;
  --warning: #b58900;
  --warning-rgb: 181 137 0;
  --warning-rgb-legacy: 181, 137, 0;
  --border: #0e4b59;
  --glass-tint: rgba(7, 54, 66, 0.5);
  --glass-tint-solid: rgba(7, 54, 66, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(38, 139, 210, 0.6);
  --glass-accent-solid: #268bd2;
}

[data-theme="vintage-amber"] {
  --bg-primary: #282828;
  --catalog-hero-scrim-rgb: 40 40 40;
  --catalog-hero-scrim-rgb-legacy: 40, 40, 40;
  --bg-secondary: #1d2021;
  --bg-tertiary: #32302f;
  --bg-card: #3c3836;
  --text-primary: #ebdbb2;
  --text-secondary: #d5c4a1;
  --text-muted: #928374;
  --accent: #fe8019;
  --accent-dim: #d65d0e;
  --accent-rgb: 254 128 25;
  --accent-rgb-legacy: 254, 128, 25;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.3);
  --danger: #fb4934;
  --danger-rgb: 251 73 52;
  --danger-rgb-legacy: 251, 73, 52;
  --success: #b8bb26;
  --warning: #fabd2f;
  --warning-rgb: 250 189 47;
  --warning-rgb-legacy: 250, 189, 47;
  --border: #504945;
  --glass-tint: rgba(60, 56, 54, 0.5);
  --glass-tint-solid: rgba(60, 56, 54, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(254, 128, 25, 0.6);
  --glass-accent-solid: #fe8019;
}

[data-theme="pastel-mocha"] {
  --bg-primary: #1e1e2e;
  --catalog-hero-scrim-rgb: 30 30 46;
  --catalog-hero-scrim-rgb-legacy: 30, 30, 46;
  --bg-secondary: #181825;
  --bg-tertiary: #292c3c;
  --bg-card: #313244;
  --text-primary: #cdd6f4;
  --text-secondary: #bac2de;
  --text-muted: #6c7086;
  --accent: #cba6f7;
  --accent-dim: #7847d1;
  --accent-rgb: 203 166 247;
  --accent-rgb-legacy: 203, 166, 247;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.3);
  --danger: #f38ba8;
  --danger-rgb: 243 139 168;
  --danger-rgb-legacy: 243, 139, 168;
  --success: #a6e3a1;
  --warning: #f9e2af;
  --warning-rgb: 249 226 175;
  --warning-rgb-legacy: 249, 226, 175;
  --border: #45475a;
  --glass-tint: rgba(49, 50, 68, 0.5);
  --glass-tint-solid: rgba(49, 50, 68, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(203, 166, 247, 0.6);
  --glass-accent-solid: #cba6f7;
}

[data-theme="neon-night"] {
  --bg-primary: #1a1b26;
  --catalog-hero-scrim-rgb: 26 27 38;
  --catalog-hero-scrim-rgb-legacy: 26, 27, 38;
  --bg-secondary: #16161e;
  --bg-tertiary: #1f2233;
  --bg-card: #24283b;
  --text-primary: #c0caf5;
  --text-secondary: #a9b1d6;
  --text-muted: #565f89;
  --accent: #7aa2f7;
  --accent-dim: #3d59a1;
  --accent-rgb: 122 162 247;
  --accent-rgb-legacy: 122, 162, 247;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.3);
  --danger: #f7768e;
  --danger-rgb: 247 118 142;
  --danger-rgb-legacy: 247, 118, 142;
  --success: #9ece6a;
  --warning: #e0af68;
  --warning-rgb: 224 175 104;
  --warning-rgb-legacy: 224, 175, 104;
  --border: #292e42;
  --glass-tint: rgba(36, 40, 59, 0.5);
  --glass-tint-solid: rgba(36, 40, 59, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(122, 162, 247, 0.6);
  --glass-accent-solid: #7aa2f7;
}

/* Pastel Latte — light. */
[data-theme="pastel-latte"] {
  --bg-primary: #eff1f5;
  --catalog-hero-scrim-rgb: 239 241 245;
  --catalog-hero-scrim-rgb-legacy: 239, 241, 245;
  --bg-secondary: #e6e9ef;
  --bg-tertiary: #dce0e8;
  --bg-card: #ffffff;
  --text-primary: #4c4f69;
  --text-secondary: #5c5f77;
  --text-muted: #8c8fa1;
  --accent: #8839ef;
  --accent-dim: #7a2fd8;
  --accent-rgb: 136 57 239;
  --accent-rgb-legacy: 136, 57, 239;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.22);
  --danger: #d20f39;
  --danger-rgb: 210 15 57;
  --danger-rgb-legacy: 210, 15, 57;
  --success: #40a02b;
  --warning: #df8e1d;
  --warning-rgb: 223 142 29;
  --warning-rgb-legacy: 223, 142, 29;
  --border: #ccd0da;
  --glass-tint: rgba(255, 255, 255, 0.62);
  --glass-tint-solid: rgba(255, 255, 255, 0.96);
  --glass-edge: rgba(0, 0, 0, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --glass-accent: rgba(136, 57, 239, 0.6);
  --glass-accent-solid: #8839ef;
}

/* Paper Light — light. */
[data-theme="paper-light"] {
  --bg-primary: #fdf6e3;
  --catalog-hero-scrim-rgb: 253 246 227;
  --catalog-hero-scrim-rgb-legacy: 253, 246, 227;
  --bg-secondary: #eee8d5;
  --bg-tertiary: #e6dfc8;
  --bg-card: #fdf6e3;
  --text-primary: #586e75;
  --text-secondary: #657b83;
  --text-muted: #93a1a1;
  --accent: #268bd2;
  --accent-dim: #1a6699;
  --accent-rgb: 38 139 210;
  --accent-rgb-legacy: 38, 139, 210;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.22);
  --danger: #dc322f;
  --danger-rgb: 220 50 47;
  --danger-rgb-legacy: 220, 50, 47;
  --success: #859900;
  --warning: #b58900;
  --warning-rgb: 181 137 0;
  --warning-rgb-legacy: 181, 137, 0;
  --border: #ded8c5;
  --glass-tint: rgba(253, 246, 227, 0.62);
  --glass-tint-solid: rgba(253, 246, 227, 0.96);
  --glass-edge: rgba(0, 0, 0, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --glass-accent: rgba(38, 139, 210, 0.6);
  --glass-accent-solid: #268bd2;
}

/* Burgundy — layered wine reds with a restrained rose-gold accent. */
[data-theme="burgundy"] {
  --bg-primary: #140b10;
  --catalog-hero-scrim-rgb: 20 11 16;
  --catalog-hero-scrim-rgb-legacy: 20, 11, 16;
  --bg-secondary: #1d0e15;
  --bg-tertiary: #29131c;
  --bg-card: #351923;
  --text-primary: #f6e9eb;
  --text-secondary: #ceb5bb;
  --text-muted: #8c6d76;
  --accent: #c67883;
  --accent-dim: #914452;
  --accent-rgb: 198 120 131;
  --accent-rgb-legacy: 198, 120, 131;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.3);
  --danger: #f05b6e;
  --danger-rgb: 240 91 110;
  --danger-rgb-legacy: 240, 91, 110;
  --success: #6fba8c;
  --warning: #d6a65d;
  --warning-rgb: 214 166 93;
  --warning-rgb-legacy: 214, 166, 93;
  --border: #4a2732;
  --glass-tint: rgba(53, 25, 35, 0.5);
  --glass-tint-solid: rgba(53, 25, 35, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(198, 120, 131, 0.6);
  --glass-accent-solid: #c67883;
}

/* Cobalt Slate — cool graphite surfaces with a clear cobalt-blue focus. */
[data-theme="cobalt-slate"] {
  --bg-primary: #282c34;
  --catalog-hero-scrim-rgb: 40 44 52;
  --catalog-hero-scrim-rgb-legacy: 40, 44, 52;
  --bg-secondary: #21252b;
  --bg-tertiary: #2c313a;
  --bg-card: #3a3f4b;
  --text-primary: #abb2bf;
  --text-secondary: #9da5b4;
  --text-muted: #5c6370;
  --accent: #61afef;
  --accent-dim: #3e8ed0;
  --accent-rgb: 97 175 239;
  --accent-rgb-legacy: 97, 175, 239;
  --accent-glow: rgba(var(--accent-rgb-legacy), 0.3);
  --danger: #e06c75;
  --danger-rgb: 224 108 117;
  --danger-rgb-legacy: 224, 108, 117;
  --success: #98c379;
  --warning: #e5c07b;
  --warning-rgb: 229 192 123;
  --warning-rgb-legacy: 229, 192, 123;
  --border: #3e4451;
  --glass-tint: rgba(58, 63, 75, 0.5);
  --glass-tint-solid: rgba(58, 63, 75, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.1);
  --glass-accent: rgba(97, 175, 239, 0.6);
  --glass-accent-solid: #61afef;
}

/* Non-default themes map catalog chrome onto their own palette. Midnight keeps
   the original catalog colors declared in main.css. */
[data-theme="ember"],
[data-theme="emerald"],
[data-theme="amethyst"],
[data-theme="daylight"],
[data-theme="amethyst-oled"],
[data-theme="arctic"],
[data-theme="ocean-dark"],
[data-theme="vintage-amber"],
[data-theme="pastel-mocha"],
[data-theme="neon-night"],
[data-theme="pastel-latte"],
[data-theme="paper-light"],
[data-theme="burgundy"],
[data-theme="cobalt-slate"] {
  --catalog-surface: var(--bg-card);
  --catalog-control: var(--bg-tertiary);
  --catalog-focus: var(--accent);
  --catalog-focus-rgb: var(--accent-rgb);
  --catalog-focus-rgb-legacy: var(--accent-rgb-legacy);
}