/* Theme CSS variables - single source of truth for data-theme switching */
:root,
html[data-theme="night"] {
  --bg: #05070d;
  --ink: #f3f7ff;
  --muted: #a9bcd4;
  --head: #f5f9ff;
  --cyan: #67e8f9;
  --cyan-2: #c4f4ff;
  --blue: #3b82f6;
  --ok: #34f5a0;
  --line: rgba(148, 210, 255, 0.18);
  --panel: rgba(10, 16, 28, 0.62);
  --panel-2: rgba(12, 20, 34, 0.92);
  --topbar: rgba(6, 10, 18, 0.72);
  --topbar-ink: #f3f7ff;
  --topbar-muted: #a9bcd4;
  --well: rgba(255, 255, 255, 0.035);
  --well-2: rgba(4, 8, 16, 0.45);
  --thumb: #0a1220;
  --glass-hi: rgba(255, 255, 255, 0.12);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  --glow: 0 0 40px rgba(103, 232, 249, 0.16);
  --mark-hi: #1d4ed8;
  --mark-lo: #0f172a;
  --user-hi: #7dd3fc;
  --user-lo: #2563eb;
  --user-ink: #041018;
  --agent-bg: rgba(8, 14, 26, 0.78);
  --agent-ink: #e2edf8;
  --composer: rgba(6, 12, 22, 0.7);
  --send-ink: #04141c;
  --sandbox-hi: rgba(14, 28, 48, 0.9);
  --sandbox-lo: rgba(6, 12, 24, 0.96);
  --sandbox-line: rgba(103, 232, 249, 0.45);
  --sandbox-glow: rgba(103, 232, 249, 0.18);
  --draw: #7dd3fc;
  --draw-ink: #e0f2fe;
  --cta-hi: rgba(22, 48, 82, 0.9);
  --cta-lo: rgba(10, 20, 36, 0.95);
  --asset-hi: rgba(16, 32, 52, 0.88);
  --asset-lo: rgba(8, 16, 28, 0.95);
  --toast: #101826;
  --video: #070b12;
  --hud: rgba(255, 255, 255, 0.78);
  --pill: rgba(4, 8, 14, 0.72);
  --active-hi: rgba(59, 130, 246, 0.28);
  --active-lo: rgba(14, 32, 62, 0.78);
  --active-line: rgba(103, 232, 249, 0.55);
  --card-hover: rgba(103, 232, 249, 0.08);
  --hover: rgba(103, 232, 249, 0.1);
  --chip: rgba(10, 18, 32, 0.72);
  --orb-a: rgba(56, 189, 248, 0.22);
  --orb-b: rgba(59, 130, 246, 0.16);
  --orb-c: rgba(165, 180, 252, 0.1);
  --grid: rgba(148, 210, 255, 0.07);
  --radius: 18px;
  --header: 72px;
  /* Font stacks — next/font injects --font-poppins / --font-cormorant / --font-plex on <html> */
  --sans: var(--font-poppins), "Poppins", "Segoe UI", sans-serif;
  --serif: var(--font-cormorant), "Cormorant Garamond", "Times New Roman", serif;
  --mono: var(--font-plex), "IBM Plex Mono", ui-monospace, monospace;
  --bevel: inset 0 1px 0 var(--glass-hi), inset 0 -2px 6px rgba(0, 0, 0, 0.32);
  --press: inset 0 2px 8px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --extrude:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(0, 0, 0, 0.42),
    0 4px 0 rgba(0, 0, 0, 0.28);
  --lift: 0 10px 22px rgba(0, 0, 0, 0.28), 0 22px 40px rgba(0, 0, 0, 0.22);
  --lift-lo: 0 8px 16px rgba(0, 0, 0, 0.22);
  --face: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 38%, rgba(0, 0, 0, 0.18));
  /* High-contrast tip/popover surface — lifts off dark panels */
  --tip-bg: #eef8fc;
  --tip-ink: #0b1220;
  --tip-line: rgba(8, 24, 40, 0.22);
  --tip-shadow: 0 10px 28px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(0, 0, 0, 0.32);
  /* Call-control icon ink — white on dark raised faces */
  --ctrl-ink: #fff;
}

html[data-theme="cream"] {
  color-scheme: light;
  --bg: #efe6da;
  --ink: #000000;
  --muted: rgba(0, 0, 0, 0.62);
  --head: #000000;
  --cyan: #000000;
  --cyan-2: #000000;
  --blue: #000000;
  --ok: #000000;
  --line: rgba(0, 0, 0, 0.16);
  --panel: rgba(239, 230, 218, 0.94);
  --panel-2: #efe6da;
  --topbar: #000000;
  --topbar-ink: #efe6da;
  --topbar-muted: rgba(239, 230, 218, 0.72);
  --well: rgba(0, 0, 0, 0.05);
  --well-2: rgba(0, 0, 0, 0.06);
  --thumb: #e4d9cb;
  --glass-hi: rgba(255, 255, 255, 0.45);
  --shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
  --glow: 0 0 28px rgba(0, 0, 0, 0.08);
  --mark-hi: #000000;
  --mark-lo: #000000;
  --user-hi: #1a1a1a;
  --user-lo: #000000;
  --user-ink: #efe6da;
  --agent-bg: #efe6da;
  --agent-ink: #000000;
  --composer: #efe6da;
  --send-ink: #efe6da;
  --sandbox-hi: #efe6da;
  --sandbox-lo: #e7ddd0;
  --sandbox-line: rgba(0, 0, 0, 0.35);
  --sandbox-glow: rgba(0, 0, 0, 0.08);
  --draw: #000000;
  --draw-ink: #000000;
  --cta-hi: #efe6da;
  --cta-lo: #e7ddd0;
  --asset-hi: #efe6da;
  --asset-lo: #e7ddd0;
  --toast: #000000;
  --video: #000000;
  --hud: rgba(239, 230, 218, 0.9);
  --pill: rgba(0, 0, 0, 0.72);
  --active-hi: rgba(0, 0, 0, 0.08);
  --active-lo: rgba(0, 0, 0, 0.04);
  --active-line: rgba(0, 0, 0, 0.55);
  --card-hover: rgba(0, 0, 0, 0.04);
  --hover: rgba(0, 0, 0, 0.06);
  --chip: #efe6da;
  --orb-a: rgba(0, 0, 0, 0.06);
  --orb-b: rgba(0, 0, 0, 0.04);
  --orb-c: rgba(239, 230, 218, 0.8);
  --grid: rgba(0, 0, 0, 0.05);
  --radius: 12px;
  --ctrl-ink: #000000;
  --tip-bg: #000000;
  --tip-ink: #efe6da;
  --tip-line: rgba(239, 230, 218, 0.28);
  --tip-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16);
  --face: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 42%, rgba(0, 0, 0, 0.04));
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 4px rgba(0, 0, 0, 0.06);
  --press: inset 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --extrude: 0 1px 0 rgba(0, 0, 0, 0.12), 0 2px 0 rgba(0, 0, 0, 0.06);
  --lift: 0 8px 18px rgba(0, 0, 0, 0.08), 0 16px 28px rgba(0, 0, 0, 0.06);
  --lift-lo: 0 6px 12px rgba(0, 0, 0, 0.06);
}

html[data-theme="jewelry"] {
  color-scheme: light;
}

html[data-theme="jewelry"] {
  --bg: #f8f4f0;
  --ink: #1a1a1a;
  --muted: #5f534a;
  --head: #1a1a1a;
  --cyan: #b76e79;
  --cyan-2: #6f4a42;
  --blue: #9a6b4f;
  --ok: #c4896a;
  --line: rgba(180, 160, 140, 0.35);
  --panel: rgba(255, 252, 248, 0.92);
  --panel-2: rgba(255, 255, 255, 0.98);
  --topbar: #1a1a1a;
  --topbar-ink: #f8f4f0;
  --topbar-muted: #d2c2b4;
  --well: rgba(26, 26, 26, 0.04);
  --well-2: rgba(242, 234, 226, 0.92);
  --thumb: #e8ddd4;
  --glass-hi: rgba(255, 255, 255, 0.85);
  --shadow: 0 16px 36px rgba(70, 50, 40, 0.08);
  --glow: 0 0 36px rgba(183, 110, 121, 0.14);
  --mark-hi: #d4a574;
  --mark-lo: #8a5a48;
  --user-hi: #e8d4c4;
  --user-lo: #c9a07a;
  --user-ink: #1a1a1a;
  --agent-bg: rgba(255, 255, 255, 0.94);
  --agent-ink: #2a241e;
  --composer: rgba(255, 255, 255, 0.94);
  --send-ink: #fffaf6;
  --sandbox-hi: #ffffff;
  --sandbox-lo: #f3ebe4;
  --sandbox-line: rgba(183, 110, 121, 0.32);
  --sandbox-glow: rgba(183, 110, 121, 0.14);
  --draw: #b76e79;
  --draw-ink: #1a1a1a;
  --cta-hi: #ffffff;
  --cta-lo: #f5efe9;
  --asset-hi: #ffffff;
  --asset-lo: #f7f1eb;
  --toast: #ffffff;
  --video: #141210;
  --hud: rgba(255, 255, 255, 0.88);
  --pill: rgba(20, 16, 14, 0.72);
  --active-hi: rgba(183, 110, 121, 0.14);
  --active-lo: rgba(201, 160, 122, 0.1);
  --active-line: rgba(183, 110, 121, 0.55);
  --card-hover: rgba(183, 110, 121, 0.07);
  --hover: rgba(183, 110, 121, 0.09);
  --orb-a: rgba(201, 160, 122, 0.16);
  --orb-b: rgba(183, 110, 121, 0.1);
  --orb-c: rgba(255, 255, 255, 0.5);
  --grid: rgba(70, 50, 40, 0.05);
  --chip: #ffffff;
  --radius: 12px;
  --bevel: inset 0 1px 0 #fff, inset 0 -1px 4px rgba(70, 50, 40, 0.06);
  --press: inset 0 2px 6px rgba(70, 50, 40, 0.1), inset 0 1px 0 #fff;
  --extrude:
    0 1px 0 rgba(70, 50, 40, 0.08),
    0 2px 0 rgba(70, 50, 40, 0.04);
  --lift: 0 8px 18px rgba(70, 50, 40, 0.08), 0 16px 28px rgba(70, 50, 40, 0.06);
  --lift-lo: 0 6px 12px rgba(70, 50, 40, 0.06);
  --face: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 42%, rgba(70, 50, 40, 0.04));
  --tip-bg: #1a1a1a;
  --tip-ink: #f8f4f0;
  --tip-line: rgba(255, 255, 255, 0.22);
  --tip-shadow: 0 10px 28px rgba(26, 26, 26, 0.28), 0 2px 8px rgba(26, 26, 26, 0.16);
  --ctrl-ink: #1a1a1a;
}

html[data-theme="champagne"] {
  --bg: #f8f4f0;
  --ink: #1a1a1a;
  --muted: #5f534a;
  --head: #1a1a1a;
  --cyan: #c9a07a;
  --cyan-2: #6f4a42;
  --blue: #9a6b4f;
  --ok: #c4896a;
  --line: rgba(180, 160, 140, 0.35);
  --panel: rgba(255, 252, 248, 0.92);
  --panel-2: rgba(255, 255, 255, 0.98);
  --topbar: #1a1a1a;
  --topbar-ink: #f8f4f0;
  --topbar-muted: #d2c2b4;
  --well: rgba(26, 26, 26, 0.04);
  --well-2: rgba(242, 234, 226, 0.92);
  --thumb: #e8ddd4;
  --glass-hi: rgba(255, 255, 255, 0.85);
  --shadow: 0 16px 36px rgba(70, 50, 40, 0.08);
  --glow: 0 0 36px rgba(201, 160, 122, 0.14);
  --mark-hi: #d4a574;
  --mark-lo: #8a5a48;
  --user-hi: #e8d4c4;
  --user-lo: #c9a07a;
  --user-ink: #1a1a1a;
  --agent-bg: rgba(255, 255, 255, 0.94);
  --agent-ink: #2a241e;
  --composer: rgba(255, 255, 255, 0.94);
  --send-ink: #fffaf6;
  --sandbox-hi: #ffffff;
  --sandbox-lo: #f3ebe4;
  --sandbox-line: rgba(201, 160, 122, 0.32);
  --sandbox-glow: rgba(201, 160, 122, 0.14);
  --draw: #c9a07a;
  --draw-ink: #1a1a1a;
  --cta-hi: #ffffff;
  --cta-lo: #f5efe9;
  --asset-hi: #ffffff;
  --asset-lo: #f7f1eb;
  --toast: #ffffff;
  --video: #141210;
  --hud: rgba(255, 255, 255, 0.88);
  --pill: rgba(20, 16, 14, 0.72);
  --active-hi: rgba(201, 160, 122, 0.14);
  --active-lo: rgba(201, 160, 122, 0.1);
  --active-line: rgba(201, 160, 122, 0.55);
  --card-hover: rgba(201, 160, 122, 0.07);
  --hover: rgba(201, 160, 122, 0.09);
  --orb-a: rgba(201, 160, 122, 0.16);
  --orb-b: rgba(183, 110, 121, 0.1);
  --orb-c: rgba(255, 255, 255, 0.5);
  --grid: rgba(70, 50, 40, 0.05);
  --chip: #ffffff;
  --radius: 12px;
  --ctrl-ink: #1a1a1a;
  --tip-bg: #1a1a1a;
  --tip-ink: #f8f4f0;
  --tip-line: rgba(255, 255, 255, 0.22);
  --tip-shadow: 0 10px 28px rgba(26, 26, 26, 0.28), 0 2px 8px rgba(26, 26, 26, 0.16);
  --face: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 42%, rgba(70, 50, 40, 0.04));
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 6px rgba(70, 50, 40, 0.06);
  --press: inset 0 2px 8px rgba(70, 50, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --extrude: 0 1px 0 rgba(180, 160, 140, 0.35), 0 2px 0 rgba(180, 160, 140, 0.2), 0 4px 0 rgba(180, 160, 140, 0.12);
  --lift: 0 8px 18px rgba(70, 50, 40, 0.08), 0 16px 28px rgba(70, 50, 40, 0.06);
  --lift-lo: 0 6px 12px rgba(70, 50, 40, 0.06);
  color-scheme: light;
}

html[data-theme="slate"] {
  --bg: #0f1419;
  --ink: #e8eef4;
  --muted: #a8b6c7;
  --head: #f1f5f9;
  --cyan: #94a3b8;
  --cyan-2: #cbd5e1;
  --blue: #64748b;
  --ok: #86efac;
  --line: rgba(148, 163, 184, 0.2);
  --panel: rgba(15, 20, 28, 0.75);
  --panel-2: rgba(18, 24, 32, 0.95);
  --topbar: rgba(10, 14, 20, 0.9);
  --topbar-ink: #e8eef4;
  --topbar-muted: #a8b6c7;
  --well: rgba(255, 255, 255, 0.04);
  --well-2: rgba(8, 12, 18, 0.5);
  --thumb: #1e293b;
  --mark-hi: #475569;
  --mark-lo: #1e293b;
  --user-hi: #94a3b8;
  --user-lo: #475569;
  --user-ink: #0f172a;
  --agent-bg: rgba(15, 23, 42, 0.85);
  --agent-ink: #e2e8f0;
  --composer: rgba(15, 23, 42, 0.8);
  --send-ink: #0f172a;
  --sandbox-hi: rgba(30, 41, 59, 0.95);
  --sandbox-lo: rgba(15, 23, 42, 0.98);
  --sandbox-line: rgba(148, 163, 184, 0.4);
  --sandbox-glow: rgba(148, 163, 184, 0.15);
  --draw: #94a3b8;
  --draw-ink: #e2e8f0;
  --cta-hi: rgba(51, 65, 85, 0.95);
  --cta-lo: rgba(30, 41, 59, 0.98);
  --active-hi: rgba(100, 116, 139, 0.25);
  --active-lo: rgba(51, 65, 85, 0.8);
  --active-line: rgba(148, 163, 184, 0.5);
  --card-hover: rgba(148, 163, 184, 0.08);
  --hover: rgba(148, 163, 184, 0.12);
  --chip: rgba(30, 41, 59, 0.8);
  --orb-a: rgba(100, 116, 139, 0.2);
  --orb-b: rgba(71, 85, 105, 0.15);
  --orb-c: rgba(148, 163, 184, 0.08);
  --grid: rgba(148, 163, 184, 0.06);
  --ctrl-ink: #fff;
}

html[data-theme="aqua"] {
  --bg: #041318;
  --ink: #e6fffb;
  --muted: #9ed4cc;
  --head: #f0fffc;
  --cyan: #2dd4bf;
  --cyan-2: #99f6e4;
  --blue: #0d9488;
  --ok: #34d399;
  --line: rgba(45, 212, 191, 0.22);
  --panel: rgba(4, 19, 24, 0.72);
  --panel-2: rgba(6, 28, 34, 0.94);
  --topbar: rgba(2, 12, 16, 0.88);
  --topbar-ink: #e6fffb;
  --topbar-muted: #9ed4cc;
  --well: rgba(255, 255, 255, 0.04);
  --well-2: rgba(2, 10, 14, 0.55);
  --thumb: #0f2a30;
  --mark-hi: #14b8a6;
  --mark-lo: #0f766e;
  --user-hi: #5eead4;
  --user-lo: #0d9488;
  --user-ink: #042f2e;
  --agent-bg: rgba(4, 24, 30, 0.85);
  --agent-ink: #ccfbf1;
  --composer: rgba(4, 20, 26, 0.85);
  --send-ink: #042f2e;
  --sandbox-hi: rgba(8, 40, 48, 0.95);
  --sandbox-lo: rgba(4, 20, 26, 0.98);
  --sandbox-line: rgba(45, 212, 191, 0.4);
  --sandbox-glow: rgba(45, 212, 191, 0.16);
  --draw: #2dd4bf;
  --draw-ink: #ccfbf1;
  --cta-hi: rgba(13, 74, 82, 0.95);
  --cta-lo: rgba(4, 30, 36, 0.98);
  --active-hi: rgba(45, 212, 191, 0.2);
  --active-lo: rgba(13, 74, 82, 0.75);
  --active-line: rgba(45, 212, 191, 0.55);
  --card-hover: rgba(45, 212, 191, 0.08);
  --hover: rgba(45, 212, 191, 0.1);
  --chip: rgba(4, 30, 36, 0.75);
  --orb-a: rgba(45, 212, 191, 0.2);
  --orb-b: rgba(13, 148, 136, 0.14);
  --orb-c: rgba(153, 246, 228, 0.08);
  --grid: rgba(45, 212, 191, 0.06);
  --ctrl-ink: #fff;
}

html[data-theme="copper"] {
  --bg: #120c0a;
  --ink: #faf0ea;
  --muted: #d4b59a;
  --head: #fff7f0;
  --cyan: #d97706;
  --cyan-2: #fbbf24;
  --blue: #b45309;
  --ok: #f59e0b;
  --line: rgba(217, 119, 6, 0.22);
  --panel: rgba(24, 14, 10, 0.72);
  --panel-2: rgba(30, 18, 12, 0.94);
  --topbar: rgba(18, 10, 6, 0.9);
  --topbar-ink: #faf0ea;
  --topbar-muted: #d4b59a;
  --well: rgba(255, 255, 255, 0.04);
  --well-2: rgba(12, 8, 6, 0.55);
  --thumb: #291510;
  --mark-hi: #d97706;
  --mark-lo: #92400e;
  --user-hi: #fcd34d;
  --user-lo: #d97706;
  --user-ink: #1c0f08;
  --agent-bg: rgba(24, 14, 10, 0.88);
  --agent-ink: #fef3c7;
  --composer: rgba(18, 10, 6, 0.85);
  --send-ink: #1c0f08;
  --sandbox-hi: rgba(40, 22, 14, 0.95);
  --sandbox-lo: rgba(18, 10, 6, 0.98);
  --sandbox-line: rgba(217, 119, 6, 0.38);
  --sandbox-glow: rgba(217, 119, 6, 0.14);
  --draw: #f59e0b;
  --draw-ink: #fef3c7;
  --cta-hi: rgba(68, 36, 20, 0.95);
  --cta-lo: rgba(30, 16, 10, 0.98);
  --active-hi: rgba(217, 119, 6, 0.22);
  --active-lo: rgba(68, 36, 20, 0.78);
  --active-line: rgba(245, 158, 11, 0.55);
  --card-hover: rgba(217, 119, 6, 0.08);
  --hover: rgba(217, 119, 6, 0.1);
  --chip: rgba(30, 16, 10, 0.78);
  --orb-a: rgba(217, 119, 6, 0.18);
  --orb-b: rgba(180, 83, 9, 0.12);
  --orb-c: rgba(251, 191, 36, 0.08);
  --grid: rgba(217, 119, 6, 0.05);
  --ctrl-ink: #fff;
}

html[data-theme="forest"] {
  --bg: #07140c;
  --ink: #eef8f0;
  --muted: #9bc4a6;
  --head: #f4fbf5;
  --cyan: #4ade80;
  --cyan-2: #bbf7d0;
  --blue: #16a34a;
  --ok: #86efac;
  --line: rgba(74, 222, 128, 0.22);
  --panel: rgba(8, 24, 14, 0.72);
  --panel-2: rgba(10, 30, 18, 0.94);
  --topbar: rgba(4, 16, 10, 0.9);
  --topbar-ink: #eef8f0;
  --topbar-muted: #9bc4a6;
  --well: rgba(255, 255, 255, 0.04);
  --well-2: rgba(4, 14, 8, 0.55);
  --thumb: #12301c;
  --mark-hi: #22c55e;
  --mark-lo: #166534;
  --user-hi: #86efac;
  --user-lo: #16a34a;
  --user-ink: #052e16;
  --agent-bg: rgba(8, 28, 16, 0.88);
  --agent-ink: #dcfce7;
  --composer: rgba(6, 20, 12, 0.85);
  --send-ink: #052e16;
  --sandbox-hi: rgba(16, 42, 26, 0.95);
  --sandbox-lo: rgba(6, 20, 12, 0.98);
  --sandbox-line: rgba(74, 222, 128, 0.4);
  --sandbox-glow: rgba(74, 222, 128, 0.16);
  --draw: #4ade80;
  --draw-ink: #dcfce7;
  --cta-hi: rgba(22, 80, 44, 0.95);
  --cta-lo: rgba(10, 36, 20, 0.98);
  --active-hi: rgba(74, 222, 128, 0.2);
  --active-lo: rgba(22, 80, 44, 0.75);
  --active-line: rgba(74, 222, 128, 0.55);
  --card-hover: rgba(74, 222, 128, 0.08);
  --hover: rgba(74, 222, 128, 0.1);
  --chip: rgba(10, 36, 20, 0.78);
  --orb-a: rgba(74, 222, 128, 0.18);
  --orb-b: rgba(22, 163, 74, 0.14);
  --orb-c: rgba(187, 247, 208, 0.08);
  --grid: rgba(74, 222, 128, 0.06);
  --ctrl-ink: #fff;
  --tip-bg: #ecfdf3;
  --tip-ink: #052e16;
  --tip-line: rgba(5, 46, 22, 0.2);
  --tip-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.28);
}

html[data-theme="ember"] {
  --bg: #14080c;
  --ink: #fff1f2;
  --muted: #e0a8b2;
  --head: #fff7f8;
  --cyan: #fb7185;
  --cyan-2: #fecdd3;
  --blue: #e11d48;
  --ok: #fda4af;
  --line: rgba(251, 113, 133, 0.24);
  --panel: rgba(28, 10, 16, 0.72);
  --panel-2: rgba(36, 14, 22, 0.94);
  --topbar: rgba(18, 6, 10, 0.9);
  --topbar-ink: #fff1f2;
  --topbar-muted: #e0a8b2;
  --well: rgba(255, 255, 255, 0.04);
  --well-2: rgba(14, 6, 8, 0.55);
  --thumb: #3a1520;
  --mark-hi: #e11d48;
  --mark-lo: #9f1239;
  --user-hi: #fda4af;
  --user-lo: #e11d48;
  --user-ink: #4c0519;
  --agent-bg: rgba(28, 10, 16, 0.88);
  --agent-ink: #ffe4e6;
  --composer: rgba(20, 8, 12, 0.85);
  --send-ink: #4c0519;
  --sandbox-hi: rgba(48, 16, 26, 0.95);
  --sandbox-lo: rgba(20, 8, 12, 0.98);
  --sandbox-line: rgba(251, 113, 133, 0.42);
  --sandbox-glow: rgba(251, 113, 133, 0.16);
  --draw: #fb7185;
  --draw-ink: #ffe4e6;
  --cta-hi: rgba(90, 20, 40, 0.95);
  --cta-lo: rgba(40, 12, 22, 0.98);
  --active-hi: rgba(251, 113, 133, 0.22);
  --active-lo: rgba(90, 20, 40, 0.78);
  --active-line: rgba(251, 113, 133, 0.55);
  --card-hover: rgba(251, 113, 133, 0.08);
  --hover: rgba(251, 113, 133, 0.1);
  --chip: rgba(40, 12, 22, 0.78);
  --orb-a: rgba(251, 113, 133, 0.2);
  --orb-b: rgba(225, 29, 72, 0.14);
  --orb-c: rgba(254, 205, 211, 0.08);
  --grid: rgba(251, 113, 133, 0.06);
  --ctrl-ink: #fff;
  --tip-bg: #fff1f2;
  --tip-ink: #4c0519;
  --tip-line: rgba(76, 5, 25, 0.2);
  --tip-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.28);
}

html[data-theme="pearl"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --ink: #152033;
  --muted: #4b5b73;
  --head: #0f172a;
  --cyan: #475569;
  --cyan-2: #334155;
  --blue: #64748b;
  --ok: #059669;
  --line: rgba(71, 85, 105, 0.18);
  --panel: rgba(255, 255, 255, 0.82);
  --panel-2: rgba(255, 255, 255, 0.96);
  --topbar: rgba(255, 255, 255, 0.9);
  --topbar-ink: #152033;
  --topbar-muted: #4b5b73;
  --well: rgba(15, 23, 42, 0.04);
  --well-2: rgba(226, 232, 240, 0.7);
  --thumb: #e2e8f0;
  --glass-hi: rgba(255, 255, 255, 0.9);
  --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --glow: 0 0 28px rgba(100, 116, 139, 0.12);
  --mark-hi: #64748b;
  --mark-lo: #334155;
  --user-hi: #94a3b8;
  --user-lo: #475569;
  --user-ink: #f8fafc;
  --agent-bg: rgba(241, 245, 249, 0.95);
  --agent-ink: #1e293b;
  --composer: rgba(248, 250, 252, 0.95);
  --send-ink: #f8fafc;
  --sandbox-hi: rgba(255, 255, 255, 0.96);
  --sandbox-lo: rgba(241, 245, 249, 0.98);
  --sandbox-line: rgba(71, 85, 105, 0.35);
  --sandbox-glow: rgba(100, 116, 139, 0.12);
  --draw: #475569;
  --draw-ink: #1e293b;
  --cta-hi: rgba(255, 255, 255, 0.98);
  --cta-lo: rgba(241, 245, 249, 0.98);
  --asset-hi: rgba(255, 255, 255, 0.95);
  --asset-lo: rgba(226, 232, 240, 0.9);
  --toast: #1e293b;
  --video: #0f172a;
  --hud: rgba(255, 255, 255, 0.82);
  --pill: rgba(15, 23, 42, 0.55);
  --active-hi: rgba(100, 116, 139, 0.14);
  --active-lo: rgba(226, 232, 240, 0.9);
  --active-line: rgba(71, 85, 105, 0.45);
  --card-hover: rgba(71, 85, 105, 0.06);
  --hover: rgba(71, 85, 105, 0.08);
  --chip: #ffffff;
  --orb-a: rgba(148, 163, 184, 0.18);
  --orb-b: rgba(100, 116, 139, 0.1);
  --orb-c: rgba(255, 255, 255, 0.7);
  --grid: rgba(71, 85, 105, 0.06);
  --radius: 12px;
  --ctrl-ink: #0f172a;
  --tip-bg: #0f172a;
  --tip-ink: #f8fafc;
  --tip-line: rgba(255, 255, 255, 0.18);
  --tip-shadow: 0 10px 28px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.16);
  --face: linear-gradient(180deg, rgba(255, 255, 255, 0.85), transparent 42%, rgba(15, 23, 42, 0.04));
  --bevel: inset 0 1px 0 #fff, inset 0 -1px 4px rgba(15, 23, 42, 0.06);
  --press: inset 0 2px 6px rgba(15, 23, 42, 0.08), inset 0 1px 0 #fff;
  --extrude: 0 1px 0 rgba(148, 163, 184, 0.35), 0 2px 0 rgba(148, 163, 184, 0.18);
  --lift: 0 8px 18px rgba(15, 23, 42, 0.08), 0 16px 28px rgba(15, 23, 42, 0.06);
  --lift-lo: 0 6px 12px rgba(15, 23, 42, 0.06);
}

/* Brand — mineral beige, espresso, luminous blue. Matches html[data-theme="brand"] in the app. */
html[data-theme="brand"] {
  color-scheme: light;
  --bg: #d8cfc4;
  --ink: #362b28;
  --muted: #6e625f;
  --head: #362b28;
  --cyan: #0b3b95;
  --cyan-2: #1d5a64;
  --blue: #0b3b95;
  --ok: #1d5a64;
  --line: rgba(54, 43, 40, 0.12);
  --panel: #ffffff;
  --panel-2: #ffffff;
  --topbar: #362b28;
  --topbar-ink: #ffffff;
  --topbar-muted: #d8cfc4;
  --well: rgba(216, 207, 196, 0.35);
  --well-2: rgba(216, 207, 196, 0.55);
  --thumb: #cfc4b8;
  --glass-hi: rgba(255, 255, 255, 0.65);
  --shadow: 0 16px 36px rgba(54, 43, 40, 0.08);
  --glow: 0 0 28px rgba(11, 59, 149, 0.12);
  --mark-hi: #0b3b95;
  --mark-lo: #082d72;
  --user-hi: #0b3b95;
  --user-lo: #082d72;
  --user-ink: #ffffff;
  --agent-bg: #ffffff;
  --agent-ink: #362b28;
  --composer: #ffffff;
  --send-ink: #ffffff;
  --sandbox-hi: #ffffff;
  --sandbox-lo: #e7e0d8;
  --sandbox-line: #6b2d2f;
  --sandbox-glow: rgba(11, 59, 149, 0.12);
  --draw: #522d5b;
  --draw-ink: #362b28;
  --cta-hi: #ffffff;
  --cta-lo: #d8cfc4;
  --asset-hi: #ffffff;
  --asset-lo: #e7e0d8;
  --toast: #362b28;
  --video: #203a2b;
  --hud: rgba(255, 255, 255, 0.9);
  --pill: #ecc267;
  --active-hi: rgba(11, 59, 149, 0.12);
  --active-lo: rgba(11, 59, 149, 0.06);
  --active-line: #0b3b95;
  --card-hover: rgba(11, 59, 149, 0.05);
  --hover: rgba(54, 43, 40, 0.06);
  --chip: #b9a8c8;
  --orb-a: rgba(11, 59, 149, 0.08);
  --orb-b: rgba(29, 90, 100, 0.08);
  --orb-c: rgba(185, 168, 200, 0.28);
  --grid: rgba(54, 43, 40, 0.05);
  --radius: 12px;
  --ctrl-ink: #362b28;
  --tip-bg: #362b28;
  --tip-ink: #ffffff;
  --tip-line: rgba(216, 207, 196, 0.28);
  --tip-shadow: 0 10px 28px rgba(54, 43, 40, 0.28), 0 2px 8px rgba(54, 43, 40, 0.16);
  --face: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 42%, rgba(54, 43, 40, 0.04));
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 4px rgba(54, 43, 40, 0.06);
  --press: inset 0 2px 6px rgba(54, 43, 40, 0.1), inset 0 1px 0 #fff;
  --extrude: 0 1px 0 rgba(54, 43, 40, 0.1), 0 2px 0 rgba(54, 43, 40, 0.05);
  --lift: 0 8px 18px rgba(54, 43, 40, 0.08), 0 16px 28px rgba(54, 43, 40, 0.06);
  --lift-lo: 0 6px 12px rgba(54, 43, 40, 0.06);
}