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

:root {
    /* ── Color Palette — Dark Mode Defaults ── */
    --bg-primary:    #080910;
    --bg-deep:       #050507;
    --bg-secondary:  rgba(18, 19, 28, 0.65);
    --bg-tertiary:   rgba(28, 30, 44, 0.85);
    --bg-surface:    rgba(24, 26, 38, 0.9);

    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;

    /* Brand Purple */
    --primary:       #7c6ff7;
    --primary-glow:  rgba(124, 111, 247, 0.45);
    --primary-light: #9d93fa;
    --primary-dark:  #5a4fd6;
    --primary-subtle:rgba(124, 111, 247, 0.12);

    /* Accent Colors */
    --accent-emerald:      #00d4a4;
    --accent-emerald-glow: rgba(0, 212, 164, 0.35);
    --accent-emerald-subtle: rgba(0, 212, 164, 0.1);
    --accent-gold:         #fdd870;
    --accent-gold-glow:    rgba(253, 216, 112, 0.35);
    --accent-gold-subtle:  rgba(253, 216, 112, 0.1);
    --accent-coral:        #ff7675;
    --accent-coral-glow:   rgba(255, 118, 117, 0.35);
    --accent-coral-subtle: rgba(255, 118, 117, 0.1);
    --accent-rose:         #fd79a8;
    --accent-rose-glow:    rgba(253, 121, 168, 0.35);
    --accent-cyan:         #00cec9;
    --accent-cyan-glow:    rgba(0, 206, 201, 0.35);
    --accent-cyan-subtle:  rgba(0, 206, 201, 0.1);

    /* Utility States */
    --success: #00d4a4;
    --warning: #fdd870;
    --danger:  #ff5252;
    --info:    #74b9ff;

    /* ── Glassmorphism ── */
    --glass-bg:           rgba(18, 19, 30, 0.55);
    --glass-border:       rgba(255, 255, 255, 0.07);
    --glass-border-hover: rgba(255, 255, 255, 0.13);
    --glass-border-focus: rgba(124, 111, 247, 0.5);
    --glass-shadow:       0 8px 32px 0 rgba(0, 0, 0, 0.45);
    --glass-highlight:    rgba(255, 255, 255, 0.035);
    --glass-highlight-md: rgba(255, 255, 255, 0.06);

    /* ── Elevation Shadows ── */
    --shadow-xs: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-lg: 0 16px 40px rgba(0,0,0,0.6);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.7);

    /* ── Border Glow Accents ── */
    --border-glow-primary: 0 0 0 1px rgba(124,111,247,0.5), 0 0 16px rgba(124,111,247,0.2);
    --border-glow-emerald: 0 0 0 1px rgba(0,212,164,0.5),  0 0 16px rgba(0,212,164,0.2);
    --border-glow-gold:    0 0 0 1px rgba(253,216,112,0.5), 0 0 16px rgba(253,216,112,0.2);
    --border-glow-coral:   0 0 0 1px rgba(255,118,117,0.5), 0 0 16px rgba(255,118,117,0.2);
    --border-glow-cyan:    0 0 0 1px rgba(0,206,201,0.5),   0 0 16px rgba(0,206,201,0.2);

    /* ── Border Radii ── */
    --border-radius-xs:     4px;
    --border-radius-sm:     8px;
    --border-radius-md:     12px;
    --border-radius-lg:     16px;
    --border-radius-xl:     24px;
    --border-radius-2xl:    32px;
    --border-radius-circle: 50%;

    /* ── Spacing Scale ── */
    --space-xs:  0.25rem;   /* 4px  */
    --space-sm:  0.5rem;    /* 8px  */
    --space-md:  0.75rem;   /* 12px */
    --space-lg:  1rem;      /* 16px */
    --space-xl:  1.5rem;    /* 24px */
    --space-2xl: 2rem;      /* 32px */
    --space-3xl: 3rem;      /* 48px */

    /* ── Animations ── */
    --transition-instant: 0.08s ease;
    --transition-fast:    0.15s ease;
    --transition-normal:  0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:    0.4s  cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce:  0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Typography ── */
    --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* ── Layout Dimensions ── */
    --sidebar-width:           264px;
    --sidebar-collapsed-width: 72px;
    --header-height:           68px;
    --mobile-nav-height:       64px;
    --content-max-width:       1440px;
}

/* ── Light Theme Overrides ── */
[data-theme="light"] {
    --bg-primary:   #f4f6fb;
    --bg-deep:      #e8ecf4;
    --bg-secondary: rgba(255, 255, 255, 0.75);
    --bg-tertiary:  rgba(241, 245, 249, 0.95);
    --bg-surface:   rgba(255, 255, 255, 0.95);

    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;

    --primary:        #6c5ce7;
    --primary-glow:   rgba(108, 92, 231, 0.25);
    --primary-light:  #5849c4;
    --primary-dark:   #8072ef;
    --primary-subtle: rgba(108, 92, 231, 0.08);

    --glass-bg:           rgba(255, 255, 255, 0.75);
    --glass-border:       rgba(0, 0, 0, 0.07);
    --glass-border-hover: rgba(0, 0, 0, 0.12);
    --glass-border-focus: rgba(108, 92, 231, 0.45);
    --glass-shadow:       0 8px 32px 0 rgba(15, 23, 42, 0.1);
    --glass-highlight:    rgba(0, 0, 0, 0.025);
    --glass-highlight-md: rgba(0, 0, 0, 0.05);

    --shadow-xs: 0 1px 3px rgba(15,23,42,0.08);
    --shadow-sm: 0 4px 12px rgba(15,23,42,0.1);
    --shadow-md: 0 8px 24px rgba(15,23,42,0.12);
    --shadow-lg: 0 16px 40px rgba(15,23,42,0.14);
    --shadow-xl: 0 24px 64px rgba(15,23,42,0.16);
}