/* ============================================================
   theme.css — Design tokens + dark mode
   Modify CSS variables here to retheme the entire app.
   ============================================================ */

:root {
    /* Brand */
    --brand-50:  #f5f3ff;
    --brand-100: #ede9fe;
    --brand-200: #ddd6fe;
    --brand-400: #a78bfa;
    --brand-500: #8b5cf6;
    --brand-600: #7c3aed;
    --brand-700: #6d28d9;
    --brand-800: #5b21b6;
    --brand-900: #4c1d95;

    /* Surfaces · light */
    --bg-app:        #f8fafc;
    --bg-surface:    #ffffff;
    --bg-surface-2:  #f9fafb;
    --bg-elevated:   #ffffff;
    --bg-muted:      #f3f4f6;
    --bg-overlay:    rgba(255,255,255,0.85);
    --bg-backdrop:   rgba(0,0,0,0.5);

    /* Text */
    --text-primary:   #111827;
    --text-secondary: #4b5563;
    --text-muted:     #6b7280;
    --text-soft:      #9ca3af;
    --text-faint:     #d1d5db;
    --text-inverse:   #ffffff;

    /* Borders */
    --border-color:   #e5e7eb;
    --border-soft:    #f3f4f6;
    --border-strong:  #d1d5db;

    /* Accents */
    --success-bg:  #d1fae5;
    --success-fg:  #047857;
    --success-500: #10b981;
    --warning-bg:  #fef3c7;
    --warning-fg:  #b45309;
    --warning-500: #f59e0b;
    --danger-bg:   #fee2e2;
    --danger-fg:   #b91c1c;
    --danger-500:  #ef4444;
    --info-bg:     #dbeafe;
    --info-fg:     #1d4ed8;
    --info-500:    #3b82f6;

    /* Sidebar */
    --sidebar-bg-from: #1e1b4b;
    --sidebar-bg-via:  #312e81;
    --sidebar-bg-to:   #4c1d95;
    --sidebar-text:    rgba(255,255,255,0.7);
    --sidebar-text-active: #ffffff;
    --sidebar-hover:   rgba(255,255,255,0.08);
    --sidebar-active:  rgba(255,255,255,0.15);
    --sidebar-divider: rgba(255,255,255,0.1);

    /* Effects */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow:    0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.04);
    --shadow-brand: 0 8px 24px -8px rgba(124,58,237,0.45);

    /* Radius */
    --radius-sm:  6px;
    --radius:     10px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-2xl: 24px;
    --radius-full: 999px;

    /* Transitions */
    --t-fast: 120ms cubic-bezier(.4,0,.2,1);
    --t:      180ms cubic-bezier(.4,0,.2,1);
    --t-slow: 280ms cubic-bezier(.4,0,.2,1);

    /* Layout */
    --sidebar-w: 260px;
    --topbar-h: 56px;

    color-scheme: light;
}

/* ── Dark mode ──────────────────────────────────────────── */
.dark {
    --bg-app:        #0a0a0f;
    --bg-surface:    #14141b;
    --bg-surface-2:  #1a1a24;
    --bg-elevated:   #1c1c28;
    --bg-muted:      #22222e;
    --bg-overlay:    rgba(20,20,27,0.85);
    --bg-backdrop:   rgba(0,0,0,0.7);

    --text-primary:   #f4f4f5;
    --text-secondary: #d4d4d8;
    --text-muted:     #a1a1aa;
    --text-soft:      #71717a;
    --text-faint:     #52525b;
    --text-inverse:   #18181b;

    --border-color:   #2a2a36;
    --border-soft:    #1f1f2a;
    --border-strong:  #3a3a4a;

    --success-bg:  rgba(16,185,129,0.15);
    --success-fg:  #34d399;
    --warning-bg:  rgba(245,158,11,0.15);
    --warning-fg:  #fbbf24;
    --danger-bg:   rgba(239,68,68,0.15);
    --danger-fg:   #f87171;
    --info-bg:     rgba(59,130,246,0.15);
    --info-fg:     #60a5fa;

    --sidebar-bg-from: #0d0c1f;
    --sidebar-bg-via:  #1a1633;
    --sidebar-bg-to:   #2d1f4d;
    --sidebar-text:    rgba(255,255,255,0.65);
    --sidebar-active:  rgba(139,92,246,0.18);
    --sidebar-hover:   rgba(255,255,255,0.05);
    --sidebar-divider: rgba(255,255,255,0.06);

    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4);
    --shadow:    0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.5);
    --shadow-lg: 0 10px 20px -4px rgba(0,0,0,0.6);
    --shadow-xl: 0 20px 30px -8px rgba(0,0,0,0.7);
    --shadow-brand: 0 8px 24px -8px rgba(124,58,237,0.6);

    color-scheme: dark;
}

/* ── Base reset / globals ───────────────────────────────── */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--t), color var(--t);
}

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-soft); }

[x-cloak] { display: none !important; }

/* Selection */
::selection { background: var(--brand-200); color: var(--brand-900); }
.dark ::selection { background: rgba(139,92,246,0.4); color: #fff; }

/* Animations */
@keyframes fadeIn   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes pulse    { 50% { opacity: 0.5; } }
@keyframes ping     { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes bounce   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.fade-in { animation: fadeIn .25s ease both; }