:root{
--black:#0b0c0d;--charcoal:#111214;--charcoal-2:#17181b;--charcoal-3:#1f2124;--charcoal-4:#2a2d31;
--line:#33363b;--line-soft:#26282c;
--white:#f5f4f2;--fog:#c7c9cc;--mist:#8f9298;--ash:#5f6268;
--green-500:#3ddc97;--yellow-500:#f5c542;--red-500:#ff5468;
--bg:var(--charcoal);--bg-raised:var(--charcoal-2);--bg-overlay:var(--charcoal-3);
--surface:var(--charcoal-2);--surface-hover:var(--charcoal-3);--surface-pressed:var(--charcoal-4);
--border:var(--line);--border-soft:var(--line-soft);
--text-primary:var(--white);--text-secondary:var(--fog);--text-tertiary:var(--mist);--text-disabled:var(--ash);
--success:var(--green-500);--warning:var(--yellow-500);--danger:var(--red-500);
}
/* Theme layer — swap the accent pair to fit a project's vision. Set data-theme on <html> or any container; "signal" is the default. */
:root,[data-theme="signal"]{
--accent-500:#3d7bff;--accent-400:#6a9dff;--accent-600:#1f5ae0;--accent-glow:rgba(61,123,255,.32);
--accent2-400:#7dd3fc;--accent2-500:#4fc3f0;--accent2-glow:rgba(125,211,252,.22);--accent-on:#081026;
}
[data-theme="ember"]{
--accent-500:#ff6a3d;--accent-400:#ff8f68;--accent-600:#e0491f;--accent-glow:rgba(255,106,61,.32);
--accent2-400:#ffd27d;--accent2-500:#f0b74f;--accent2-glow:rgba(255,210,125,.22);--accent-on:#2a0f04;
}
[data-theme="verdant"]{
--accent-500:#3ddc97;--accent-400:#6ee8b3;--accent-600:#22b877;--accent-glow:rgba(61,220,151,.32);
--accent2-400:#a7f07d;--accent2-500:#8ad84f;--accent2-glow:rgba(167,240,125,.22);--accent-on:#04220f;
}
[data-theme="clay"]{
--accent-500:#c96f4a;--accent-400:#dd8f6f;--accent-600:#a5522f;--accent-glow:rgba(201,111,74,.32);
--accent2-400:#e8c39a;--accent2-500:#d4a877;--accent2-glow:rgba(232,195,154,.22);--accent-on:#241009;
}
:root{
--accent:var(--accent-500);--accent-strong:var(--accent-400);--accent-press:var(--accent-600);
--accent-2:var(--accent2-400);--info:var(--accent2-400);--focus-ring:var(--accent2-400);
}