/* ============================================================================
   DESIGN SYSTEM - SpendIA
   Design cohérent, moderne et responsive pour toute l'application
   ============================================================================ */

/* ============================================================================
   TOKENS DE DESIGN - Fondations
   ============================================================================ */

:root {
    /* Typographie */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

    /* Échelle typographique harmonisée */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-md: 1.125rem;     /* 18px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-2xl: 2rem;        /* 32px */
    --font-size-3xl: 2.5rem;      /* 40px */
    --font-size-4xl: 3rem;        /* 48px */

    /* Poids de police */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Hauteur de ligne */
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;

    /* Espacement - Échelle harmonisée (multiple de 4px/8px) */
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */

    /* Arrondis - Cohérents */
    --radius-none: 0;
    --radius-sm: 0.5rem;    /* 8px */
    --radius: 0.75rem;      /* 12px */
    --radius-md: 1rem;      /* 16px */
    --radius-lg: 1.25rem;   /* 20px */
    --radius-xl: 1.5rem;    /* 24px */
    --radius-2xl: 2rem;     /* 32px */
    --radius-full: 9999px;

    /* Transitions - Timing functions cohérentes */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Ombres - Échelle cohérente */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 12px -2px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.15), 0 6px 10px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Z-index - Échelle cohérente */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;
}

/* ============================================================================
   COULEURS - Thème clair (Finance Premium & Trust)
   ============================================================================ */

:root,
[data-theme="light"] {
    /* Surfaces - Tons Slate froids et professionnels */
    --bg: #F8FAFC;                          /* Slate 50 - Fond principal */
    --surface-1: #FFFFFF;                   /* Blanc pur - Cartes */
    --surface-2: #F1F5F9;                   /* Slate 100 - Surface secondaire */
    --surface-3: #E2E8F0;                   /* Slate 200 - Surface tertiaire */
    --surface-card: rgba(255, 255, 255, 0.95);
    --surface-muted: #F1F5F9;               /* Slate 100 */
    --surface-hover: #E2E8F0;               /* Slate 200 */

    /* Bordures - Subtiles et élégantes */
    --border-color: rgba(148, 163, 184, 0.2);   /* Slate 400 alpha */
    --border-hover: rgba(148, 163, 184, 0.35);
    --border-strong: rgba(148, 163, 184, 0.5);

    /* Texte - Bleu nuit professionnel */
    --text-primary: #0F172A;                /* Slate 900 - Bleu nuit profond */
    --text-secondary: #475569;              /* Slate 600 */
    --text-tertiary: #64748B;               /* Slate 500 */
    --text-muted: #94A3B8;                  /* Slate 400 */
    --text-disabled: #CBD5E1;               /* Slate 300 */
    --text-inverse: #FFFFFF;
    --text-on-accent: #FFFFFF;

    /* Couleurs d'accent - Bleu institutionnel */
    --accent-primary: #0F172A;              /* Bleu nuit institutionnel */
    --accent-primary-hover: #1E293B;        /* Slate 800 */
    --accent-primary-light: rgba(15, 23, 42, 0.08);
    --accent-primary-alpha: rgba(15, 23, 42, 0.12);

    --accent-secondary: #2563EB;            /* Bleu royal - CTA */
    --accent-secondary-hover: #1D4ED8;      /* Blue 700 */
    --accent-secondary-light: rgba(37, 99, 235, 0.1);

    --accent-tertiary: #3B82F6;             /* Blue 500 */

    /* États */
    --danger: #DC2626;                      /* Red 600 */
    --danger-hover: #B91C1C;                /* Red 700 */
    --danger-light: rgba(220, 38, 38, 0.1);

    --success: #059669;                     /* Vert émeraude - Emerald 600 */
    --success-hover: #047857;               /* Emerald 700 */
    --success-light: rgba(5, 150, 105, 0.1);

    --warning: #D97706;                     /* Amber 600 */
    --warning-hover: #B45309;               /* Amber 700 */
    --warning-light: rgba(217, 119, 6, 0.1);

    --info: #2563EB;                        /* Blue 600 */
    --info-hover: #1D4ED8;                  /* Blue 700 */
    --info-light: rgba(37, 99, 235, 0.1);

    /* Éléments UI */
    --input-bg: #FFFFFF;
    --input-border: var(--border-color);
    --input-focus: var(--accent-secondary);

    /* Glass effect - Plus subtil et professionnel */
    --glass: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(148, 163, 184, 0.15);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.2);

    /* Effets */
    --blur-sm: 8px;
    --blur: 16px;
    --blur-md: 24px;
    --blur-lg: 32px;
    --blur-amount: 24px;
    --saturate-amount: 120%;

    --glow: 0 0 20px rgba(37, 99, 235, 0.15);

    /* Couleurs supplémentaires */
    --text-interactive: var(--text-on-accent);
    --danger-bg: var(--danger-light);
    --success-bg: var(--success-light);
    --snackbar-bg: var(--surface-card);
    --snackbar-text: var(--text-primary);
}

/* ============================================================================
   COULEURS - Thème sombre (Finance Premium & Trust)
   ============================================================================ */

[data-theme="dark"] {
    /* Surfaces - Bleu minuit profond et élégant */
    --bg: #020617;                          /* Slate 950 - Bleu minuit très sombre */
    --surface-1: #0F172A;                   /* Slate 900 - Bleu nuit */
    --surface-2: #1E293B;                   /* Slate 800 */
    --surface-3: #334155;                   /* Slate 700 */
    --surface-card: rgba(15, 23, 42, 0.9);  /* Bleu nuit transparent */
    --surface-muted: #1E293B;               /* Slate 800 */
    --surface-hover: #334155;               /* Slate 700 */

    /* Bordures - Subtiles et lumineuses */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.2);

    /* Texte - Blanc froid et lisible */
    --text-primary: #F8FAFC;                /* Slate 50 - Blanc froid */
    --text-secondary: #94A3B8;              /* Slate 400 - Gris bleuté */
    --text-tertiary: #64748B;               /* Slate 500 */
    --text-muted: #475569;                  /* Slate 600 */
    --text-disabled: #334155;               /* Slate 700 */
    --text-inverse: #020617;                /* Slate 950 */
    --text-on-accent: #020617;              /* Texte sombre sur accent clair */

    /* Couleurs d'accent - Vert émeraude/menthe (croissance & IA) */
    --accent-primary: #34D399;              /* Emerald 400 - Vert menthe lumineux */
    --accent-primary-hover: #10B981;        /* Emerald 500 */
    --accent-primary-light: rgba(52, 211, 153, 0.12);
    --accent-primary-alpha: rgba(52, 211, 153, 0.15);

    --accent-secondary: #60A5FA;            /* Blue 400 - Bleu clair */
    --accent-secondary-hover: #3B82F6;      /* Blue 500 */
    --accent-secondary-light: rgba(96, 165, 250, 0.12);

    --accent-tertiary: #38BDF8;             /* Sky 400 - Bleu ciel */

    /* États */
    --danger: #F87171;                      /* Red 400 */
    --danger-hover: #EF4444;                /* Red 500 */
    --danger-light: rgba(248, 113, 113, 0.15);

    --success: #34D399;                     /* Emerald 400 */
    --success-hover: #10B981;               /* Emerald 500 */
    --success-light: rgba(52, 211, 153, 0.15);

    --warning: #FBBF24;                     /* Amber 400 */
    --warning-hover: #F59E0B;               /* Amber 500 */
    --warning-light: rgba(251, 191, 36, 0.15);

    --info: #60A5FA;                        /* Blue 400 */
    --info-hover: #3B82F6;                  /* Blue 500 */
    --info-light: rgba(96, 165, 250, 0.15);

    /* Éléments UI */
    --input-bg: rgba(15, 23, 42, 0.6);
    --input-border: var(--border-color);
    --input-focus: var(--accent-primary);

    /* Glass effect - Élégant et subtil */
    --glass: rgba(15, 23, 42, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(52, 211, 153, 0.25);

    /* Effets - Lueur verte subtile */
    --glow: 0 0 20px rgba(52, 211, 153, 0.15);

    /* Ombres plus prononcées en mode sombre */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 20px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.8);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.9);

    /* Couleurs supplémentaires */
    --text-interactive: var(--text-on-accent);
    --danger-bg: var(--danger-light);
    --success-bg: var(--success-light);
    --snackbar-bg: rgba(15, 23, 42, 0.95);
    --snackbar-text: var(--text-primary);
}