/* ── Variables ─────────────────────────────────────────────── */
/* Shared / non-color tokens */
:root {
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --font-sans: 'DM Sans', sans-serif;
    --font-mono: 'DM Mono', monospace;
}

    /* Light mode */
    :root,
    :root[data-theme="light"] {
        --bg: #f8f7f5;
        --surface: #ffffff;
        --surface2: #f2f1ef;
        --border: #e4e2de;
        --border2: #d0cdc8;
        --text: #1a1917;
        --muted: #8a8680;
        --accent: #1a56db;
        --accent-bg: #eff6ff;
        --accent-glow: rgba(26, 86, 219, 0.25);
        --danger: #dc2626;
        --danger-bg: rgba(220, 38, 38, 0.1);
        --warning: #fbbf24;
        --success: #16a34a;
        --shadow-header: 0 1px 0 var(--border);
        --shadow-sidebar: 1px 0 0 var(--border);
        --shadow-overlay: 4px 0 32px rgba(0, 0, 0, 0.15);
    }

        /* Dark mode */
        :root[data-theme="dark"] {
            --bg: #0f1117;
            --surface: #181c27;
            --surface2: #1e2333;
            --border: rgba(255, 255, 255, 0.07);
            --border2: rgba(255, 255, 255, 0.14);
            --text: #eef0f6;
            --muted: #7c829a;
            --accent: #4f7cff;
            --accent-bg: rgba(79, 124, 255, 0.12);
            --accent-glow: rgba(79, 124, 255, 0.25);
            --danger: #ff5c6a;
            --danger-bg: rgba(255, 92, 106, 0.1);
            --warning: #fbbf24;
            --success: #22c55e;
            --shadow-header: 0 1px 0 var(--border);
            --shadow-sidebar: 1px 0 0 var(--border);
            --shadow-overlay: 4px 0 32px rgba(0, 0, 0, 0.5);
        }

/* System preference fallback (no data-theme set) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f1117;
        --surface: #181c27;
        --surface2: #1e2333;
        --border: rgba(255, 255, 255, 0.07);
        --border2: rgba(255, 255, 255, 0.14);
        --text: #eef0f6;
        --muted: #7c829a;
        --accent: #4f7cff;
        --accent-bg: rgba(79, 124, 255, 0.12);
        --accent-glow: rgba(79, 124, 255, 0.25);
        --danger: #ff5c6a;
        --danger-bg: rgba(255, 92, 106, 0.1);
        --warning: #fbbf24;
        --success: #22c55e;
        --shadow-header: 0 1px 0 var(--border);
        --shadow-sidebar: 1px 0 0 var(--border);
        --shadow-overlay: 4px 0 32px rgba(0, 0, 0, 0.5);
    }
}

/* z-index */
:root {
    --z-base: 0;
    --z-raised: 10; /* cards, dropdowns that sit above content */
    --z-overlay: 100; /* dimming overlays, backdrops */
    --z-drawer: 200; /* sidebars, drawers */
    --z-sticky: 300; /* sticky headers, sticky columns */
    --z-dropdown: 400; /* menus, popups anchored to elements */
    --z-tooltip: 500; /* tooltips, always on top of dropdowns */
    --z-nav: 600; /* navigation bars, app bars */
    --z-modal: 700; /* modal dialogs */
    --z-toast: 800; /* notifications, toasts */
    --z-spinner: 900; /* full-page loading overlays */
}