/* ===== P cabinet themes: Signal / Canopy / Ember / Vesper ===== */

html[data-theme="canopy"] {
  --tc-bg: #060b0a;
  --tc-body-bg: #060b0a;
  --tc-surface: #0a1410;
  --tc-panel: rgba(10, 22, 16, 0.82);
  --tc-panel-solid: #0e1a14;
  --tc-elevated: #14241c;
  --tc-border: rgba(176, 252, 206, 0.12);
  --tc-border-hi: rgba(43, 255, 248, 0.28);
  --tc-text: #ffffff;
  --tc-muted: #a8d4ba;
  --tc-sub: #6f9782;
  --tc-blue: #2bfff8;
  --tc-green: #2bfff8;
  --tc-green-dim: rgba(43, 255, 248, 0.14);
  --tc-green-glow: rgba(43, 255, 248, 0.32);
  --tc-blue-dim: rgba(43, 255, 248, 0.16);
  --tc-blue-glow: rgba(0, 115, 66, 0.4);
  --tc-accent-bright: #b0fcce;
  --tc-accent-hover: #7afff4;
  --tc-accent-rgb: 43, 255, 248;
  --tc-wash-a: rgba(43, 255, 248, 0.16);
  --tc-wash-b: rgba(176, 252, 206, 0.12);
  --tc-wash-c: rgba(0, 115, 66, 0.38);
  --tc-wash-d: rgba(176, 252, 206, 0.06);
  --tc-wash-grad: linear-gradient(158deg, #08140f 0%, #060b0a 42%, #0a1f16 74%, #040807 100%);
}

html[data-theme="ember"] {
  --tc-bg: #161316;
  --tc-body-bg: #161316;
  --tc-surface: #1c171a;
  --tc-panel: rgba(28, 22, 24, 0.86);
  --tc-panel-solid: #1f191c;
  --tc-elevated: #2a211e;
  --tc-border: rgba(255, 109, 41, 0.14);
  --tc-border-hi: rgba(255, 109, 41, 0.32);
  --tc-text: #ffffff;
  --tc-muted: #bababa;
  --tc-sub: #8a7d78;
  --tc-blue: #ff6d29;
  --tc-green: #ff6d29;
  --tc-green-dim: rgba(255, 109, 41, 0.14);
  --tc-green-glow: rgba(255, 109, 41, 0.34);
  --tc-blue-dim: rgba(255, 109, 41, 0.16);
  --tc-blue-glow: rgba(255, 109, 41, 0.32);
  --tc-accent-bright: #ffb08a;
  --tc-accent-hover: #ff8652;
  --tc-accent-rgb: 255, 109, 41;
  --tc-wash-a: rgba(255, 109, 41, 0.22);
  --tc-wash-b: rgba(69, 48, 39, 0.55);
  --tc-wash-c: rgba(255, 109, 41, 0.12);
  --tc-wash-d: rgba(255, 255, 255, 0.03);
  --tc-wash-grad: linear-gradient(158deg, #1c1618 0%, #161316 40%, #241814 74%, #120f12 100%);
}

html[data-theme="vesper"] {
  --tc-bg: #050107;
  --tc-body-bg: #050107;
  --tc-surface: #0c0614;
  --tc-panel: rgba(12, 6, 20, 0.86);
  --tc-panel-solid: #100818;
  --tc-elevated: #1a0d28;
  --tc-border: rgba(181, 108, 255, 0.16);
  --tc-border-hi: rgba(181, 108, 255, 0.36);
  --tc-text: #ffffff;
  --tc-muted: #c4b5d4;
  --tc-sub: #8b7a9e;
  --tc-blue: #b56cff;
  --tc-green: #b56cff;
  --tc-green-dim: rgba(181, 108, 255, 0.16);
  --tc-green-glow: rgba(181, 108, 255, 0.38);
  --tc-blue-dim: rgba(181, 108, 255, 0.18);
  --tc-blue-glow: rgba(181, 108, 255, 0.34);
  --tc-accent-bright: #e9d5ff;
  --tc-accent-hover: #c084fc;
  --tc-accent-rgb: 181, 108, 255;
  --tc-wash-a: rgba(181, 108, 255, 0.22);
  --tc-wash-b: rgba(88, 28, 135, 0.28);
  --tc-wash-c: rgba(168, 85, 247, 0.14);
  --tc-wash-d: rgba(255, 255, 255, 0.03);
  --tc-wash-grad: linear-gradient(158deg, #0a0512 0%, #050107 42%, #140822 74%, #000000 100%);
}

html[data-theme="canopy"],
html[data-theme="ember"],
html[data-theme="vesper"] {
  --bg: var(--tc-bg);
  --card: var(--tc-panel-solid);
  --card2: var(--tc-elevated);
  --border: var(--tc-border);
  --borderH: var(--tc-border-hi);
  --text: var(--tc-text);
  --muted: var(--tc-muted);
  --sub: var(--tc-sub);
  --green: var(--tc-blue);
  --greenDim: var(--tc-blue-dim);
  --greenGlow: var(--tc-green-glow);
  --blue: var(--tc-blue);
  --blueDim: var(--tc-blue-dim);
  --accent: var(--tc-blue);
  --accent-bright: var(--tc-accent-bright);
  --accent-hover: var(--tc-accent-hover);
  --accent-glow: var(--tc-green-glow);
}

html[data-theme="canopy"] .auth-body,
html[data-theme="ember"] .auth-body,
html[data-theme="vesper"] .auth-body {
  --auth-blue: var(--tc-blue);
  --auth-accent-rgb: var(--tc-accent-rgb);
  --auth-blue-soft: var(--tc-blue-dim);
  background: var(--tc-body-bg);
}

html[data-theme="canopy"] .auth-body { --auth-ink: #050c09; --auth-muted: #a8d4ba; --auth-sub: #6f9782; }
html[data-theme="ember"] .auth-body { --auth-ink: #140f10; --auth-muted: #bababa; --auth-sub: #8a7d78; }
html[data-theme="vesper"] .auth-body { --auth-ink: #07010a; --auth-muted: #c4b5d4; --auth-sub: #8b7a9e; }

html[data-theme="canopy"] .auth-body .tc-bg,
html[data-theme="ember"] .auth-body .tc-bg,
html[data-theme="vesper"] .auth-body .tc-bg {
  background: var(--tc-body-bg);
}

html[data-theme="canopy"] .tc-body,
html[data-theme="ember"] .tc-body,
html[data-theme="vesper"] .tc-body,
html[data-theme="canopy"] .tc-bg,
html[data-theme="ember"] .tc-bg,
html[data-theme="vesper"] .tc-bg {
  background: var(--tc-body-bg);
}

.tc-theme-preview--canopy {
  background:
    radial-gradient(ellipse 55% 48% at 22% 18%, rgba(43, 255, 248, 0.35), transparent 62%),
    radial-gradient(ellipse 52% 46% at 78% 88%, rgba(0, 115, 66, 0.55), transparent 60%),
    linear-gradient(158deg, #08140f 0%, #060b0a 45%, #0a1f16 100%);
}

.tc-theme-preview--ember {
  background:
    radial-gradient(ellipse 58% 50% at 28% 40%, rgba(255, 109, 41, 0.42), transparent 62%),
    radial-gradient(ellipse 46% 40% at 80% 86%, rgba(69, 48, 39, 0.7), transparent 58%),
    linear-gradient(158deg, #1c1618 0%, #161316 50%, #241814 100%);
}

.tc-theme-preview--vesper {
  background:
    radial-gradient(ellipse 55% 48% at 24% 20%, rgba(181, 108, 255, 0.4), transparent 62%),
    radial-gradient(ellipse 50% 44% at 78% 84%, rgba(88, 28, 135, 0.45), transparent 60%),
    linear-gradient(158deg, #0a0512 0%, #050107 48%, #000000 100%);
}

.tc-theme-preview--canopy::after,
.tc-theme-preview--ember::after,
.tc-theme-preview--vesper::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 14px;
  height: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="canopy"] .tc-theme-card.active,
html[data-theme="ember"] .tc-theme-card.active,
html[data-theme="vesper"] .tc-theme-card.active {
  border-color: rgba(var(--tc-accent-rgb), 0.45);
  background: rgba(var(--tc-accent-rgb), 0.08);
  box-shadow: 0 0 0 1px rgba(var(--tc-accent-rgb), 0.12), 0 12px 28px rgba(0, 0, 0, 0.22);
}

/* ===== Enabled requisites: per-theme glow ===== */

html[data-theme="canopy"] {
  --req-on-border: rgba(43, 255, 248, 0.42);
  --req-on-bg:
    radial-gradient(ellipse 92% 88% at 6% 42%, rgba(43, 255, 248, 0.16), transparent 56%),
    radial-gradient(ellipse 70% 80% at 98% 88%, rgba(0, 115, 66, 0.38), transparent 58%),
    linear-gradient(180deg, rgba(8, 24, 18, 0.98) 0%, rgba(5, 12, 10, 0.99) 100%);
  --req-on-shadow:
    0 0 0 1px rgba(43, 255, 248, 0.18),
    0 0 26px rgba(43, 255, 248, 0.2),
    0 0 56px rgba(0, 115, 66, 0.28),
    0 14px 34px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(176, 252, 206, 0.18);
  --req-on-hover-border: rgba(43, 255, 248, 0.52);
  --req-on-hover-shadow:
    0 0 0 1px rgba(43, 255, 248, 0.22),
    0 0 32px rgba(43, 255, 248, 0.24),
    0 0 54px rgba(0, 115, 66, 0.3),
    0 18px 40px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(176, 252, 206, 0.2);
  --req-on-sheen-a: rgba(43, 255, 248, 0.2);
  --req-on-sheen-b: rgba(176, 252, 206, 0.12);
  --req-on-edge: rgba(43, 255, 248, 0.55);
  --req-on-num: #e8fff6;
  --req-on-settings-bg:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(43, 255, 248, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(8, 28, 20, 0.98), rgba(5, 12, 10, 0.99));
  --req-on-group-bg:
    radial-gradient(ellipse 80% 70% at 20% 0%, rgba(43, 255, 248, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(10, 32, 24, 0.96), rgba(6, 16, 12, 0.98));
  --req-on-item-bg: linear-gradient(180deg, rgba(10, 36, 28, 0.94), rgba(6, 18, 14, 0.97));
  --req-on-item-focus-bg: linear-gradient(180deg, rgba(12, 42, 32, 0.96), rgba(7, 22, 16, 0.98));
  --req-on-input-bg: rgba(4, 18, 14, 0.78);
  --req-on-metric-bg: linear-gradient(180deg, rgba(10, 34, 26, 0.92), rgba(6, 16, 12, 0.96));
}

html[data-theme="ember"] {
  --req-on-border: rgba(255, 109, 41, 0.46);
  --req-on-bg:
    radial-gradient(ellipse 95% 90% at 8% 40%, rgba(255, 109, 41, 0.22), transparent 58%),
    radial-gradient(ellipse 62% 72% at 100% 100%, rgba(69, 48, 39, 0.62), transparent 56%),
    linear-gradient(180deg, rgba(38, 24, 22, 0.98) 0%, rgba(18, 15, 16, 0.99) 100%);
  --req-on-shadow:
    0 0 0 1px rgba(255, 109, 41, 0.22),
    0 0 30px rgba(255, 109, 41, 0.26),
    0 0 62px rgba(255, 109, 41, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 176, 138, 0.2);
  --req-on-hover-border: rgba(255, 109, 41, 0.56);
  --req-on-hover-shadow:
    0 0 0 1px rgba(255, 109, 41, 0.26),
    0 0 36px rgba(255, 109, 41, 0.3),
    0 0 58px rgba(255, 109, 41, 0.14),
    0 18px 40px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 176, 138, 0.22);
  --req-on-sheen-a: rgba(255, 109, 41, 0.24);
  --req-on-sheen-b: rgba(255, 176, 138, 0.12);
  --req-on-edge: rgba(255, 109, 41, 0.55);
  --req-on-num: #ffe8dc;
  --req-on-settings-bg:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 109, 41, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(36, 22, 20, 0.98), rgba(18, 14, 15, 0.99));
  --req-on-group-bg:
    radial-gradient(ellipse 80% 70% at 20% 0%, rgba(255, 109, 41, 0.26), transparent 55%),
    linear-gradient(180deg, rgba(42, 26, 22, 0.96), rgba(22, 16, 16, 0.98));
  --req-on-item-bg: linear-gradient(180deg, rgba(48, 28, 24, 0.94), rgba(24, 16, 16, 0.97));
  --req-on-item-focus-bg: linear-gradient(180deg, rgba(56, 32, 26, 0.96), rgba(26, 18, 16, 0.98));
  --req-on-input-bg: rgba(22, 12, 12, 0.78);
  --req-on-metric-bg: linear-gradient(180deg, rgba(44, 26, 22, 0.92), rgba(22, 16, 16, 0.96));
}

html[data-theme="vesper"] {
  --req-on-border: rgba(181, 108, 255, 0.48);
  --req-on-bg:
    radial-gradient(ellipse 90% 86% at 8% 38%, rgba(181, 108, 255, 0.22), transparent 56%),
    radial-gradient(ellipse 58% 72% at 100% 92%, rgba(88, 28, 135, 0.46), transparent 58%),
    linear-gradient(180deg, rgba(16, 8, 28, 0.98) 0%, rgba(5, 1, 7, 0.99) 100%);
  --req-on-shadow:
    0 0 0 1px rgba(181, 108, 255, 0.24),
    0 0 28px rgba(181, 108, 255, 0.3),
    0 0 72px rgba(168, 85, 247, 0.16),
    0 14px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(233, 213, 255, 0.18);
  --req-on-hover-border: rgba(181, 108, 255, 0.58);
  --req-on-hover-shadow:
    0 0 0 1px rgba(181, 108, 255, 0.28),
    0 0 34px rgba(181, 108, 255, 0.34),
    0 0 68px rgba(168, 85, 247, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(233, 213, 255, 0.22);
  --req-on-sheen-a: rgba(181, 108, 255, 0.24);
  --req-on-sheen-b: rgba(233, 213, 255, 0.1);
  --req-on-edge: rgba(192, 132, 252, 0.55);
  --req-on-num: #f3e8ff;
  --req-on-settings-bg:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(181, 108, 255, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(16, 8, 28, 0.98), rgba(5, 1, 7, 0.99));
  --req-on-group-bg:
    radial-gradient(ellipse 80% 70% at 20% 0%, rgba(181, 108, 255, 0.26), transparent 55%),
    linear-gradient(180deg, rgba(22, 10, 38, 0.96), rgba(10, 4, 18, 0.98));
  --req-on-item-bg: linear-gradient(180deg, rgba(28, 12, 46, 0.94), rgba(12, 4, 20, 0.97));
  --req-on-item-focus-bg: linear-gradient(180deg, rgba(34, 14, 54, 0.96), rgba(14, 6, 24, 0.98));
  --req-on-input-bg: rgba(8, 2, 16, 0.8);
  --req-on-metric-bg: linear-gradient(180deg, rgba(24, 10, 40, 0.92), rgba(10, 4, 18, 0.96));
}