/*
 * Design tokens for the v2 site design.
 *
 * Dark is the default. `[data-theme="light"]` re-tints the same token names so the
 * existing theme switcher keeps working without any component knowing about themes.
 */

:root {
    /* ---- Brand ---- */
    --v2-accent-h: 250;
    --v2-accent: #6d5efc;
    --v2-accent-strong: #8b7dff;
    --v2-accent-dim: #4c3fd6;
    --v2-accent-soft: rgba(109, 94, 252, 0.16);
    --v2-accent-softer: rgba(109, 94, 252, 0.08);
    --v2-accent-ring: rgba(109, 94, 252, 0.45);
    --v2-accent-contrast: #ffffff;

    --v2-cyan: #22d3ee;
    --v2-cyan-soft: rgba(34, 211, 238, 0.14);

    /* ---- Status ---- */
    --v2-success: #34d399;
    --v2-success-soft: rgba(52, 211, 153, 0.14);
    --v2-warning: #fbbf24;
    --v2-warning-soft: rgba(251, 191, 36, 0.14);
    --v2-danger: #f87171;
    --v2-danger-soft: rgba(248, 113, 113, 0.14);
    --v2-info: #60a5fa;
    --v2-info-soft: rgba(96, 165, 250, 0.14);

    /* ---- MMO role accents ---- */
    --v2-role-tank: #60a5fa;
    --v2-role-healer: #34d399;
    --v2-role-support: #c084fc;
    --v2-role-ranged: #fbbf24;
    --v2-role-melee: #f87171;

    /* ---- Surfaces (dark) ---- */
    --v2-bg: #08090d;
    --v2-bg-accent: radial-gradient(1200px 600px at 15% -10%, rgba(109, 94, 252, 0.06), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(34, 211, 238, 0.03), transparent 55%);
    --v2-surface-1: #0e1016;
    --v2-surface-2: #14171f;
    --v2-surface-3: #1b1f2a;
    --v2-surface-4: #232836;
    --v2-surface-inset: rgba(0, 0, 0, 0.3);

    /* ---- Lines ---- */
    --v2-border: rgba(255, 255, 255, 0.08);
    --v2-border-strong: rgba(255, 255, 255, 0.14);
    --v2-border-subtle: rgba(255, 255, 255, 0.05);

    /* ---- Text ---- */
    --v2-text: #eef1f7;
    --v2-text-muted: #a2abbf;
    --v2-text-dim: #6b7488;
    --v2-text-inverse: #0b0d12;

    /* ---- Links ---- */
    --v2-link: #9d92ff;
    --v2-link-hover: #b9b1ff;
    --v2-link-visited: #b79cf5;

    /* ---- Elevation ---- */
    --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --v2-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36);
    --v2-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.46);
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 32px rgba(109, 94, 252, 0.22);

    /* ---- Spacing (4px base) ---- */
    --v2-space-0: 0;
    --v2-space-1: 4px;
    --v2-space-2: 8px;
    --v2-space-3: 12px;
    --v2-space-4: 16px;
    --v2-space-5: 20px;
    --v2-space-6: 24px;
    --v2-space-8: 32px;
    --v2-space-10: 40px;
    --v2-space-12: 48px;
    --v2-space-16: 64px;
    --v2-space-20: 80px;

    /* ---- Radius ---- */
    --v2-radius-xs: 4px;
    --v2-radius-sm: 6px;
    --v2-radius-md: 10px;
    --v2-radius-lg: 14px;
    --v2-radius-xl: 20px;
    --v2-radius-full: 999px;

    /* ---- Typography ---- */
    --v2-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --v2-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --v2-text-2xs: 0.6875rem;
    --v2-text-xs: 0.75rem;
    --v2-text-sm: 0.8125rem;
    --v2-text-base: 0.9375rem;
    --v2-text-md: 1rem;
    --v2-text-lg: 1.125rem;
    --v2-text-xl: 1.375rem;
    --v2-text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
    --v2-text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
    --v2-text-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);

    --v2-leading-tight: 1.2;
    --v2-leading-snug: 1.4;
    --v2-leading-normal: 1.6;

    --v2-weight-normal: 400;
    --v2-weight-medium: 500;
    --v2-weight-semibold: 600;
    --v2-weight-bold: 700;

    --v2-tracking-wide: 0.04em;
    --v2-tracking-caps: 0.08em;

    /* ---- Motion ---- */
    --v2-dur-fast: 120ms;
    --v2-dur-base: 200ms;
    --v2-dur-slow: 320ms;
    --v2-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --v2-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ---- Layout ---- */
    --v2-sidebar-w: 248px;
    --v2-sidebar-w-collapsed: 68px;
    --v2-topbar-h: 56px;
    --v2-bottombar-h: 58px;
    --v2-content-max: 1360px;
    --v2-content-narrow: 880px;

    /* ---- Z-index ---- */
    --v2-z-sticky: 100;
    --v2-z-drawer: 400;
    --v2-z-modal: 600;
    --v2-z-toast: 800;

    color-scheme: dark;
}

[data-theme='light'] {
    --v2-accent: #5b4bd6;
    --v2-accent-strong: #4635c4;
    --v2-accent-dim: #6d5efc;
    --v2-accent-soft: rgba(91, 75, 214, 0.1);
    --v2-accent-softer: rgba(91, 75, 214, 0.05);
    --v2-accent-ring: rgba(91, 75, 214, 0.35);

    --v2-cyan: #0891b2;
    --v2-cyan-soft: rgba(8, 145, 178, 0.1);

    --v2-success: #059669;
    --v2-success-soft: rgba(5, 150, 105, 0.1);
    --v2-warning: #b45309;
    --v2-warning-soft: rgba(180, 83, 9, 0.1);
    --v2-danger: #dc2626;
    --v2-danger-soft: rgba(220, 38, 38, 0.1);
    --v2-info: #2563eb;
    --v2-info-soft: rgba(37, 99, 235, 0.1);

    --v2-role-tank: #2563eb;
    --v2-role-healer: #059669;
    --v2-role-support: #9333ea;
    --v2-role-ranged: #b45309;
    --v2-role-melee: #dc2626;

    --v2-bg: #f4f5f9;
    --v2-bg-accent: radial-gradient(1200px 600px at 15% -10%, rgba(109, 94, 252, 0.05), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(34, 211, 238, 0.03), transparent 55%);
    --v2-surface-1: #ffffff;
    --v2-surface-2: #ffffff;
    --v2-surface-3: #f1f3f8;
    --v2-surface-4: #e6e9f1;
    --v2-surface-inset: rgba(15, 23, 42, 0.04);

    --v2-border: rgba(15, 23, 42, 0.1);
    --v2-border-strong: rgba(15, 23, 42, 0.18);
    --v2-border-subtle: rgba(15, 23, 42, 0.06);

    --v2-text: #10131c;
    --v2-text-muted: #4d5568;
    --v2-text-dim: #737d92;
    --v2-text-inverse: #ffffff;

    --v2-link: #4635c4;
    --v2-link-hover: #2f1fa8;
    --v2-link-visited: #6b3fa0;

    --v2-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --v2-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --v2-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 32px rgba(91, 75, 214, 0.14);

    color-scheme: light;
}

[data-theme='mocha'] {
    --v2-accent-h: 28;
    --v2-accent: #c9a27a;
    --v2-accent-strong: #e0c4a0;
    --v2-accent-dim: #a67c52;
    --v2-accent-soft: rgba(201, 162, 122, 0.2);
    --v2-accent-softer: rgba(201, 162, 122, 0.1);
    --v2-accent-ring: rgba(201, 162, 122, 0.45);
    --v2-accent-contrast: #1a120e;

    --v2-cyan: #8fbfb2;
    --v2-cyan-soft: rgba(143, 191, 178, 0.14);

    --v2-success: #8fbc8f;
    --v2-success-soft: rgba(143, 188, 143, 0.16);
    --v2-warning: #e0b15a;
    --v2-warning-soft: rgba(224, 177, 90, 0.16);
    --v2-danger: #d4786a;
    --v2-danger-soft: rgba(212, 120, 106, 0.16);
    --v2-info: #c9a27a;
    --v2-info-soft: rgba(201, 162, 122, 0.16);

    --v2-role-tank: #8fbfb2;
    --v2-role-healer: #8fbc8f;
    --v2-role-support: #c9a27a;
    --v2-role-ranged: #e0b15a;
    --v2-role-melee: #d4786a;

    --v2-bg: #16110e;
    --v2-bg-accent: radial-gradient(1200px 600px at 15% -10%, rgba(201, 162, 122, 0.06), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(143, 191, 178, 0.03), transparent 55%);
    --v2-surface-1: #1f1814;
    --v2-surface-2: #271f1a;
    --v2-surface-3: #322820;
    --v2-surface-4: #3d3228;
    --v2-surface-inset: rgba(0, 0, 0, 0.28);

    --v2-border: rgba(232, 214, 190, 0.12);
    --v2-border-strong: rgba(232, 214, 190, 0.22);
    --v2-border-subtle: rgba(232, 214, 190, 0.07);

    --v2-text: #f5f2ee;
    --v2-text-muted: #c9bfb3;
    --v2-text-dim: #8f7f70;
    --v2-text-inverse: #1a120e;

    --v2-link: #e0c4a0;
    --v2-link-hover: #f0dcc0;
    --v2-link-visited: #d4b896;

    --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --v2-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36);
    --v2-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.46);
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 32px rgba(201, 162, 122, 0.22);
}

[data-theme='cyberpunk'] {
    --v2-accent-h: 318;
    --v2-accent: #ff2ec4;
    --v2-accent-strong: #ff6ed9;
    --v2-accent-dim: #c21890;
    --v2-accent-soft: rgba(255, 46, 196, 0.2);
    --v2-accent-softer: rgba(255, 46, 196, 0.08);
    --v2-accent-ring: rgba(0, 240, 255, 0.5);
    --v2-accent-contrast: #05060c;

    --v2-cyan: #00f0ff;
    --v2-cyan-soft: rgba(0, 240, 255, 0.16);

    --v2-success: #39ff88;
    --v2-success-soft: rgba(57, 255, 136, 0.16);
    --v2-warning: #f5ff4d;
    --v2-warning-soft: rgba(245, 255, 77, 0.16);
    --v2-danger: #ff3864;
    --v2-danger-soft: rgba(255, 56, 100, 0.16);
    --v2-info: #00f0ff;
    --v2-info-soft: rgba(0, 240, 255, 0.16);

    --v2-role-tank: #00f0ff;
    --v2-role-healer: #39ff88;
    --v2-role-support: #c084fc;
    --v2-role-ranged: #f5ff4d;
    --v2-role-melee: #ff2ec4;

    --v2-bg: #05060c;
    --v2-bg-accent: radial-gradient(1100px 560px at 8% -8%, rgba(255, 46, 196, 0.08), transparent 58%),
        radial-gradient(900px 520px at 100% 0%, rgba(0, 240, 255, 0.05), transparent 52%);
    --v2-surface-1: #0b0d16;
    --v2-surface-2: #10131e;
    --v2-surface-3: #171b2a;
    --v2-surface-4: #1f2538;
    --v2-surface-inset: rgba(0, 0, 0, 0.42);

    --v2-border: rgba(0, 240, 255, 0.16);
    --v2-border-strong: rgba(255, 46, 196, 0.32);
    --v2-border-subtle: rgba(0, 240, 255, 0.08);

    --v2-text: #f2fbff;
    --v2-text-muted: #a8c5ce;
    --v2-text-dim: #6e8f9a;
    --v2-text-inverse: #05060c;

    --v2-link: #00f0ff;
    --v2-link-hover: #7af7ff;
    --v2-link-visited: #ff6ed9;

    --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --v2-shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45);
    --v2-shadow-lg: 0 18px 52px rgba(0, 0, 0, 0.55);
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 36px rgba(255, 46, 196, 0.28);
}

[data-theme='pastel-light'] {
    --v2-accent-h: 320;
    --v2-accent: #d48bc8;
    --v2-accent-strong: #b56baf;
    --v2-accent-dim: #e4a8d4;
    --v2-accent-soft: rgba(212, 139, 200, 0.18);
    --v2-accent-softer: rgba(212, 139, 200, 0.08);
    --v2-accent-ring: rgba(181, 107, 175, 0.35);
    --v2-accent-contrast: #ffffff;

    --v2-cyan: #7ec9c2;
    --v2-cyan-soft: rgba(126, 201, 194, 0.16);

    --v2-success: #7db89a;
    --v2-success-soft: rgba(125, 184, 154, 0.16);
    --v2-warning: #e0b07a;
    --v2-warning-soft: rgba(224, 176, 122, 0.18);
    --v2-danger: #e08b8b;
    --v2-danger-soft: rgba(224, 139, 139, 0.16);
    --v2-info: #8fb4e0;
    --v2-info-soft: rgba(143, 180, 224, 0.16);

    --v2-role-tank: #8fb4e0;
    --v2-role-healer: #7db89a;
    --v2-role-support: #c4a3e0;
    --v2-role-ranged: #e0b07a;
    --v2-role-melee: #e08b8b;

    --v2-bg: #faf6fb;
    --v2-bg-accent: radial-gradient(1100px 560px at 12% -8%, rgba(228, 168, 212, 0.1), transparent 58%),
        radial-gradient(900px 500px at 100% 0%, rgba(126, 201, 194, 0.05), transparent 52%);
    --v2-surface-1: #ffffff;
    --v2-surface-2: #fff9fc;
    --v2-surface-3: #f3eaf4;
    --v2-surface-4: #eadfea;
    --v2-surface-inset: rgba(63, 53, 80, 0.05);

    --v2-border: rgba(90, 70, 110, 0.12);
    --v2-border-strong: rgba(90, 70, 110, 0.2);
    --v2-border-subtle: rgba(90, 70, 110, 0.07);

    --v2-text: #2a2435;
    --v2-text-muted: #5c536c;
    --v2-text-dim: #7e758e;
    --v2-text-inverse: #ffffff;

    --v2-link: #a45c9c;
    --v2-link-hover: #8a4584;
    --v2-link-visited: #7a6bb0;

    --v2-shadow-sm: 0 1px 2px rgba(63, 53, 80, 0.06);
    --v2-shadow-md: 0 4px 16px rgba(63, 53, 80, 0.08);
    --v2-shadow-lg: 0 16px 44px rgba(63, 53, 80, 0.12);
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 28px rgba(212, 139, 200, 0.18);

    color-scheme: light;
}

[data-theme='pastel-dark'] {
    --v2-accent-h: 320;
    --v2-accent: #e7b3d4;
    --v2-accent-strong: #f0c9e2;
    --v2-accent-dim: #c489b0;
    --v2-accent-soft: rgba(231, 179, 212, 0.2);
    --v2-accent-softer: rgba(231, 179, 212, 0.1);
    --v2-accent-ring: rgba(231, 179, 212, 0.4);
    --v2-accent-contrast: #2a2030;

    --v2-cyan: #9fd9d0;
    --v2-cyan-soft: rgba(159, 217, 208, 0.14);

    --v2-success: #9dccb4;
    --v2-success-soft: rgba(157, 204, 180, 0.16);
    --v2-warning: #e8c89a;
    --v2-warning-soft: rgba(232, 200, 154, 0.16);
    --v2-danger: #e0a0a8;
    --v2-danger-soft: rgba(224, 160, 168, 0.16);
    --v2-info: #a8c4e8;
    --v2-info-soft: rgba(168, 196, 232, 0.16);

    --v2-role-tank: #a8c4e8;
    --v2-role-healer: #9dccb4;
    --v2-role-support: #c4b0e0;
    --v2-role-ranged: #e8c89a;
    --v2-role-melee: #e0a0a8;

    --v2-bg: #1c1824;
    --v2-bg-accent: radial-gradient(1100px 560px at 12% -8%, rgba(231, 179, 212, 0.06), transparent 58%),
        radial-gradient(900px 500px at 100% 0%, rgba(159, 217, 208, 0.03), transparent 52%);
    --v2-surface-1: #241f2e;
    --v2-surface-2: #2c2638;
    --v2-surface-3: #352e42;
    --v2-surface-4: #403848;
    --v2-surface-inset: rgba(0, 0, 0, 0.28);

    --v2-border: rgba(240, 201, 226, 0.12);
    --v2-border-strong: rgba(240, 201, 226, 0.22);
    --v2-border-subtle: rgba(240, 201, 226, 0.07);

    --v2-text: #f6f1f5;
    --v2-text-muted: #cbbdcf;
    --v2-text-dim: #8f8298;
    --v2-text-inverse: #2a2030;

    --v2-link: #f0c9e2;
    --v2-link-hover: #f8dcf0;
    --v2-link-visited: #c4b0e0;

    --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --v2-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36);
    --v2-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.46);
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 32px rgba(231, 179, 212, 0.2);
}

[data-theme='sunset'] {
    --v2-accent-h: 16;
    --v2-accent: #ff7a45;
    --v2-accent-strong: #ffb347;
    --v2-accent-dim: #e05a2b;
    --v2-accent-soft: rgba(255, 122, 69, 0.2);
    --v2-accent-softer: rgba(255, 122, 69, 0.1);
    --v2-accent-ring: rgba(255, 179, 71, 0.45);
    --v2-accent-contrast: #1a0c0a;

    --v2-cyan: #ff6b8a;
    --v2-cyan-soft: rgba(255, 107, 138, 0.16);

    --v2-success: #c4d47a;
    --v2-success-soft: rgba(196, 212, 122, 0.16);
    --v2-warning: #ffb347;
    --v2-warning-soft: rgba(255, 179, 71, 0.18);
    --v2-danger: #ff5c5c;
    --v2-danger-soft: rgba(255, 92, 92, 0.16);
    --v2-info: #ff8f6b;
    --v2-info-soft: rgba(255, 143, 107, 0.16);

    --v2-role-tank: #ff8f6b;
    --v2-role-healer: #c4d47a;
    --v2-role-support: #e89ad4;
    --v2-role-ranged: #ffb347;
    --v2-role-melee: #ff7a45;

    --v2-bg: #1a0f14;
    --v2-bg-accent: radial-gradient(1100px 580px at 10% -12%, rgba(255, 122, 69, 0.08), transparent 58%),
        radial-gradient(900px 520px at 100% 8%, rgba(255, 107, 138, 0.04), transparent 52%);
    --v2-surface-1: #24141a;
    --v2-surface-2: #2c1a20;
    --v2-surface-3: #382028;
    --v2-surface-4: #442830;
    --v2-surface-inset: rgba(0, 0, 0, 0.32);

    --v2-border: rgba(255, 179, 71, 0.16);
    --v2-border-strong: rgba(255, 122, 69, 0.3);
    --v2-border-subtle: rgba(255, 179, 71, 0.08);

    --v2-text: #fff7f1;
    --v2-text-muted: #e4c4b6;
    --v2-text-dim: #b08880;
    --v2-text-inverse: #1a0c0a;

    --v2-link: #ffb347;
    --v2-link-hover: #ffd08a;
    --v2-link-visited: #ff8f6b;

    --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.42);
    --v2-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --v2-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 32px rgba(255, 122, 69, 0.24);
}

/* Discord client "Ash" (cool gray + blurple), sampled from Discord's 2025 theme tokens. */
[data-theme='discord-ash'] {
    --v2-accent-h: 235;
    --v2-accent: #5865f2;
    --v2-accent-strong: #7983f5;
    --v2-accent-dim: #4752c4;
    --v2-accent-soft: rgba(88, 101, 242, 0.2);
    --v2-accent-softer: rgba(88, 101, 242, 0.1);
    --v2-accent-ring: rgba(88, 101, 242, 0.45);
    --v2-accent-contrast: #ffffff;

    --v2-cyan: #7bb0f5;
    --v2-cyan-soft: rgba(123, 176, 245, 0.14);

    --v2-success: #57f287;
    --v2-success-soft: rgba(87, 242, 135, 0.14);
    --v2-warning: #fee75c;
    --v2-warning-soft: rgba(254, 231, 92, 0.16);
    --v2-danger: #ed4245;
    --v2-danger-soft: rgba(237, 66, 69, 0.16);
    --v2-info: #5865f2;
    --v2-info-soft: rgba(88, 101, 242, 0.16);

    --v2-role-tank: #3498db;
    --v2-role-healer: #57f287;
    --v2-role-support: #9b58b5;
    --v2-role-ranged: #fee75c;
    --v2-role-melee: #ed4245;

    --v2-bg: #1e1f22;
    --v2-bg-accent: none;
    --v2-surface-1: #2b2d31;
    --v2-surface-2: #313338;
    --v2-surface-3: #383a40;
    --v2-surface-4: #43444c;
    --v2-surface-inset: #1a1b1e;

    --v2-border: rgba(255, 255, 255, 0.1);
    --v2-border-strong: rgba(255, 255, 255, 0.18);
    --v2-border-subtle: rgba(255, 255, 255, 0.06);

    --v2-text: #f2f3f5;
    --v2-text-muted: #c4c7cc;
    --v2-text-dim: #94979e;
    --v2-text-inverse: #1e1f22;

    --v2-link: #7bb0f5;
    --v2-link-hover: #a6c8f8;
    --v2-link-visited: #c4b5fd;

    --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --v2-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32);
    --v2-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 32px rgba(88, 101, 242, 0.22);
}

/* True black chrome for OLED. Surfaces stay near-black so cards still separate. */
[data-theme='black'] {
    --v2-accent-h: 250;
    --v2-accent: #8b7dff;
    --v2-accent-strong: #a99eff;
    --v2-accent-dim: #6d5efc;
    --v2-accent-soft: rgba(139, 125, 255, 0.18);
    --v2-accent-softer: rgba(139, 125, 255, 0.08);
    --v2-accent-ring: rgba(139, 125, 255, 0.4);
    --v2-accent-contrast: #ffffff;

    --v2-cyan: #22d3ee;
    --v2-cyan-soft: rgba(34, 211, 238, 0.12);

    --v2-success: #34d399;
    --v2-success-soft: rgba(52, 211, 153, 0.12);
    --v2-warning: #fbbf24;
    --v2-warning-soft: rgba(251, 191, 36, 0.12);
    --v2-danger: #f87171;
    --v2-danger-soft: rgba(248, 113, 113, 0.12);
    --v2-info: #60a5fa;
    --v2-info-soft: rgba(96, 165, 250, 0.12);

    --v2-role-tank: #60a5fa;
    --v2-role-healer: #34d399;
    --v2-role-support: #c084fc;
    --v2-role-ranged: #fbbf24;
    --v2-role-melee: #f87171;

    --v2-bg: #000000;
    --v2-bg-accent: none;
    --v2-surface-1: #000000;
    --v2-surface-2: #0a0a0a;
    --v2-surface-3: #121212;
    --v2-surface-4: #1c1c1c;
    --v2-surface-inset: #000000;

    --v2-border: rgba(255, 255, 255, 0.12);
    --v2-border-strong: rgba(255, 255, 255, 0.2);
    --v2-border-subtle: rgba(255, 255, 255, 0.06);

    --v2-text: #f4f4f4;
    --v2-text-muted: #b8b8b8;
    --v2-text-dim: #7a7a7a;
    --v2-text-inverse: #000000;

    --v2-link: #a99eff;
    --v2-link-hover: #c4bdff;
    --v2-link-visited: #c4b5fd;

    --v2-shadow-sm: none;
    --v2-shadow-md: none;
    --v2-shadow-lg: none;
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring);
}

/* Catppuccin Mocha — https://github.com/catppuccin/catppuccin */
[data-theme='catppuccin'] {
    --v2-accent-h: 267;
    --v2-accent: #cba6f7;
    --v2-accent-strong: #b4befe;
    --v2-accent-dim: #a78bfa;
    --v2-accent-soft: rgba(203, 166, 247, 0.2);
    --v2-accent-softer: rgba(203, 166, 247, 0.1);
    --v2-accent-ring: rgba(203, 166, 247, 0.45);
    --v2-accent-contrast: #11111b;

    --v2-cyan: #94e2d5;
    --v2-cyan-soft: rgba(148, 226, 213, 0.14);

    --v2-success: #a6e3a1;
    --v2-success-soft: rgba(166, 227, 161, 0.16);
    --v2-warning: #f9e2af;
    --v2-warning-soft: rgba(249, 226, 175, 0.16);
    --v2-danger: #f38ba8;
    --v2-danger-soft: rgba(243, 139, 168, 0.16);
    --v2-info: #89b4fa;
    --v2-info-soft: rgba(137, 180, 250, 0.16);

    --v2-role-tank: #89b4fa;
    --v2-role-healer: #a6e3a1;
    --v2-role-support: #cba6f7;
    --v2-role-ranged: #f9e2af;
    --v2-role-melee: #f38ba8;

    --v2-bg: #11111b;
    --v2-bg-accent: radial-gradient(1200px 600px at 15% -10%, rgba(203, 166, 247, 0.06), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(137, 180, 250, 0.03), transparent 55%);
    --v2-surface-1: #181825;
    --v2-surface-2: #1e1e2e;
    --v2-surface-3: #313244;
    --v2-surface-4: #45475a;
    --v2-surface-inset: rgba(17, 17, 27, 0.45);

    --v2-border: rgba(205, 214, 244, 0.1);
    --v2-border-strong: rgba(205, 214, 244, 0.18);
    --v2-border-subtle: rgba(205, 214, 244, 0.06);

    --v2-text: #e6eaf8;
    --v2-text-muted: #cdd6f4;
    --v2-text-dim: #7f849c;
    --v2-text-inverse: #11111b;

    --v2-link: #89b4fa;
    --v2-link-hover: #b4befe;
    --v2-link-visited: #cba6f7;

    --v2-shadow-sm: 0 1px 2px rgba(17, 17, 27, 0.5);
    --v2-shadow-md: 0 4px 16px rgba(17, 17, 27, 0.45);
    --v2-shadow-lg: 0 16px 48px rgba(17, 17, 27, 0.55);
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 32px rgba(203, 166, 247, 0.22);
}

/*
 * Classic palette: original v1 indigo / slate on the v2 layout.
 * Independent of light/dark (`data-theme`). Control lives on Profile only.
 */
[data-palette='classic'] {
    --v2-accent-h: 229;
    --v2-accent: #667eea;
    --v2-accent-strong: #90cdf4;
    --v2-accent-dim: #5a67d8;
    --v2-accent-soft: rgba(102, 126, 234, 0.18);
    --v2-accent-softer: rgba(102, 126, 234, 0.1);
    --v2-accent-ring: rgba(102, 126, 234, 0.45);
    --v2-accent-contrast: #ffffff;

    --v2-cyan: #7dd3fc;
    --v2-cyan-soft: rgba(125, 211, 252, 0.14);

    --v2-bg: #1a202c;
    --v2-bg-accent: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
    --v2-surface-1: #2d3748;
    --v2-surface-2: #2d3748;
    --v2-surface-3: rgba(74, 85, 104, 0.45);
    --v2-surface-4: #4a5568;
    --v2-surface-inset: rgba(0, 0, 0, 0.28);

    --v2-border: #4a5568;
    --v2-border-strong: #718096;
    --v2-border-subtle: rgba(74, 85, 104, 0.65);

    --v2-text: #e2e8f0;
    --v2-text-muted: #cbd5e0;
    --v2-text-dim: #a0aec0;
    --v2-text-inverse: #1a202c;

    --v2-link: #7dd3fc;
    --v2-link-hover: #bae6fd;
    --v2-link-visited: #c4b5fd;

    --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --v2-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32);
    --v2-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 32px rgba(102, 126, 234, 0.22);
}

[data-theme='light'][data-palette='classic'] {
    --v2-accent: #667eea;
    --v2-accent-strong: #5a67d8;
    --v2-accent-dim: #764ba2;
    --v2-accent-soft: rgba(102, 126, 234, 0.14);
    --v2-accent-softer: rgba(102, 126, 234, 0.08);
    --v2-accent-ring: rgba(102, 126, 234, 0.4);

    --v2-cyan: #4338ca;
    --v2-cyan-soft: rgba(67, 56, 202, 0.1);

    --v2-bg: #667eea;
    --v2-bg-accent: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --v2-surface-1: #ffffff;
    --v2-surface-2: #ffffff;
    --v2-surface-3: #eef2f7;
    --v2-surface-4: #e2e8f0;
    --v2-surface-inset: rgba(26, 32, 44, 0.05);

    --v2-border: #e2e8f0;
    --v2-border-strong: #cbd5e0;
    --v2-border-subtle: rgba(226, 232, 240, 0.9);

    --v2-text: #1a202c;
    --v2-text-muted: #475569;
    --v2-text-dim: #64748b;
    --v2-text-inverse: #ffffff;

    --v2-link: #4338ca;
    --v2-link-hover: #4f46e5;
    --v2-link-visited: #6d28d9;

    --v2-shadow-sm: 0 1px 2px rgba(26, 32, 44, 0.08);
    --v2-shadow-md: 0 4px 16px rgba(26, 32, 44, 0.1);
    --v2-shadow-lg: 0 16px 48px rgba(26, 32, 44, 0.14);
    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 32px rgba(102, 126, 234, 0.18);
}

/* Frosted topbar would otherwise pick up the saturated indigo --v2-bg. */
[data-theme='light'][data-palette='classic'] .v2-topbar {
    background: var(--v2-surface-1);
}

[data-theme='mocha'][data-palette='classic'] {
    --v2-accent: #667eea;
    --v2-accent-strong: #90cdf4;
    --v2-accent-dim: #5a67d8;
    --v2-accent-soft: rgba(102, 126, 234, 0.18);
    --v2-accent-softer: rgba(102, 126, 234, 0.1);
    --v2-accent-ring: rgba(102, 126, 234, 0.45);
    --v2-accent-contrast: #ffffff;

    --v2-cyan: #7dd3fc;
    --v2-cyan-soft: rgba(125, 211, 252, 0.14);

    --v2-bg: #16110e;
    --v2-bg-accent: radial-gradient(1200px 600px at 15% -10%, rgba(102, 126, 234, 0.06), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(125, 211, 252, 0.03), transparent 55%);
    --v2-surface-1: #1f1814;
    --v2-surface-2: #271f1a;
    --v2-surface-3: #322820;
    --v2-surface-4: #3d3228;
    --v2-surface-inset: rgba(0, 0, 0, 0.28);

    --v2-border: rgba(232, 214, 190, 0.12);
    --v2-border-strong: rgba(232, 214, 190, 0.22);
    --v2-border-subtle: rgba(232, 214, 190, 0.07);

    --v2-text: #f5f2ee;
    --v2-text-muted: #c9bfb3;
    --v2-text-dim: #8f7f70;
    --v2-text-inverse: #1a120e;

    --v2-link: #7dd3fc;
    --v2-link-hover: #bae6fd;
    --v2-link-visited: #c4b5fd;

    --v2-shadow-glow: 0 0 0 1px var(--v2-accent-ring), 0 8px 32px rgba(102, 126, 234, 0.22);
}