/* ============================================================
   zSupport — Global Design Tokens
   Change these and the whole app re-themes. Don't hardcode
   hex values in individual pages; always reference a token.
   ============================================================ */
:root,
[data-theme="amber"] {
    /* Fonts */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* Surfaces */
    --bg-canvas: #0a0e17;
    --bg-surface: #10141f;
    --bg-surface-alt: #0d1019;
    --bg-surface-hover: #171c28;
    --bg-input: #131722;
    /* Navigation */
    --nav-bg: var(--bg-surface);
    --nav-text: var(--text-primary);
    --nav-text-muted: var(--text-secondary);
    --nav-border: var(--border-subtle);
    --topbar-bg: var(--bg-canvas);
    --topbar-text: var(--text-primary);
    --topbar-text-muted: var(--text-secondary);
    --brand-corner-bg: var(--bg-surface);
    --page-action-bg: var(--accent-soft);
    --page-action-text: var(--accent);
    /* Borders */
    --border-subtle: #1f2532;
    --border-strong: #2e3648;
    /* Text */
    --text-primary: #e8ecf3;
    --text-secondary: #b3bccc;
    --text-muted: #6b7688;
    /* Accent */
    --accent: #f0a83c;
    --accent-hover: #e0973a;
    --accent-soft-strong: rgba(240, 168, 60, 0.24);
    --accent-soft: rgba(240, 168, 60, 0.14);
    /* Semantic states */
    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.13);
    --success-border: rgba(74, 222, 128, 0.3);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.13);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.13);
    --info: #a78bfa;
    --info-bg: rgba(167, 139, 250, 0.18);
    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    /* Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 4px 16px rgba(240, 168, 60, 0.3);
    --shadow-glow-strong: 0 6px 22px rgba(240, 168, 60, 0.4);
}

[data-theme="cyan"] {
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --bg-canvas: #0b0f11;
    --bg-surface: #12181b;
    --bg-surface-alt: #0e1315;
    --bg-surface-hover: #1b2327;
    --bg-input: #151b1e;
    /* Navigation */
    --nav-bg: var(--bg-surface);
    --nav-text: var(--text-primary);
    --nav-text-muted: var(--text-secondary);
    --nav-border: var(--border-subtle);
    --topbar-bg: var(--bg-canvas);
    --topbar-text: var(--text-primary);
    --topbar-text-muted: var(--text-secondary);
    --brand-corner-bg: var(--bg-surface);
    --page-action-bg: var(--accent-soft);
    --page-action-text: var(--accent);
    --border-subtle: #212a2e;
    --border-strong: #2f3b40;
    --text-primary: #e9f1f2;
    --text-secondary: #a9bcc0;
    --text-muted: #6c8286;
    --accent: #22d3ee;
    --accent-hover: #1cb8d1;
    --accent-soft-strong: rgba(34, 211, 238, 0.24);
    --accent-soft: rgba(34, 211, 238, 0.14);
    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.13);
    --success-border: rgba(74, 222, 128, 0.3);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.13);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.13);
    --info: #a78bfa;
    --info-bg: rgba(167, 139, 250, 0.18);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 4px 16px rgba(34, 211, 238, 0.3);
    --shadow-glow-strong: 0 6px 22px rgba(34, 211, 238, 0.4);
}

[data-theme="cream"] {
    /* Fonts */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* Surfaces */
    --bg-canvas: #f6f3ee;
    --bg-surface: #ffffff;
    --bg-surface-alt: #efeae1;
    --bg-surface-hover: #e8e1d5;
    --bg-input: #ffffff;
    /* Navigation */
    --nav-bg: var(--bg-surface);
    --nav-text: var(--text-primary);
    --nav-text-muted: var(--text-secondary);
    --nav-border: var(--border-subtle);
    --topbar-bg: var(--bg-canvas);
    --topbar-text: var(--text-primary);
    --topbar-text-muted: var(--text-secondary);
    --brand-corner-bg: var(--bg-surface);
    --page-action-bg: var(--accent-soft);
    --page-action-text: var(--accent);
    /* Borders */
    --border-subtle: #ddd5c7;
    --border-strong: #c4b9a4;
    /* Text */
    --text-primary: #2a241c;
    --text-secondary: #5c5344;
    --text-muted: #8c8272;
    /* Accent */
    --accent: #a8462f;
    --accent-hover: #8f3a27;
    --accent-soft-strong: rgba(168, 70, 47, 0.16);
    --accent-soft: rgba(168, 70, 47, 0.09);
    /* Semantic states */
    --success: #3d8a52;
    --success-bg: rgba(61, 138, 82, 0.1);
    --success-border: rgba(61, 138, 82, 0.28);
    --warning: #b8791f;
    --warning-bg: rgba(184, 121, 31, 0.1);
    --danger: #b83b3b;
    --danger-bg: rgba(184, 59, 59, 0.1);
    --info: #5c5aa8; /* muted indigo, for "role" type pills */
    --info-bg: rgba(92, 90, 168, 0.12);
    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    /* Shadows */
    --shadow-card: 0 2px 10px rgba(42, 36, 28, 0.08);
    --shadow-pop: 0 16px 44px rgba(42, 36, 28, 0.18);
    --shadow-glow: 0 4px 16px rgba(168, 70, 47, 0.2);
    --shadow-glow-strong: 0 6px 22px rgba(168, 70, 47, 0.28);
}

[data-theme="brown"] {
    /* Fonts */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* Surfaces */
    --bg-canvas: #0c0c0d;
    --bg-surface: #131313;
    --bg-surface-alt: #0f0f0f;
    --bg-surface-hover: #1a1a1a;
    --bg-input: #161616;
    /* Navigation */
    --nav-bg: var(--bg-surface);
    --nav-text: var(--text-primary);
    --nav-text-muted: var(--text-secondary);
    --nav-border: var(--border-subtle);
    --topbar-bg: var(--bg-canvas);
    --topbar-text: var(--text-primary);
    --topbar-text-muted: var(--text-secondary);
    --brand-corner-bg: var(--bg-surface);
    --page-action-bg: var(--accent-soft);
    --page-action-text: var(--accent);
    /* Borders */
    --border-subtle: #2b2b2b;
    --border-strong: #3a3a3a;
    /* Text */
    --text-primary: #eceae6;
    --text-secondary: #c9c7c2;
    --text-muted: #8a8a86;
    /* Accent */
    --accent: #f0a83c;
    --accent-hover: #e0973a;
    --accent-soft-strong: rgba(240, 168, 60, 0.24);
    --accent-soft: rgba(240, 168, 60, 0.14);
    /* Semantic states */
    --success: #97c459;
    --success-bg: rgba(151, 196, 89, 0.13);
    --success-border: rgba(151, 196, 89, 0.3);
    --warning: #e6b800;
    --warning-bg: rgba(230, 184, 0, 0.13);
    --danger: #e5484d;
    --danger-bg: rgba(229, 72, 77, 0.13);
    --info: #a78bfa;
    --info-bg: rgba(167, 139, 250, 0.18);
    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    /* Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 4px 16px rgba(240, 168, 60, 0.3);
    --shadow-glow-strong: 0 6px 22px rgba(240, 168, 60, 0.4);
}

[data-theme="navy"] {
    /* Fonts */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* Surfaces */
    --bg-canvas: #0f1420;
    --bg-surface: #151c2c;
    --bg-surface-alt: #121826;
    --bg-surface-hover: #1c2536;
    --bg-input: #131a29;
    /* Navigation */
    --nav-bg: var(--bg-surface);
    --nav-text: var(--text-primary);
    --nav-text-muted: var(--text-secondary);
    --nav-border: var(--border-subtle);
    --topbar-bg: var(--bg-canvas);
    --topbar-text: var(--text-primary);
    --topbar-text-muted: var(--text-secondary);
    --brand-corner-bg: var(--bg-surface);
    --page-action-bg: var(--accent-soft);
    --page-action-text: var(--accent);
    /* Borders */
    --border-subtle: #263047;
    --border-strong: #35415c;
    /* Text */
    --text-primary: #e7ecf3;
    --text-secondary: #c8d0dd;
    --text-muted: #7c8aa0;
    /* Accent */
    --accent: #4a5fea;
    --accent-hover: #3a4dd1;
    --accent-soft-strong: rgba(74, 95, 234, 0.24);
    --accent-soft: rgba(74, 95, 234, 0.14);
    /* Semantic states */
    --success: #5dcaa5;
    --success-bg: rgba(93, 202, 165, 0.13);
    --success-border: rgba(93, 202, 165, 0.3);
    --warning: #ef9f27;
    --warning-bg: rgba(239, 159, 39, 0.13);
    --danger: #e24b4a;
    --danger-bg: rgba(226, 75, 74, 0.13);
    --info: #a78bfa;
    --info-bg: rgba(167, 139, 250, 0.18);
    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    /* Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.65);
    --shadow-glow: 0 4px 16px rgba(74, 95, 234, 0.3);
    --shadow-glow-strong: 0 6px 22px rgba(74, 95, 234, 0.4);
}

[data-theme="indigo"] {
    /* Fonts */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* Surfaces */
    --bg-canvas: #1e2738;
    --bg-surface: #262f45;
    --bg-surface-alt: #202939;
    --bg-surface-hover: #2c3650;
    --bg-input: #1a2333;
    /* Navigation */
    --nav-bg: var(--bg-surface);
    --nav-text: var(--text-primary);
    --nav-text-muted: var(--text-secondary);
    --nav-border: var(--border-subtle);
    --topbar-bg: var(--bg-canvas);
    --topbar-text: var(--text-primary);
    --topbar-text-muted: var(--text-secondary);
    --brand-corner-bg: var(--bg-surface);
    --page-action-bg: var(--accent-soft);
    --page-action-text: var(--accent);
    /* Borders */
    --border-subtle: #37435f;
    --border-strong: #465270;
    /* Text */
    --text-primary: #f1f4f9;
    --text-secondary: #a3b3cb;
    --text-muted: #78889e;
    /* Accent */
    --accent: #5b7fff;
    --accent-hover: #4a6ae8;
    --accent-soft-strong: rgba(91, 127, 255, 0.24);
    --accent-soft: rgba(91, 127, 255, 0.14);
    /* Semantic states */
    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.13);
    --success-border: rgba(52, 211, 153, 0.3);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.13);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.13);
    --info: #a78bfa;
    --info-bg: rgba(167, 139, 250, 0.18);
    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    /* Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 4px 16px rgba(91, 127, 255, 0.3);
    --shadow-glow-strong: 0 6px 22px rgba(91, 127, 255, 0.4);
}

[data-theme="gold"] {
    /* Fonts */
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* Surfaces */
    --bg-canvas: #F8F9FA;
    --bg-surface: #FFFFFF;
    --bg-surface-alt: #F5F6F8;
    --bg-surface-hover: #F0F2F5;
    --bg-input: #FFFFFF;
    /* Navigation */
    --nav-bg: #16304D;
    --nav-text: #FFFFFF;
    --nav-text-muted: #D5DCE5;
    --nav-border: rgba(255, 255, 255, 0.10);
    --topbar-bg: #1B3A5C;
    --topbar-text: #FFFFFF;
    --topbar-text-muted: #D5DCE5;
    --brand-corner-bg: #11253B;
    --page-action-bg: #11253B;
    --page-action-text: #FFFFFF;
    /* Borders */
    --border-subtle: #E7E9EC;
    --border-strong: #E2E5E8;
    /* Text */
    --text-primary: #212529;
    --text-secondary: #5A6672;
    --text-muted: #8A8FA3;
    /* Accent */
    --accent: #C9A227;
    --accent-hover: #A9821F;
    --accent-soft-strong: rgba(201, 162, 39, 0.24);
    --accent-soft: rgba(201, 162, 39, 0.14);
    /* Semantic states */
    --success: #2E7D32;
    --success-bg: rgba(46, 125, 50, 0.13);
    --success-border: rgba(46, 125, 50, 0.30);
    --warning: #C9A227;
    --warning-bg: rgba(201, 162, 39, 0.13);
    --danger: #C62828;
    --danger-bg: rgba(198, 40, 40, 0.13);
    --info: #1B3A5C;
    --info-bg: rgba(27, 58, 92, 0.14);
    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    /* Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 4px 16px rgba(201, 162, 39, 0.20);
    --shadow-glow-strong: 0 6px 22px rgba(201, 162, 39, 0.30);
}