/* ============================================
   DESIGN SYSTEM TOKENS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --font-main:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

    /* Surface Palette */
    --bg-body:          #e8eaf4;
    --bg-surface:       #ffffff;
    --bg-surface-2:     #f4f6fc;
    --bg-surface-3:     #eaecf5;
    --bg-elevated:      #ffffff;
    --bg-sunken:        #e2e5f0;
    --bg-input:         #f3f5fb;
    --bg-modal:         #ffffff;
    --bg-code:          #eef0f8;
    --bg-dot-pattern:   radial-gradient(circle, #c4c8dc 1px, transparent 1px);

    /* Sidebar */
    --sidebar-bg:       #0b0e1c;
    --sidebar-bg-end:   #141832;
    --sidebar-hover:    rgba(255,255,255,0.05);
    --sidebar-active:   rgba(99,132,255,0.12);
    --sidebar-text:     rgba(255,255,255,0.45);
    --sidebar-text-h:   rgba(255,255,255,0.85);
    --sidebar-text-a:   #ffffff;
    --sidebar-section:  rgba(255,255,255,0.2);
    --sidebar-divider:  rgba(255,255,255,0.05);

    /* Text */
    --text-primary:     #0a0f1e;
    --text-secondary:   #5c6785;
    --text-muted:       #8b95ad;
    --text-inverse:     #ffffff;

    /* Borders */
    --border:           rgba(15,23,42,0.08);
    --border-strong:    rgba(15,23,42,0.14);
    --border-subtle:    rgba(15,23,42,0.04);
    --border-input:     rgba(15,23,42,0.12);
    --border-focus:     #6384ff;

    /* Accent */
    --accent:           #6366f1;
    --accent-hover:     #4f46e5;
    --accent-soft:      rgba(99,102,241,0.06);
    --accent-glow:      rgba(99,102,241,0.18);
    --accent-gradient:  linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
    --accent-gradient-h:linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);

    /* Semantic Colors */
    --success:          #10b981;
    --success-bg:       rgba(16,185,129,0.08);
    --success-border:   rgba(16,185,129,0.2);
    --success-text:     #047857;

    --danger:           #ef4444;
    --danger-bg:        rgba(239,68,68,0.08);
    --danger-border:    rgba(239,68,68,0.2);
    --danger-text:      #b91c1c;

    --warning:          #f59e0b;
    --warning-bg:       rgba(245,158,11,0.08);
    --warning-border:   rgba(245,158,11,0.2);
    --warning-text:     #92400e;

    --info:             #3b82f6;
    --info-bg:          rgba(59,130,246,0.08);
    --info-border:      rgba(59,130,246,0.2);
    --info-text:        #1d4ed8;

    /* Shadows */
    --shadow-xs:        0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:        0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:        0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
    --shadow-lg:        0 12px 36px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);
    --shadow-xl:        0 24px 64px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.07);
    --shadow-glow:      0 0 0 3px var(--accent-glow);
    --shadow-card:      0 2px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
    --shadow-card-h:    0 12px 40px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06);
    --shadow-float:     0 20px 56px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);

    /* Radii */
    --radius-xs:        4px;
    --radius-sm:        6px;
    --radius-md:        10px;
    --radius-lg:        16px;
    --radius-xl:        24px;
    --radius-full:      9999px;

    /* Timing */
    --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:         150ms;
    --dur-base:         250ms;
    --dur-slow:         400ms;

    /* Layout */
    --sidebar-width:    268px;
    --header-height:    64px;

    /* Table */
    --table-hover:      rgba(99,102,241,0.03);
    --table-stripe:     rgba(0,0,0,0.015);

    /* Scrollbar */
    --scrollbar-thumb:  rgba(0,0,0,0.12);
    --scrollbar-track:  transparent;
}

/* ---- DARK THEME ---- */
[data-theme="dark"] {
    --bg-body:          #070814;
    --bg-surface:       #0f1120;
    --bg-surface-2:     #151828;
    --bg-surface-3:     #1a1d30;
    --bg-elevated:      #181b2d;
    --bg-sunken:        #090b17;
    --bg-input:         #131625;
    --bg-modal:         #111322;
    --bg-code:          #151828;
    --bg-dot-pattern:   radial-gradient(circle, rgba(99,102,241,0.06) 1px, transparent 1px);

    --sidebar-bg:       #060810;
    --sidebar-bg-end:   #0c0e1a;
    --sidebar-hover:    rgba(255,255,255,0.04);
    --sidebar-active:   rgba(99,102,241,0.15);
    --sidebar-text:     rgba(255,255,255,0.35);
    --sidebar-text-h:   rgba(255,255,255,0.7);
    --sidebar-text-a:   #ffffff;
    --sidebar-section:  rgba(255,255,255,0.15);
    --sidebar-divider:  rgba(255,255,255,0.04);

    --text-primary:     #e0e4ef;
    --text-secondary:   #9299b3;
    --text-muted:       #6b7491;

    --border:           rgba(255,255,255,0.06);
    --border-strong:    rgba(255,255,255,0.1);
    --border-subtle:    rgba(255,255,255,0.03);
    --border-input:     rgba(255,255,255,0.08);

    --accent:           #818cf8;
    --accent-hover:     #a5b4fc;
    --accent-soft:      rgba(129,140,248,0.08);
    --accent-glow:      rgba(129,140,248,0.15);
    --accent-gradient:  linear-gradient(135deg, #6366f1 0%, #a78bfa 50%, #c4b5fd 100%);

    --success:          #34d399;
    --success-bg:       rgba(52,211,153,0.1);
    --success-border:   rgba(52,211,153,0.2);
    --success-text:     #34d399;

    --danger:           #fb7185;
    --danger-bg:        rgba(251,113,133,0.1);
    --danger-border:    rgba(251,113,133,0.2);
    --danger-text:      #fb7185;

    --warning:          #fbbf24;
    --warning-bg:       rgba(251,191,36,0.1);
    --warning-border:   rgba(251,191,36,0.2);
    --warning-text:     #fbbf24;

    --info:             #60a5fa;
    --info-bg:          rgba(96,165,250,0.1);
    --info-border:      rgba(96,165,250,0.2);
    --info-text:        #60a5fa;

    --shadow-xs:        0 1px 3px rgba(0,0,0,0.4);
    --shadow-sm:        0 2px 6px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:        0 4px 16px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
    --shadow-lg:        0 12px 36px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.3);
    --shadow-xl:        0 24px 64px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.4);
    --shadow-card:      0 2px 12px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.2);
    --shadow-card-h:    0 12px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
    --shadow-float:     0 20px 56px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.3);

    --table-hover:      rgba(129,140,248,0.04);
    --table-stripe:     rgba(255,255,255,0.015);
    --scrollbar-thumb:  rgba(255,255,255,0.1);

    /* Bootstrap CSS variable overrides for dark mode */
    --bs-body-color:          #e0e4ef;
    --bs-body-bg:             #0f1120;
    --bs-secondary-color:     #9299b3;
    --bs-secondary-bg:        #151828;
    --bs-tertiary-color:      #6b7491;
    --bs-tertiary-bg:         #1a1d30;
    --bs-border-color:        rgba(255,255,255,0.06);
    --bs-border-color-translucent: rgba(255,255,255,0.06);
    --bs-table-color:         #e0e4ef;
    --bs-table-bg:            transparent;
    --bs-table-border-color:  rgba(255,255,255,0.03);
    color-scheme: dark;
}