/* ===== Shared tokens ===== */
:root {
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --danger: #ef4444;
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.15);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --danger-bg: rgba(239, 68, 68, 0.15);
}

html, body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg-canvas);
    color: var(--text-primary);
}

/* ===== Navy (default) ===== */
:root, [data-theme="navy"] {
    --bg-canvas: #0f1e33;
    --bg-surface: #162a45;
    --bg-surface-alt: #1b3250;
    --bg-surface-hover: #213b5e;
    --bg-input: #12243c;
    --text-primary: #e8eef7;
    --text-secondary: #b3c1d6;
    --text-muted: #7f92ad;
    --border-subtle: #243d5f;
    --border-strong: #35547f;
    --accent: #4f8cff;
    --accent-hover: #3b78ec;
    --accent-soft: rgba(79, 140, 255, 0.16);
    --topbar-bg: #12243c;
    --topbar-text: #e8eef7;
    --topbar-text-muted: #8fa3bf;
    --nav-bg: #12243c;
    --nav-border: #243d5f;
    --nav-text: #e8eef7;
    --nav-text-muted: #8fa3bf;
    --brand-corner-bg: #1B3A5C;
    --shadow-card: 0 1px 3px rgba(0,0,0,.25);
    --shadow-pop: 0 12px 32px rgba(0,0,0,.45);
}

/* ===== Cream (light) ===== */
[data-theme="cream"] {
    --bg-canvas: #f6f3ee;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f0ebe3;
    --bg-surface-hover: #ebe5da;
    --bg-input: #faf8f4;
    --text-primary: #2b2a27;
    --text-secondary: #5c5850;
    --text-muted: #8c877d;
    --border-subtle: #e4ded3;
    --border-strong: #cfc7b8;
    --accent: #c9822b;
    --accent-hover: #b37320;
    --accent-soft: rgba(201, 130, 43, 0.15);
    --topbar-bg: #ffffff;
    --topbar-text: #2b2a27;
    --topbar-text-muted: #8c877d;
    --nav-bg: #fbf9f5;
    --nav-border: #e4ded3;
    --nav-text: #2b2a27;
    --nav-text-muted: #7a756b;
    --brand-corner-bg: #fbf9f5;
    --shadow-card: 0 1px 3px rgba(60,50,30,.08);
    --shadow-pop: 0 12px 32px rgba(60,50,30,.18);
}

/* ===== Indigo ===== */
[data-theme="indigo"] {
    --bg-canvas: #0e1020;
    --bg-surface: #161a30;
    --bg-surface-alt: #1c2140;
    --bg-surface-hover: #232950;
    --bg-input: #121528;
    --text-primary: #e9ecff;
    --text-secondary: #b6bce6;
    --text-muted: #838ab8;
    --border-subtle: #272d52;
    --border-strong: #3a4278;
    --accent: #5b7fff;
    --accent-hover: #4767ec;
    --accent-soft: rgba(91, 127, 255, 0.18);
    --topbar-bg: #121528;
    --topbar-text: #e9ecff;
    --topbar-text-muted: #8f96c4;
    --nav-bg: #121528;
    --nav-border: #272d52;
    --nav-text: #e9ecff;
    --nav-text-muted: #8f96c4;
    --brand-corner-bg: #121528;
    --shadow-card: 0 1px 3px rgba(0,0,0,.3);
    --shadow-pop: 0 12px 32px rgba(0,0,0,.5);
}

/* ===== Blue ===== */
[data-theme="blue"] {
    --bg-canvas: #0d1117;
    --bg-surface: #151b25;
    --bg-surface-alt: #1a2230;
    --bg-surface-hover: #212b3d;
    --bg-input: #10151e;
    --text-primary: #e6ebf5;
    --text-secondary: #aeb8cc;
    --text-muted: #7a869e;
    --border-subtle: #232d3f;
    --border-strong: #34425b;
    --accent: #4a5fea;
    --accent-hover: #3a4ed4;
    --accent-soft: rgba(74, 95, 234, 0.2);
    --topbar-bg: #10151e;
    --topbar-text: #e6ebf5;
    --topbar-text-muted: #8591a8;
    --nav-bg: #10151e;
    --nav-border: #232d3f;
    --nav-text: #e6ebf5;
    --nav-text-muted: #8591a8;
    --brand-corner-bg: #10151e;
    --shadow-card: 0 1px 3px rgba(0,0,0,.3);
    --shadow-pop: 0 12px 32px rgba(0,0,0,.5);
}

/* ===== Brown (near-black, warm) ===== */
[data-theme="brown"] {
    --bg-canvas: #0c0c0d;
    --bg-surface: #161513;
    --bg-surface-alt: #1d1b18;
    --bg-surface-hover: #26231f;
    --bg-input: #121110;
    --text-primary: #f1ece4;
    --text-secondary: #c2b9ab;
    --text-muted: #8a8174;
    --border-subtle: #2a2723;
    --border-strong: #3d3832;
    --accent: #d9953a;
    --accent-hover: #c2842d;
    --accent-soft: rgba(217, 149, 58, 0.16);
    --topbar-bg: #121110;
    --topbar-text: #f1ece4;
    --topbar-text-muted: #9a9183;
    --nav-bg: #121110;
    --nav-border: #2a2723;
    --nav-text: #f1ece4;
    --nav-text-muted: #9a9183;
    --brand-corner-bg: #121110;
    --shadow-card: 0 1px 3px rgba(0,0,0,.4);
    --shadow-pop: 0 12px 32px rgba(0,0,0,.6);
}

/* ===== Cyan ===== */
[data-theme="cyan"] {
    --bg-canvas: #0a1114;
    --bg-surface: #111c21;
    --bg-surface-alt: #16252b;
    --bg-surface-hover: #1c2f37;
    --bg-input: #0e171b;
    --text-primary: #e4f3f7;
    --text-secondary: #a9c6ce;
    --text-muted: #75929b;
    --border-subtle: #1f323a;
    --border-strong: #2f4a55;
    --accent: #22d3ee;
    --accent-hover: #12bcd6;
    --accent-soft: rgba(34, 211, 238, 0.15);
    --topbar-bg: #0e171b;
    --topbar-text: #e4f3f7;
    --topbar-text-muted: #84a2ab;
    --nav-bg: #0e171b;
    --nav-border: #1f323a;
    --nav-text: #e4f3f7;
    --nav-text-muted: #84a2ab;
    --brand-corner-bg: #0e171b;
    --shadow-card: 0 1px 3px rgba(0,0,0,.35);
    --shadow-pop: 0 12px 32px rgba(0,0,0,.55);
}