@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* Brand — violet primary matched to the logo's sampled purple (#5A2CC7 / #45219F), emerald reserved for success/positive states */
    --color-accent:          #5A2CC7;
    --color-accent-hover:    #45219F;
    --color-accent-strong:   #341A7D;
    --color-accent-light:    #F1ECFB;
    --color-accent-rgb:      90, 44, 199;
    --color-on-accent:       #FFFFFF; /* text/icon color for anything sitting on --color-accent (or another saturated brand-toned fill) */

    --color-success:         #10B981;
    --color-success-light:   #D1FAE5;
    --color-warning:         #F59E0B;
    --color-warning-light:   #FEF3C7;
    --color-danger:          #EF4444;
    --color-danger-light:    #FEE2E2;
    --color-info:            #0EA5E9;
    --color-info-light:      #E0F2FE;

    /* Neutral (light theme) — cool, faintly indigo-tinted */
    --color-bg:              #F7F7FC;
    --color-bg-gradient:     radial-gradient(1200px 600px at 100% -10%, #F1ECFB 0%, #F7F7FC 45%);
    --color-surface:         #FFFFFF;
    --color-surface-2:       #F2F2FA;
    --color-border:          #E6E6F0;
    --color-border-strong:   #D3D3E4;
    --color-text:            #171423;
    --color-text-muted:      #57546F;
    --color-text-subtle:     #6F6C87;

    /* Sidebar — frosted glass over a deep indigo gradient */
    --color-sidebar-bg:        linear-gradient(180deg, #1B1836 0%, #120F26 100%);
    --color-sidebar-border:    rgba(255,255,255,0.08);
    --color-sidebar-text:      #B7B4D6;
    --color-sidebar-active:    #FFFFFF;
    --color-sidebar-active-bg: rgba(90,44,199,0.35);
    --color-sidebar-accent:    #C9AEF0;

    /* Glass surfaces */
    --glass-bg:      rgba(255,255,255,0.72);
    --glass-border:  rgba(255,255,255,0.5);
    --glass-blur:    blur(20px);

    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;

    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  22px;
    --radius-full: 9999px;

    --shadow-sm:  0 1px 2px rgba(23,20,35,0.05);
    --shadow-md:  0 6px 20px rgba(23,20,35,0.07), 0 2px 6px rgba(23,20,35,0.05);
    --shadow-lg:  0 20px 44px rgba(23,20,35,0.12), 0 6px 16px rgba(23,20,35,0.06);
    --shadow-glass: 0 8px 32px rgba(31,29,74,0.16);
    --shadow-focus: 0 0 0 3px rgba(var(--color-accent-rgb), 0.35);

    --transition:      160ms cubic-bezier(.4,0,.2,1);
    --transition-slow: 260ms cubic-bezier(.4,0,.2,1);

    --sidebar-width:      264px;
    --header-height:      64px;
    --content-max-width:  1200px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:            #0C0B16;
        --color-bg-gradient:   radial-gradient(1200px 600px at 100% -10%, #1C1A33 0%, #0C0B16 45%);
        --color-surface:       #16142A;
        --color-surface-2:     #1E1B38;
        --color-border:        #2C2948;
        --color-border-strong: #3E3A63;
        --color-text:          #EDECF7;
        --color-text-muted:    #A9A6C4;
        --color-text-subtle:   #8683A3;
        --color-accent-light:  rgba(90,44,199,0.16);
        --glass-bg:             rgba(22,20,42,0.72);
        --glass-border:         rgba(255,255,255,0.08);
    }
}

:root[data-theme="light"] {
    --color-bg: #F7F7FC; --color-bg-gradient: radial-gradient(1200px 600px at 100% -10%, #F1ECFB 0%, #F7F7FC 45%);
    --color-surface: #FFFFFF; --color-surface-2: #F2F2FA;
    --color-border: #E6E6F0; --color-text: #171423; --color-text-muted: #57546F;
    --color-accent-light: #F1ECFB;
    --glass-bg: rgba(255,255,255,0.72); --glass-border: rgba(255,255,255,0.5);
}

:root[data-theme="dark"] {
    --color-bg: #0C0B16; --color-bg-gradient: radial-gradient(1200px 600px at 100% -10%, #1C1A33 0%, #0C0B16 45%);
    --color-surface: #16142A; --color-surface-2: #1E1B38;
    --color-border: #2C2948; --color-text: #EDECF7; --color-text-muted: #A9A6C4;
    --color-accent-light: rgba(90,44,199,0.16);
    --glass-bg: rgba(22,20,42,0.72); --glass-border: rgba(255,255,255,0.08);
}

@media (prefers-reduced-motion: reduce) {
    :root { --transition: 0ms; --transition-slow: 0ms; }
}