/* ============================================================================
   LexPro — Design Tokens
   Premium SaaS design system: colors, spacing, radii, shadows, typography.
   ========================================================================= */

:root {
    /* ---- Brand ---- */
    --color-primary: #1E40AF;
    --color-primary-rgb: 30, 64, 175;
    --color-primary-light: #3B5FD9;
    --color-primary-dark: #152F82;
    --color-secondary: #2563EB;
    --color-accent: #0EA5E9;

    /* ---- Semantic ---- */
    --color-primary-bg: #EFF4FF;
    --color-success: #16A34A;
    --color-success-bg: #ECFDF3;
    --color-danger: #DC2626;
    --color-danger-bg: #FEF2F2;
    --color-warning: #F59E0B;
    --color-warning-bg: #FFFBEB;
    --color-info: #0EA5E9;
    --color-info-bg: #F0F9FF;

    /* ---- Neutrals / Surface ---- */
    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F1F5F9;
    --color-text: #111827;
    --color-text-muted: #6B7280;
    --color-text-subtle: #9CA3AF;
    --color-border: #E5E7EB;
    --color-border-strong: #D1D5DB;

    /* ---- Gradient accents ---- */
    --gradient-brand: linear-gradient(135deg, #1E40AF 0%, #0EA5E9 100%);
    --gradient-surface: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(248,250,252,.9) 100%);

    /* ---- Typography ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Lexend', var(--font-sans);
    --fs-xs: .75rem;
    --fs-sm: .8125rem;
    --fs-base: .9375rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.875rem;
    --fs-3xl: 2.5rem;

    /* ---- Radii ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ---- Shadows ----
       Premium flat surfaces: elevation is carried by borders, not shadows.
       These stay defined (so nothing breaks) but resolve to none/near-none. */
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: 0 0 0 3px rgba(30, 64, 175, .14);

    /* ---- Premium borders ---- */
    --border-lex: 1.5px solid var(--color-border);
    --border-lex-strong: 1.5px solid var(--color-border-strong);

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 400ms;

    /* ---- Layout ---- */
    --sidebar-width: 264px;
    --sidebar-width-collapsed: 84px;
    --topbar-height: 72px;
    --content-max: 1600px;

    /* ---- Glass ---- */
    --glass-bg: rgba(255, 255, 255, .72);
    --glass-border: rgba(255, 255, 255, .5);
    --glass-blur: 20px;

    /* ---- Sidebar (always dark — premium admin-shell look, independent of theme) ---- */
    --sidebar-bg: #0B1220;
    --sidebar-bg-elevated: #111A2E;
    --sidebar-surface-hover: rgba(255, 255, 255, .06);
    --sidebar-active-bg: rgba(59, 130, 246, .16);
    --sidebar-border: rgba(255, 255, 255, .08);
    --sidebar-text: #94A3B8;
    --sidebar-text-active: #FFFFFF;
    --sidebar-text-muted: #5B6B87;
    --sidebar-accent: #3B82F6;
    --sidebar-accent-glow: rgba(59, 130, 246, .35);
}

/* ============================================================================
   Dark Mode
   ========================================================================= */
:root[data-theme="dark"] {
    --color-bg: #0B1220;
    --color-surface: #131B2C;
    --color-surface-alt: #1A2438;
    --color-text: #F1F5F9;
    --color-text-muted: #94A3B8;
    --color-text-subtle: #64748B;
    --color-border: #24304A;
    --color-border-strong: #2E3B58;

    --color-primary-bg: rgba(59, 130, 246, .14);
    --color-success-bg: rgba(22, 163, 74, .12);
    --color-danger-bg: rgba(220, 38, 38, .12);
    --color-warning-bg: rgba(245, 158, 11, .12);
    --color-info-bg: rgba(14, 165, 233, .12);

    --gradient-surface: linear-gradient(180deg, rgba(19,27,44,.9) 0%, rgba(11,18,32,.9) 100%);
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: 0 0 0 3px rgba(59, 130, 246, .22);

    --glass-bg: rgba(19, 27, 44, .72);
    --glass-border: rgba(255, 255, 255, .08);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #0B1220;
        --color-surface: #131B2C;
        --color-surface-alt: #1A2438;
        --color-text: #F1F5F9;
        --color-text-muted: #94A3B8;
        --color-text-subtle: #64748B;
        --color-border: #24304A;
        --color-border-strong: #2E3B58;
        --color-primary-bg: rgba(59, 130, 246, .14);
        --color-success-bg: rgba(22, 163, 74, .12);
        --color-danger-bg: rgba(220, 38, 38, .12);
        --color-warning-bg: rgba(245, 158, 11, .12);
        --color-info-bg: rgba(14, 165, 233, .12);
        --glass-bg: rgba(19, 27, 44, .72);
        --glass-border: rgba(255, 255, 255, .08);
    }
}