/* GENERATED from the Theme Lab picks (scripts are not kept; edit values here).
   15 themes. Each .theme-<id> class on <body> sets the redesign tokens and the
   legacy names older components read, exactly as tokens.css did for its three.
   --glow is the one soft light behind sign-in and landing; --bg-tint the
   accent-tinted fill for selected rows. Row 1 of the picker = tier 4. */

/* Emerald — dark, 4★ */
.theme-emerald {
  --bg: #0b140f;
  --surface: color-mix(in srgb, #fff 5%, #0b140f);
  --surface-2: color-mix(in srgb, #fff 9%, #0b140f);
  --elev: color-mix(in srgb, #fff 7%, #0b140f);
  --border: color-mix(in srgb, #fff 10%, #0b140f);
  --border-2: color-mix(in srgb, #fff 17%, #0b140f);
  --text: #f4f4f6;
  --text-2: #b3b2bf;
  --text-3: #82818e;
  --accent: #10b981;
  --accent-2: #a3e635;
  --accent-soft: color-mix(in srgb, #10b981 18%, #0b140f);
  --accent-ink: color-mix(in srgb, #10b981 82%, #fff);
  --on-accent: #04140c;
  --presence: #34d399;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.55);
  --av-bg: color-mix(in srgb, #10b981 22%, #0b140f);
  --glow: rgba(16,185,129,.26);
  --bg-tint: color-mix(in srgb, #10b981 10%, #0b140f);
  color-scheme: dark;
  --ink-rgb: 255 255 255;
  --bg-rgb: 11 20 15;
  --acc-rgb: 16 185 129;
  --acc2-rgb: 163 230 53;
  --accent-strong: #10b981;
  --on-strong: #04140c;
}

/* Lavender — light, 4★ */
.theme-lavender {
  --bg: #fbf9ff;
  --surface: #ffffff;
  --surface-2: #f2edfc;
  --elev: #ffffff;
  --border: color-mix(in srgb, #000 8%, #fbf9ff);
  --border-2: color-mix(in srgb, #000 15%, #fbf9ff);
  --text: #16151d;
  --text-2: #55546a;
  --text-3: #8a8999;
  --accent: #7c3aed;
  --accent-2: #db2777;
  --accent-soft: color-mix(in srgb, #7c3aed 12%, #fff);
  --accent-ink: color-mix(in srgb, #7c3aed 85%, #000);
  --on-accent: #ffffff;
  --presence: #16a34a;
  --shadow-card: 0 1px 2px rgba(20,20,40,.05), 0 8px 24px rgba(20,20,40,.07);
  --shadow-pop: 0 18px 54px rgba(20,20,40,.16);
  --av-bg: color-mix(in srgb, #7c3aed 14%, #fff);
  --glow: rgba(196,181,253,.5);
  --bg-tint: color-mix(in srgb, #7c3aed 8%, #fff);
  color-scheme: light;
  --ink-rgb: 22 21 29;
  --bg-rgb: 251 249 255;
  --acc-rgb: 124 58 237;
  --acc2-rgb: 219 39 119;
  --accent-strong: #7c3aed;
  --on-strong: #ffffff;
}

/* Lemonade — light, 4★ */
.theme-lemon {
  --bg: #fffdf3;
  --surface: #ffffff;
  --surface-2: #fbf6dc;
  --elev: #ffffff;
  --border: color-mix(in srgb, #000 8%, #fffdf3);
  --border-2: color-mix(in srgb, #000 15%, #fffdf3);
  --text: #16151d;
  --text-2: #55546a;
  --text-3: #8a8999;
  --accent: #ca9a04;
  --accent-2: #7c3aed;
  --accent-soft: color-mix(in srgb, #ca9a04 12%, #fff);
  --accent-ink: color-mix(in srgb, #ca9a04 85%, #000);
  --on-accent: #1a1505;
  --presence: #16a34a;
  --shadow-card: 0 1px 2px rgba(20,20,40,.05), 0 8px 24px rgba(20,20,40,.07);
  --shadow-pop: 0 18px 54px rgba(20,20,40,.16);
  --av-bg: color-mix(in srgb, #ca9a04 14%, #fff);
  --glow: rgba(253,224,71,.45);
  --bg-tint: color-mix(in srgb, #ca9a04 8%, #fff);
  color-scheme: light;
  --ink-rgb: 22 21 29;
  --bg-rgb: 255 253 243;
  --acc-rgb: 202 154 4;
  --acc2-rgb: 124 58 237;
  --accent-strong: #ca9a04;
  --on-strong: #1a1505;
}

/* Lilac Mono — dark, 4★ (accent = the logo / demo-film violet #a78bfa since 2026-10-20) */
.theme-lilac {
  --bg: #131317;
  --surface: color-mix(in srgb, #fff 5%, #131317);
  --surface-2: color-mix(in srgb, #fff 9%, #131317);
  --elev: color-mix(in srgb, #fff 7%, #131317);
  --border: color-mix(in srgb, #fff 10%, #131317);
  --border-2: color-mix(in srgb, #fff 17%, #131317);
  --text: #f4f4f6;
  --text-2: #b3b2bf;
  --text-3: #82818e;
  --accent: #a78bfa;
  --accent-2: #f9a8d4;
  --accent-soft: color-mix(in srgb, #a78bfa 18%, #131317);
  --accent-ink: color-mix(in srgb, #a78bfa 82%, #fff);
  --on-accent: #17112b;
  --presence: #34d399;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.55);
  --av-bg: color-mix(in srgb, #a78bfa 22%, #131317);
  --glow: rgba(167,139,250,.24);
  --bg-tint: color-mix(in srgb, #a78bfa 10%, #131317);
  color-scheme: dark;
  --ink-rgb: 255 255 255;
  --bg-rgb: 19 19 23;
  --acc-rgb: 167 139 250;
  --acc2-rgb: 249 168 212;
  --accent-strong: #a78bfa;
  --on-strong: #17112b;
}

/* Fresh Lime — light, 4★ */
.theme-lime {
  --bg: #fbfef6;
  --surface: #ffffff;
  --surface-2: #f0f8e4;
  --elev: #ffffff;
  --border: color-mix(in srgb, #000 8%, #fbfef6);
  --border-2: color-mix(in srgb, #000 15%, #fbfef6);
  --text: #16151d;
  --text-2: #55546a;
  --text-3: #8a8999;
  --accent: #65a30d;
  --accent-2: #0284c7;
  --accent-soft: color-mix(in srgb, #65a30d 12%, #fff);
  --accent-ink: color-mix(in srgb, #65a30d 85%, #000);
  --on-accent: #ffffff;
  --presence: #16a34a;
  --shadow-card: 0 1px 2px rgba(20,20,40,.05), 0 8px 24px rgba(20,20,40,.07);
  --shadow-pop: 0 18px 54px rgba(20,20,40,.16);
  --av-bg: color-mix(in srgb, #65a30d 14%, #fff);
  --glow: rgba(190,242,100,.45);
  --bg-tint: color-mix(in srgb, #65a30d 8%, #fff);
  color-scheme: light;
  --ink-rgb: 22 21 29;
  --bg-rgb: 251 254 246;
  --acc-rgb: 101 163 13;
  --acc2-rgb: 2 132 199;
  --accent-strong: #65a30d;
  --on-strong: #ffffff;
}

/* Sky — dark, 4★ */
.theme-sky {
  --bg: #0b131c;
  --surface: color-mix(in srgb, #fff 5%, #0b131c);
  --surface-2: color-mix(in srgb, #fff 9%, #0b131c);
  --elev: color-mix(in srgb, #fff 7%, #0b131c);
  --border: color-mix(in srgb, #fff 10%, #0b131c);
  --border-2: color-mix(in srgb, #fff 17%, #0b131c);
  --text: #f4f4f6;
  --text-2: #b3b2bf;
  --text-3: #82818e;
  --accent: #38bdf8;
  --accent-2: #c4b5fd;
  --accent-soft: color-mix(in srgb, #38bdf8 18%, #0b131c);
  --accent-ink: color-mix(in srgb, #38bdf8 82%, #fff);
  --on-accent: #04192a;
  --presence: #34d399;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.55);
  --av-bg: color-mix(in srgb, #38bdf8 22%, #0b131c);
  --glow: rgba(56,189,248,.28);
  --bg-tint: color-mix(in srgb, #38bdf8 10%, #0b131c);
  color-scheme: dark;
  --ink-rgb: 255 255 255;
  --bg-rgb: 11 19 28;
  --acc-rgb: 56 189 248;
  --acc2-rgb: 196 181 253;
  --accent-strong: #38bdf8;
  --on-strong: #04192a;
}

/* Sunbeam — dark, 4★ */
.theme-sunbeam {
  --bg: #16150f;
  --surface: color-mix(in srgb, #fff 5%, #16150f);
  --surface-2: color-mix(in srgb, #fff 9%, #16150f);
  --elev: color-mix(in srgb, #fff 7%, #16150f);
  --border: color-mix(in srgb, #fff 10%, #16150f);
  --border-2: color-mix(in srgb, #fff 17%, #16150f);
  --text: #f4f4f6;
  --text-2: #b3b2bf;
  --text-3: #82818e;
  --accent: #facc15;
  --accent-2: #a78bfa;
  --accent-soft: color-mix(in srgb, #facc15 18%, #16150f);
  --accent-ink: color-mix(in srgb, #facc15 82%, #fff);
  --on-accent: #1a1505;
  --presence: #34d399;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.55);
  --av-bg: color-mix(in srgb, #facc15 22%, #16150f);
  --glow: rgba(250,204,21,.22);
  --bg-tint: color-mix(in srgb, #facc15 10%, #16150f);
  color-scheme: dark;
  --ink-rgb: 255 255 255;
  --bg-rgb: 22 21 15;
  --acc-rgb: 250 204 21;
  --acc2-rgb: 167 139 250;
  --accent-strong: #facc15;
  --on-strong: #1a1505;
}

/* Amethyst — dark, 3★ */
.theme-amethyst {
  --bg: #100c1a;
  --surface: color-mix(in srgb, #fff 5%, #100c1a);
  --surface-2: color-mix(in srgb, #fff 9%, #100c1a);
  --elev: color-mix(in srgb, #fff 7%, #100c1a);
  --border: color-mix(in srgb, #fff 10%, #100c1a);
  --border-2: color-mix(in srgb, #fff 17%, #100c1a);
  --text: #f4f4f6;
  --text-2: #b3b2bf;
  --text-3: #82818e;
  --accent: #8b5cf6;
  --accent-2: #e879f9;
  --accent-soft: color-mix(in srgb, #8b5cf6 18%, #100c1a);
  --accent-ink: color-mix(in srgb, #8b5cf6 82%, #fff);
  --on-accent: #ffffff;
  --presence: #34d399;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.55);
  --av-bg: color-mix(in srgb, #8b5cf6 22%, #100c1a);
  --glow: rgba(139,92,246,.30);
  --bg-tint: color-mix(in srgb, #8b5cf6 10%, #100c1a);
  color-scheme: dark;
  --ink-rgb: 255 255 255;
  --bg-rgb: 16 12 26;
  --acc-rgb: 139 92 246;
  --acc2-rgb: 232 121 249;
  --accent-strong: #8b5cf6;
  --on-strong: #ffffff;
}

/* Aqua — light, 3★ */
.theme-aqua {
  --bg: #f6fefd;
  --surface: #ffffff;
  --surface-2: #e9f7f8;
  --elev: #ffffff;
  --border: color-mix(in srgb, #000 8%, #f6fefd);
  --border-2: color-mix(in srgb, #000 15%, #f6fefd);
  --text: #16151d;
  --text-2: #55546a;
  --text-3: #8a8999;
  --accent: #0d9488;
  --accent-2: #2563eb;
  --accent-soft: color-mix(in srgb, #0d9488 12%, #fff);
  --accent-ink: color-mix(in srgb, #0d9488 85%, #000);
  --on-accent: #ffffff;
  --presence: #16a34a;
  --shadow-card: 0 1px 2px rgba(20,20,40,.05), 0 8px 24px rgba(20,20,40,.07);
  --shadow-pop: 0 18px 54px rgba(20,20,40,.16);
  --av-bg: color-mix(in srgb, #0d9488 14%, #fff);
  --glow: rgba(94,234,212,.45);
  --bg-tint: color-mix(in srgb, #0d9488 8%, #fff);
  color-scheme: light;
  --ink-rgb: 22 21 29;
  --bg-rgb: 246 254 253;
  --acc-rgb: 13 148 136;
  --acc2-rgb: 37 99 235;
  --accent-strong: #0d9488;
  --on-strong: #ffffff;
}

/* Aurora — dark, 3★ */
.theme-aurora {
  --bg: #0c1218;
  --surface: color-mix(in srgb, #fff 5%, #0c1218);
  --surface-2: color-mix(in srgb, #fff 9%, #0c1218);
  --elev: color-mix(in srgb, #fff 7%, #0c1218);
  --border: color-mix(in srgb, #fff 10%, #0c1218);
  --border-2: color-mix(in srgb, #fff 17%, #0c1218);
  --text: #f4f4f6;
  --text-2: #b3b2bf;
  --text-3: #82818e;
  --accent: #14b8a6;
  --accent-2: #a78bfa;
  --accent-soft: color-mix(in srgb, #14b8a6 18%, #0c1218);
  --accent-ink: color-mix(in srgb, #14b8a6 82%, #fff);
  --on-accent: #04201c;
  --presence: #34d399;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.55);
  --av-bg: color-mix(in srgb, #14b8a6 22%, #0c1218);
  --glow: rgba(45,212,191,.22);
  --bg-tint: color-mix(in srgb, #14b8a6 10%, #0c1218);
  color-scheme: dark;
  --ink-rgb: 255 255 255;
  --bg-rgb: 12 18 24;
  --acc-rgb: 20 184 166;
  --acc2-rgb: 167 139 250;
  --accent-strong: #14b8a6;
  --on-strong: #04201c;
}

/* Iris — dark, 3★ */
.theme-iris {
  --bg: #121320;
  --surface: color-mix(in srgb, #fff 5%, #121320);
  --surface-2: color-mix(in srgb, #fff 9%, #121320);
  --elev: color-mix(in srgb, #fff 7%, #121320);
  --border: color-mix(in srgb, #fff 10%, #121320);
  --border-2: color-mix(in srgb, #fff 17%, #121320);
  --text: #f4f4f6;
  --text-2: #b3b2bf;
  --text-3: #82818e;
  --accent: #818cf8;
  --accent-2: #f0abfc;
  --accent-soft: color-mix(in srgb, #818cf8 18%, #121320);
  --accent-ink: color-mix(in srgb, #818cf8 82%, #fff);
  --on-accent: #0d0e1c;
  --presence: #34d399;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.55);
  --av-bg: color-mix(in srgb, #818cf8 22%, #121320);
  --glow: rgba(129,140,248,.28);
  --bg-tint: color-mix(in srgb, #818cf8 10%, #121320);
  color-scheme: dark;
  --ink-rgb: 255 255 255;
  --bg-rgb: 18 19 32;
  --acc-rgb: 129 140 248;
  --acc2-rgb: 240 171 252;
  --accent-strong: #818cf8;
  --on-strong: #0d0e1c;
}

/* Mint — dark, 3★ */
.theme-mint {
  --bg: #0c1514;
  --surface: color-mix(in srgb, #fff 5%, #0c1514);
  --surface-2: color-mix(in srgb, #fff 9%, #0c1514);
  --elev: color-mix(in srgb, #fff 7%, #0c1514);
  --border: color-mix(in srgb, #fff 10%, #0c1514);
  --border-2: color-mix(in srgb, #fff 17%, #0c1514);
  --text: #f4f4f6;
  --text-2: #b3b2bf;
  --text-3: #82818e;
  --accent: #2dd4bf;
  --accent-2: #a78bfa;
  --accent-soft: color-mix(in srgb, #2dd4bf 18%, #0c1514);
  --accent-ink: color-mix(in srgb, #2dd4bf 82%, #fff);
  --on-accent: #04201c;
  --presence: #34d399;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.55);
  --av-bg: color-mix(in srgb, #2dd4bf 22%, #0c1514);
  --glow: rgba(45,212,191,.25);
  --bg-tint: color-mix(in srgb, #2dd4bf 10%, #0c1514);
  color-scheme: dark;
  --ink-rgb: 255 255 255;
  --bg-rgb: 12 21 20;
  --acc-rgb: 45 212 191;
  --acc2-rgb: 167 139 250;
  --accent-strong: #2dd4bf;
  --on-strong: #04201c;
}

/* Pearl Sky — light, 3★ */
.theme-pearl {
  --bg: #f8faff;
  --surface: #ffffff;
  --surface-2: #eef3fc;
  --elev: #ffffff;
  --border: color-mix(in srgb, #000 8%, #f8faff);
  --border-2: color-mix(in srgb, #000 15%, #f8faff);
  --text: #16151d;
  --text-2: #55546a;
  --text-3: #8a8999;
  --accent: #2563eb;
  --accent-2: #7c3aed;
  --accent-soft: color-mix(in srgb, #2563eb 12%, #fff);
  --accent-ink: color-mix(in srgb, #2563eb 85%, #000);
  --on-accent: #ffffff;
  --presence: #16a34a;
  --shadow-card: 0 1px 2px rgba(20,20,40,.05), 0 8px 24px rgba(20,20,40,.07);
  --shadow-pop: 0 18px 54px rgba(20,20,40,.16);
  --av-bg: color-mix(in srgb, #2563eb 14%, #fff);
  --glow: rgba(147,197,253,.45);
  --bg-tint: color-mix(in srgb, #2563eb 8%, #fff);
  color-scheme: light;
  --ink-rgb: 22 21 29;
  --bg-rgb: 248 250 255;
  --acc-rgb: 37 99 235;
  --acc2-rgb: 124 58 237;
  --accent-strong: #2563eb;
  --on-strong: #ffffff;
}

/* Petal — light, 3★ */
.theme-pink {
  --bg: #fff8fb;
  --surface: #ffffff;
  --surface-2: #fbedf4;
  --elev: #ffffff;
  --border: color-mix(in srgb, #000 8%, #fff8fb);
  --border-2: color-mix(in srgb, #000 15%, #fff8fb);
  --text: #16151d;
  --text-2: #55546a;
  --text-3: #8a8999;
  --accent: #db2777;
  --accent-2: #8b5cf6;
  --accent-soft: color-mix(in srgb, #db2777 12%, #fff);
  --accent-ink: color-mix(in srgb, #db2777 85%, #000);
  --on-accent: #ffffff;
  --presence: #16a34a;
  --shadow-card: 0 1px 2px rgba(20,20,40,.05), 0 8px 24px rgba(20,20,40,.07);
  --shadow-pop: 0 18px 54px rgba(20,20,40,.16);
  --av-bg: color-mix(in srgb, #db2777 14%, #fff);
  --glow: rgba(249,168,212,.45);
  --bg-tint: color-mix(in srgb, #db2777 8%, #fff);
  color-scheme: light;
  --ink-rgb: 22 21 29;
  --bg-rgb: 255 248 251;
  --acc-rgb: 219 39 119;
  --acc2-rgb: 139 92 246;
  --accent-strong: #db2777;
  --on-strong: #ffffff;
}

/* Sapphire — dark, 3★ */
.theme-sapphire {
  --bg: #0a1024;
  --surface: color-mix(in srgb, #fff 5%, #0a1024);
  --surface-2: color-mix(in srgb, #fff 9%, #0a1024);
  --elev: color-mix(in srgb, #fff 7%, #0a1024);
  --border: color-mix(in srgb, #fff 10%, #0a1024);
  --border-2: color-mix(in srgb, #fff 17%, #0a1024);
  --text: #f4f4f6;
  --text-2: #b3b2bf;
  --text-3: #82818e;
  --accent: #3b82f6;
  --accent-2: #a78bfa;
  --accent-soft: color-mix(in srgb, #3b82f6 18%, #0a1024);
  --accent-ink: color-mix(in srgb, #3b82f6 82%, #fff);
  --on-accent: #ffffff;
  --presence: #34d399;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --shadow-pop: 0 20px 60px rgba(0,0,0,.55);
  --av-bg: color-mix(in srgb, #3b82f6 22%, #0a1024);
  --glow: rgba(59,130,246,.32);
  --bg-tint: color-mix(in srgb, #3b82f6 10%, #0a1024);
  color-scheme: dark;
  --ink-rgb: 255 255 255;
  --bg-rgb: 10 16 36;
  --acc-rgb: 59 130 246;
  --acc2-rgb: 167 139 250;
  --accent-strong: #3b82f6;
  --on-strong: #ffffff;
}

/* Shared by every theme: type, radii, and the legacy bridge. */
.theme-emerald,
.theme-lavender,
.theme-lemon,
.theme-lilac,
.theme-lime,
.theme-sky,
.theme-sunbeam,
.theme-amethyst,
.theme-aqua,
.theme-aurora,
.theme-iris,
.theme-mint,
.theme-pearl,
.theme-pink,
.theme-sapphire {
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  --radius: 18px; --radius-lg: 26px; --radius-sm: 11px; --bubble: 19px; --bubble-tail: 6px;
  --bg-app: var(--bg);
  --bg-topbar: var(--bg);
  --bg-inputbar: var(--bg);
  --bg-msg-ai: var(--surface);
  --text-muted: var(--text-3);
  --blue: var(--accent);
  --blue-dark: var(--accent-ink);
  --blue-light: var(--accent-ink);
  --blue-glow: var(--accent-soft);
}