/* ── Design Tokens ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Brand */
    --color-accent:          #6D28D9;
    --color-accent-hover:    #5B21B6;
    --color-accent-light:    #F3ECFD;
    --color-accent-soft:     #EDE4FB;

    /* Semantic */
    --color-success:         #15803D;
    --color-success-light:   #DCFCE7;
    --color-warning:         #B45309;
    --color-warning-light:   #FEF3C7;
    --color-danger:          #DC2626;
    --color-danger-light:    #FEE2E2;
    --color-info:            #0369A1;
    --color-info-light:      #E0F2FE;

    /* Neutral (light theme) */
    --color-bg:              #F7F7FB;
    --color-surface:         #FFFFFF;
    --color-surface-2:       #F1F1F8;
    --color-border:          #E4E4EF;
    --color-border-strong:   #CBCBDE;
    --color-text:            #17162B;
    --color-text-muted:      #5F5E76;
    --color-text-subtle:     #9695AC;

    /* Sidebar — a neutral near-black (same cool-dark family as the dark-mode surface tokens
       below) rather than a purple-tinted one, so it reads as one coherent dark palette instead
       of two different-hued dark panels sitting next to each other. The accent color still shows
       up in the active-item border stripe and text/icon color, just not as a background wash. */
    --color-sidebar-bg:      #111218;
    --color-sidebar-surface: #1A1B22;
    --color-sidebar-text:    #B9AFD6;
    --color-sidebar-active:  #FFFFFF;
    --color-sidebar-active-bg: rgba(139,92,246,0.14);
    --color-sidebar-border:  rgba(255,255,255,0.07);

    /* Focus ring (accessibility — visible on every interactive element) */
    --focus-ring: 0 0 0 3px rgba(109,40,217,0.35);
    --focus-ring-offset: 2px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace;

    --text-xs:  0.75rem;
    --text-sm:  0.8125rem;
    --text-base: 0.9375rem;
    --text-lg:  1.0625rem;
    --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: 6px;
    --radius-md: 9px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(23,22,43,0.05);
    --shadow-md: 0 4px 10px rgba(23,22,43,0.06), 0 1px 3px rgba(23,22,43,0.05);
    --shadow-lg: 0 16px 32px rgba(23,22,43,0.10), 0 4px 8px rgba(23,22,43,0.05);

    --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);

    --sidebar-width: 252px;
    --header-height: 60px;
    --content-max-width: 1200px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg:            #0B0C10;
        --color-surface:       #15161C;
        --color-surface-2:     #1D1E26;
        --color-border:        #2A2B35;
        --color-border-strong: #3D3E4A;
        --color-text:          #EDEDF2;
        --color-text-muted:    #A0A0B0;
        --color-text-subtle:   #6E6E80;
        --color-accent-light:  rgba(139,92,246,0.16);
        --color-accent-soft:   rgba(139,92,246,0.22);
        --focus-ring: 0 0 0 3px rgba(167,139,250,0.45);
    }
}

:root[data-theme="light"] {
    --color-bg: #F7F7FB; --color-surface: #FFFFFF; --color-surface-2: #F1F1F8;
    --color-border: #E4E4EF; --color-text: #17162B; --color-text-muted: #5F5E76;
    --color-accent-light: #F3ECFD; --color-accent-soft: #EDE4FB;
    --focus-ring: 0 0 0 3px rgba(109,40,217,0.35);
}

:root[data-theme="dark"] {
    --color-bg: #0B0C10; --color-surface: #15161C; --color-surface-2: #1D1E26;
    --color-border: #2A2B35; --color-text: #EDEDF2; --color-text-muted: #A0A0B0;
    --color-accent-light: rgba(139,92,246,0.16); --color-accent-soft: rgba(139,92,246,0.22);
    --focus-ring: 0 0 0 3px rgba(167,139,250,0.45);
}

/* ── Base & Accessibility ───────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--font-sans); }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}