/* Colorways: ONE block of design tokens per theme. app.css only consumes these tokens (no colour literals), so a theme is
   fully defined here. The server sets <html data-theme="slug"> (app.py THEMES, users.theme, cookie st_theme for the login page).
   Add a colourway: copy a block, change the values, add it to app.THEMES -- and run the contrast check (every text pair >= 4.5:1).
   Rules that keep the themes coherent: green/amber/red keep their meaning (a status colour moves, never the accent, when the
   accent comes within 30deg of it); *-ov tokens are the status colours ON the dark scrim over a thumbnail; --accent-2 is the
   second colour (button gradient start, tall logo column, glow top right). */

:root, [data-theme] {
  /* old names kept as aliases, so nothing that still says --pink/--purple changes */
  --pink: var(--accent); --pink-on: var(--accent-on); --pink-text: var(--accent-text);
  --purple: var(--accent); --purple-soft: var(--accent-2); --purple-glow: var(--accent-glow);
  --card-solid: var(--card); --good2: var(--good); --viral: var(--good);
}

/* Standard (dark) -- Schwarz, Pink, Indigo-Schimmer */
:root, [data-theme="noir-pink"] {
  color-scheme: dark;
  --bg: #0b0910;
  --bg-soft: #131120;
  --sidebar: #0f0e12;
  --card: #151318;
  --border: #26232c;
  --text: #edeaf0;
  --muted: #8b8693;
  --muted2: #9aa0b4;
  --accent: #ff2e7e;
  --accent-on: #0e0d11;
  --accent-text: #ff7bad;
  --accent-2: #e0266d;
  --accent-soft: rgba(255, 46, 126, 0.10);
  --accent-glow: rgba(255, 46, 126, 0.35);
  --grad-1: rgba(110, 42, 66, 0.38);
  --grad-2: rgba(76, 63, 191, 0.22);
  --good: #35d6a4;
  --good-bg: rgba(53, 214, 164, 0.14);
  --average: #fbbf24;
  --average-bg: rgba(251, 191, 36, 0.14);
  --bad: #eb6969;
  --bad-bg: rgba(231, 85, 85, 0.14);
  --none-bg: rgba(111, 106, 121, 0.14);
  --good-ov: #35d6a4;
  --average-ov: #fbbf24;
  --bad-ov: #e75555;
  --bad-solid: #d03e3e;
  --btn-text: #ffffff;
  --logo-hi: #ff2e7e;
  --link: #ff2e7e;
  --btn-from: #e0266d;
  --btn-to: #ff2e7e;
  --btn-hi: #ff2e7e;
  --hover-wash: rgba(255, 255, 255, 0.05);
  --track: rgba(255, 255, 255, 0.07);
  --grid-line: rgba(255, 255, 255, 0.09);
  --shade: rgba(0, 0, 0, 0.5);
  --surface-raised: #1e1b24;
  --scrim: rgba(0, 0, 0, 0.82);
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa0b4' stroke-width='1.5'/%3E%3C/svg%3E");
  --ic-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23ff7bad' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%230e0d11' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Noir Gold (dark) -- Schwarz, Pflaume, gebürstetes Gold */
[data-theme="noir-gold"] {
  color-scheme: dark;
  --bg: #0b0910;
  --bg-soft: #131120;
  --sidebar: #0f0e12;
  --card: #151318;
  --border: #26232c;
  --text: #edeaf0;
  --muted: #8e8a96;
  --muted2: #9aa0b4;
  --accent: #cfa953;
  --accent-on: #17120a;
  --accent-text: #e2c178;
  --accent-2: #a67c31;
  --accent-soft: rgba(207, 169, 83, 0.10);
  --accent-glow: rgba(207, 169, 83, 0.35);
  --grad-1: rgba(120, 88, 36, 0.34);
  --grad-2: rgba(76, 63, 191, 0.16);
  --good: #3fcf96;
  --good-bg: rgba(63, 207, 150, 0.14);
  --average: #ef8f45;
  --average-bg: rgba(239, 143, 69, 0.14);
  --bad: #e87474;
  --bad-bg: rgba(226, 88, 88, 0.14);
  --none-bg: rgba(111, 106, 121, 0.14);
  --good-ov: #3fcf96;
  --average-ov: #ef8f45;
  --bad-ov: #e25858;
  --bad-solid: #d03e3e;
  --btn-text: #17120a;
  --logo-hi: #a67c31;
  --link: #e2c178;
  --btn-from: #a67c31;
  --btn-to: #cfa953;
  --btn-hi: #d8b872;
  --hover-wash: rgba(255, 255, 255, 0.05);
  --track: rgba(255, 255, 255, 0.07);
  --grid-line: rgba(255, 255, 255, 0.09);
  --shade: rgba(0, 0, 0, 0.5);
  --surface-raised: #232126;
  --scrim: rgba(0, 0, 0, 0.82);
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa0b4' stroke-width='1.5'/%3E%3C/svg%3E");
  --ic-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23e2c178' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%2317120a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Noir Lilac (dark) -- Dein Schwarz, helles Pastell-Lila */
[data-theme="noir-lilac"] {
  color-scheme: dark;
  --bg: #0b0910;
  --bg-soft: #131120;
  --sidebar: #0f0e12;
  --card: #151318;
  --border: #26232c;
  --text: #edeaf0;
  --muted: #8e8a96;
  --muted2: #9aa0b4;
  --accent: #c4b5fd;
  --accent-on: #15101f;
  --accent-text: #d6cbff;
  --accent-2: #9d8bf5;
  --accent-soft: rgba(196, 181, 253, 0.10);
  --accent-glow: rgba(196, 181, 253, 0.32);
  --grad-1: rgba(112, 72, 186, 0.40);
  --grad-2: rgba(76, 63, 191, 0.24);
  --good: #35d6a4;
  --good-bg: rgba(53, 214, 164, 0.14);
  --average: #fbbf24;
  --average-bg: rgba(251, 191, 36, 0.14);
  --bad: #ed7272;
  --bad-bg: rgba(231, 85, 85, 0.14);
  --none-bg: rgba(111, 106, 121, 0.14);
  --good-ov: #35d6a4;
  --average-ov: #fbbf24;
  --bad-ov: #e75555;
  --bad-solid: #d03e3e;
  --btn-text: #15101f;
  --logo-hi: #9d8bf5;
  --link: #d6cbff;
  --btn-from: #9d8bf5;
  --btn-to: #c4b5fd;
  --btn-hi: #cfc2fd;
  --hover-wash: rgba(255, 255, 255, 0.05);
  --track: rgba(255, 255, 255, 0.07);
  --grid-line: rgba(255, 255, 255, 0.09);
  --shade: rgba(0, 0, 0, 0.5);
  --surface-raised: #232126;
  --scrim: rgba(0, 0, 0, 0.82);
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa0b4' stroke-width='1.5'/%3E%3C/svg%3E");
  --ic-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23d6cbff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%2315101f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Noir Orchid (dark) -- Dein Schwarz, Orchidee zu Lila */
[data-theme="noir-orchid"] {
  color-scheme: dark;
  --bg: #0b0910;
  --bg-soft: #131120;
  --sidebar: #0f0e12;
  --card: #151318;
  --border: #26232c;
  --text: #edeaf0;
  --muted: #8e8a96;
  --muted2: #9aa0b4;
  --accent: #f0abfc;
  --accent-on: #1d0f22;
  --accent-text: #f5c6fd;
  --accent-2: #b79cff;
  --accent-soft: rgba(240, 171, 252, 0.10);
  --accent-glow: rgba(240, 171, 252, 0.32);
  --grad-1: rgba(150, 62, 160, 0.38);
  --grad-2: rgba(92, 70, 200, 0.26);
  --good: #35d6a4;
  --good-bg: rgba(53, 214, 164, 0.14);
  --average: #fbbf24;
  --average-bg: rgba(251, 191, 36, 0.14);
  --bad: #ed7272;
  --bad-bg: rgba(231, 85, 85, 0.14);
  --none-bg: rgba(111, 106, 121, 0.14);
  --good-ov: #35d6a4;
  --average-ov: #fbbf24;
  --bad-ov: #e75555;
  --bad-solid: #d03e3e;
  --btn-text: #1d0f22;
  --logo-hi: #b79cff;
  --link: #f5c6fd;
  --btn-from: #b79cff;
  --btn-to: #f0abfc;
  --btn-hi: #f3bafd;
  --hover-wash: rgba(255, 255, 255, 0.05);
  --track: rgba(255, 255, 255, 0.07);
  --grid-line: rgba(255, 255, 255, 0.09);
  --shade: rgba(0, 0, 0, 0.5);
  --surface-raised: #232126;
  --scrim: rgba(0, 0, 0, 0.82);
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa0b4' stroke-width='1.5'/%3E%3C/svg%3E");
  --ic-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23f5c6fd' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%231d0f22' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Noir Blush (dark) -- Dein Schwarz, zartes Rosé zu Lila */
[data-theme="noir-blush"] {
  color-scheme: dark;
  --bg: #0b0910;
  --bg-soft: #131120;
  --sidebar: #0f0e12;
  --card: #151318;
  --border: #26232c;
  --text: #edeaf0;
  --muted: #8e8a96;
  --muted2: #9aa0b4;
  --accent: #f9a8d4;
  --accent-on: #200d18;
  --accent-text: #fbc4e2;
  --accent-2: #c4a2f5;
  --accent-soft: rgba(249, 168, 212, 0.10);
  --accent-glow: rgba(249, 168, 212, 0.32);
  --grad-1: rgba(150, 56, 100, 0.38);
  --grad-2: rgba(100, 70, 200, 0.22);
  --good: #35d6a4;
  --good-bg: rgba(53, 214, 164, 0.14);
  --average: #fbbf24;
  --average-bg: rgba(251, 191, 36, 0.14);
  --bad: #ed7272;
  --bad-bg: rgba(231, 85, 85, 0.14);
  --none-bg: rgba(111, 106, 121, 0.14);
  --good-ov: #35d6a4;
  --average-ov: #fbbf24;
  --bad-ov: #e75555;
  --bad-solid: #d03e3e;
  --btn-text: #200d18;
  --logo-hi: #c4a2f5;
  --link: #fbc4e2;
  --btn-from: #c4a2f5;
  --btn-to: #f9a8d4;
  --btn-hi: #fab8dc;
  --hover-wash: rgba(255, 255, 255, 0.05);
  --track: rgba(255, 255, 255, 0.07);
  --grid-line: rgba(255, 255, 255, 0.09);
  --shade: rgba(0, 0, 0, 0.5);
  --surface-raised: #232126;
  --scrim: rgba(0, 0, 0, 0.82);
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa0b4' stroke-width='1.5'/%3E%3C/svg%3E");
  --ic-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23fbc4e2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23200d18' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Noir Periwinkle (dark) -- Dein Schwarz, Vergissmeinnicht-Blau zu Lila */
[data-theme="noir-periwinkle"] {
  color-scheme: dark;
  --bg: #0b0910;
  --bg-soft: #131120;
  --sidebar: #0f0e12;
  --card: #151318;
  --border: #26232c;
  --text: #edeaf0;
  --muted: #8e8a96;
  --muted2: #9aa0b4;
  --accent: #a5b4fc;
  --accent-on: #0f1226;
  --accent-text: #c3ccff;
  --accent-2: #8b9cf6;
  --accent-soft: rgba(165, 180, 252, 0.10);
  --accent-glow: rgba(165, 180, 252, 0.30);
  --grad-1: rgba(70, 76, 170, 0.38);
  --grad-2: rgba(112, 72, 186, 0.24);
  --good: #35d6a4;
  --good-bg: rgba(53, 214, 164, 0.14);
  --average: #fbbf24;
  --average-bg: rgba(251, 191, 36, 0.14);
  --bad: #ed7272;
  --bad-bg: rgba(231, 85, 85, 0.14);
  --none-bg: rgba(111, 106, 121, 0.14);
  --good-ov: #35d6a4;
  --average-ov: #fbbf24;
  --bad-ov: #e75555;
  --bad-solid: #d03e3e;
  --btn-text: #0f1226;
  --logo-hi: #8b9cf6;
  --link: #c3ccff;
  --btn-from: #8b9cf6;
  --btn-to: #a5b4fc;
  --btn-hi: #b5c2fd;
  --hover-wash: rgba(255, 255, 255, 0.05);
  --track: rgba(255, 255, 255, 0.07);
  --grid-line: rgba(255, 255, 255, 0.09);
  --shade: rgba(0, 0, 0, 0.5);
  --surface-raised: #232126;
  --scrim: rgba(0, 0, 0, 0.82);
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa0b4' stroke-width='1.5'/%3E%3C/svg%3E");
  --ic-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23c3ccff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%230f1226' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Noir Aqua (dark) -- Dein Schwarz, Pastell-Aqua zu Lila */
[data-theme="noir-aqua"] {
  color-scheme: dark;
  --bg: #0b0910;
  --bg-soft: #131120;
  --sidebar: #0f0e12;
  --card: #151318;
  --border: #26232c;
  --text: #edeaf0;
  --muted: #8e8a96;
  --muted2: #9aa0b4;
  --accent: #7ee7f5;
  --accent-on: #06171b;
  --accent-text: #a2effa;
  --accent-2: #8fa7ff;
  --accent-soft: rgba(126, 231, 245, 0.10);
  --accent-glow: rgba(126, 231, 245, 0.30);
  --grad-1: rgba(40, 110, 130, 0.36);
  --grad-2: rgba(100, 70, 200, 0.24);
  --good: #4ade80;
  --good-bg: rgba(74, 222, 128, 0.14);
  --average: #fbbf24;
  --average-bg: rgba(251, 191, 36, 0.14);
  --bad: #ed7272;
  --bad-bg: rgba(231, 85, 85, 0.14);
  --none-bg: rgba(111, 106, 121, 0.14);
  --good-ov: #4ade80;
  --average-ov: #fbbf24;
  --bad-ov: #e75555;
  --bad-solid: #d03e3e;
  --btn-text: #06171b;
  --logo-hi: #8fa7ff;
  --link: #a2effa;
  --btn-from: #8fa7ff;
  --btn-to: #7ee7f5;
  --btn-hi: #95ebf7;
  --hover-wash: rgba(255, 255, 255, 0.05);
  --track: rgba(255, 255, 255, 0.07);
  --grid-line: rgba(255, 255, 255, 0.09);
  --shade: rgba(0, 0, 0, 0.5);
  --surface-raised: #232126;
  --scrim: rgba(0, 0, 0, 0.82);
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa0b4' stroke-width='1.5'/%3E%3C/svg%3E");
  --ic-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23a2effa' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%2306171b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Noir Violet (dark) -- Dein Schwarz, kräftiges Violett */
[data-theme="noir-violet"] {
  color-scheme: dark;
  --bg: #0b0910;
  --bg-soft: #160f2b;
  --sidebar: #0f0d15;
  --card: #171222;
  --border: #2b2244;
  --text: #f1edf8;
  --muted: #9088a6;
  --muted2: #a89fc4;
  --accent: #8f4cf7;
  --accent-on: #ffffff;
  --accent-text: #c3a2ff;
  --accent-2: #6d28d9;
  --accent-soft: rgba(143, 76, 247, 0.15);
  --accent-glow: rgba(143, 76, 247, 0.45);
  --grad-1: rgba(124, 58, 237, 0.52);
  --grad-2: rgba(79, 70, 229, 0.30);
  --good: #35d6a4;
  --good-bg: rgba(53, 214, 164, 0.14);
  --average: #fbbf24;
  --average-bg: rgba(251, 191, 36, 0.14);
  --bad: #ed7272;
  --bad-bg: rgba(231, 85, 85, 0.14);
  --none-bg: rgba(125, 116, 151, 0.14);
  --good-ov: #35d6a4;
  --average-ov: #fbbf24;
  --bad-ov: #e75555;
  --bad-solid: #d03e3e;
  --btn-text: #ffffff;
  --logo-hi: #6d28d9;
  --link: #c3a2ff;
  --btn-from: #6d28d9;
  --btn-to: #8f4cf7;
  --btn-hi: #885acf;
  --hover-wash: rgba(255, 255, 255, 0.05);
  --track: rgba(255, 255, 255, 0.07);
  --grid-line: rgba(255, 255, 255, 0.09);
  --shade: rgba(0, 0, 0, 0.5);
  --surface-raised: #25202f;
  --scrim: rgba(0, 0, 0, 0.82);
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a89fc4' stroke-width='1.5'/%3E%3C/svg%3E");
  --ic-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23c3a2ff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}