/* ============================================
   W3 Dashboard - Design Tokens
   "W3 Clarity" - Professional Fintech Design System
   ============================================ */

:root {
    /* ---- Surfaces ---- */
    --bg-page:          #F8F9FB;
    --bg-surface:       #FFFFFF;
    --bg-surface-alt:   #F1F3F6;
    --bg-sidebar:       #1B2336;
    --bg-sidebar-hover: #232E45;
    --bg-sidebar-active: rgba(59, 130, 246, 0.12);

    /* ---- Borders ---- */
    --border-primary:   #E2E6ED;
    --border-secondary: #EEF0F4;
    --border-focus:     #3B82F6;

    /* ---- Typography Colors ---- */
    --text-primary:     #111827;
    --text-secondary:   #6B7280;
    --text-tertiary:    #9CA3AF;
    --text-on-dark:     #F3F4F6;
    --text-on-dark-dim: #8896B3;

    /* ---- Brand / Accent ---- */
    --accent-primary:       #2563EB;
    --accent-primary-hover: #1D4ED8;
    --accent-primary-light: #EFF6FF;
    --accent-secondary:     #7C3AED;

    /* ---- Semantic Colors ---- */
    --success:        #059669;
    --success-bg:     #ECFDF5;
    --success-border: #A7F3D0;
    --warning:        #D97706;
    --warning-bg:     #FFFBEB;
    --warning-border: #FDE68A;
    --error:          #DC2626;
    --error-bg:       #FEF2F2;
    --error-border:   #FECACA;
    --info:           #2563EB;
    --info-bg:        #EFF6FF;
    --info-border:    #BFDBFE;

    /* ---- Spacing (8px base) ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ---- Border Radius ---- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ---- Shadows ---- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);

    /* ---- Typography ---- */
    --font-sans: 'Inter', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ---- Font Sizes ---- */
    --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:  2rem;
}

/* ============================================
   Dark Mode Override
   ============================================ */
[data-theme="dark"] {
    --bg-page:          #0F1219;
    --bg-surface:       #1A1F2E;
    --bg-surface-alt:   #141824;
    --bg-sidebar:       #0B0F18;
    --bg-sidebar-hover: #151B28;
    --border-primary:   #2A3142;
    --border-secondary: #1F2637;
    --text-primary:     #E5E7EB;
    --text-secondary:   #9CA3AF;
    --text-tertiary:    #6B7280;
    --accent-primary-light: rgba(37, 99, 235, 0.15);
    --success-bg:    rgba(5, 150, 105, 0.15);
    --success-border: rgba(5, 150, 105, 0.3);
    --warning-bg:    rgba(217, 119, 6, 0.15);
    --warning-border: rgba(217, 119, 6, 0.3);
    --error-bg:      rgba(220, 38, 38, 0.15);
    --error-border:  rgba(220, 38, 38, 0.3);
    --info-bg:       rgba(37, 99, 235, 0.15);
    --info-border:   rgba(37, 99, 235, 0.3);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
}