/* =================================================================
   DESIGN TOKENS — Centralized CSS custom properties
   All colors, shadows, radii, transitions are defined here.
   Pages and components reference these variables only.
   ================================================================= */

:root {
    /* ── Colors: Brand ── */
    --color-brand-50: #EFF6FF;
    --color-brand-100: #DBEAFE;
    --color-brand-200: #BFDBFE;
    --color-brand-300: #93C5FD;
    --color-brand-400: #60A5FA;
    --color-brand-500: #3B82F6;
    --color-brand-600: #2563EB;
    --color-brand-700: #1D4ED8;
    --color-brand-800: #1E40AF;
    --color-brand-900: #1E3A8A;

    /* ── Colors: Neutral ── */
    --color-gray-50: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;

    /* ── Colors: Semantic ── */
    --color-success-50: #ECFDF5;
    --color-success-100: #D1FAE5;
    --color-success-200: #A7F3D0;
    --color-success-300: #6EE7B7;
    --color-success-400: #34D399;
    --color-success-500: #10B981;
    --color-success-600: #059669;
    --color-success-700: #047857;
    --color-success-800: #065F46;
    --color-success-900: #064E3B;

    --color-warning-50: #FFFBEB;
    --color-warning-100: #FEF3C7;
    --color-warning-200: #FDE68A;
    --color-warning-300: #FCD34D;
    --color-warning-400: #FBBF24;
    --color-warning-500: #F59E0B;
    --color-warning-600: #D97706;
    --color-warning-700: #B45309;
    --color-warning-800: #92400E;
    --color-warning-900: #78350F;

    --color-orange-50: #FFF7ED;
    --color-orange-100: #FFEDD5;
    --color-orange-400: #F97316;
    --color-orange-500: #F97316;
    --color-orange-600: #EA580C;
    --color-orange-700: #C2410C;

    --color-danger-50: #FEF2F2;
    --color-danger-100: #FEE2E2;
    --color-danger-200: #FECACA;
    --color-danger-300: #FCA5A5;
    --color-danger-400: #F87171;
    --color-danger-500: #EF4444;
    --color-danger-600: #DC2626;
    --color-danger-700: #B91C1C;
    --color-danger-800: #991B1B;
    --color-danger-900: #7F1D1D;

    /* ── Aliases (backward-compatible) ── */
    --primary: var(--color-gray-800);
    --primary-hover: var(--color-gray-900);
    --secondary: var(--color-gray-700);
    --accent: var(--color-brand-600);
    --accent-hover: var(--color-brand-700);
    --accent-light: var(--color-brand-50);
    --bg-gradient-start: var(--color-gray-50);
    --bg-gradient-end: var(--color-brand-50);
    --surface: #FFFFFF;
    --text: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-muted: var(--color-gray-400);
    --border: var(--color-gray-200);
    --border-light: var(--color-gray-100);
    --success: var(--color-success-500);
    --success-light: var(--color-success-50);
    --warning: var(--color-warning-500);
    --warning-light: var(--color-warning-50);
    --orange: var(--color-orange-500);
    --orange-light: var(--color-orange-50);
    --danger: var(--color-danger-500);
    --danger-light: var(--color-danger-50);

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.15);

    /* ── Radii ── */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* ── Transitions ── */
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Glass effect ── */
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(241, 245, 249, 0.8);

    /* ── Z-index scale ── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-popup: 9999;
}

/* Browsers that support backdrop-filter get the true glass-morphism effect */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    :root {
        --glass-bg: rgba(255, 255, 255, 0.75);
        --glass-border: rgba(255, 255, 255, 0.3);
    }
}

/* =================================================================
   DARK MODE — Activated by data-theme="dark" on <html>
   ================================================================= */
[data-theme="dark"] {
    --color-gray-50: #1E293B;
    --color-gray-100: #1E293B;
    --color-gray-200: #334155;
    --color-gray-300: #475569;

    --primary: var(--color-gray-100);
    --primary-hover: var(--color-gray-50);
    --secondary: var(--color-gray-300);
    --accent-light: rgba(37, 99, 235, 0.15);
    --bg-gradient-start: #0F172A;
    --bg-gradient-end: #1E1B2E;
    --surface: #1E293B;
    --text: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --border: #334155;
    --border-light: #1E293B;
    --success-light: rgba(16, 185, 129, 0.15);
    --warning-light: rgba(245, 158, 11, 0.15);
    --orange-light: rgba(249, 115, 22, 0.15);
    --danger-light: rgba(239, 68, 68, 0.15);

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -2px rgba(0,0,0,0.2);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.4), 0 10px 10px -5px rgba(0,0,0,0.2);
    --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.5);

    --glass-bg: rgba(30, 41, 59, 0.85);
    --glass-border: rgba(51, 65, 85, 0.6);
}