/* ========================================
   VARIABLES CSS - Design Tokens Talaria
   ======================================== */

:root {
    /* Couleurs principales */
    --color-primary: #4E203D;
    --color-primary-light: #6B3A5E;
    --color-primary-dark: #3A1830;
    --color-primary-rgb: 78, 32, 61;

    /* Couleurs de fond */
    --color-bg: #FDFAF1;
    --color-bg-light: #FFF8F4;
    --color-bg-card: #FFFFFF;
    --color-bg-stores: #4E203D;
    --color-cta-bg: #EFD9CA;
    --color-cta-text: #4E203D;

    /* Couleurs texte */
    --color-text: #2D2D2D;
    --color-text-light: #6F6F6F;
    --color-text-muted: #9B9B9B;
    --color-text-white: #FFFFFF;
    --color-text-primary: #4F203F;

    /* Couleurs d'accent */
    --color-accent-red: #E2001A;
    --color-accent-airbnb: #FF5A5F;
    --color-accent-green: #34A853;

    /* Bordures */
    --color-border: #E8DDD5;
    --color-border-light: #F0E8E2;

    /* Typographie */
    --font-heading: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-handwritten: 'Covered By Your Grace', cursive;

    /* Tailles de police */
    --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;
    --text-4xl: 2.5rem;
    --text-5xl: 2.9375rem;

    /* Espacements */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-2xl: 30px;
    --radius-full: 9999px;

    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(74, 32, 64, 0.08);
    --shadow-md: 0 4px 12px rgba(74, 32, 64, 0.1);
    --shadow-lg: 0 8px 30px rgba(74, 32, 64, 0.12);
    --shadow-xl: 0 16px 50px rgba(74, 32, 64, 0.15);
    --shadow-notification: 0px 1px 1px -0.5px rgba(0, 0, 0, 0.03), 0px 3px 3px -1.5px rgba(0, 0, 0, 0.03), 0px 6px 6px -3px rgba(0, 0, 0, 0.03), 0px 32px 32px -16px rgba(0, 0, 0, 0.03), 0px 56px 56px -28px rgba(0, 0, 0, 0.03), inset 0px -1px 4px 4px rgba(0, 0, 0, 0.02);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Z-index */
    --z-base: 1;
    --z-dropdown: 10;
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;

    /* Largeurs */
    --max-width: 1200px;
    --header-height: 72px;
}

/* ========================================
   DARK MODE COLORS
   ======================================== */
[data-theme="dark"] {
    --color-bg: #1a0f16;
    /* Deep dark purple/blackberry base */
    --color-bg-light: #25171f;
    --color-bg-card: #2d1c26;
    --color-bg-stores: #2d1c26;
    --color-cta-bg: #ff85c0;
    --color-cta-text: #1a0f16;

    --color-text: #f0e8e2;
    --color-text-light: #c8b9c2;
    --color-text-muted: #8d7a85;
    --color-text-white: #ffffff;
    --color-text-primary: #ff85c0;
    /* Softer pink for dark mode */

    --color-primary: #ff85c0;
    --color-primary-light: #ffa8d6;
    --color-primary-dark: #cc5a8e;
    --color-primary-rgb: 255, 133, 192;

    --color-border: #3d2a35;
    --color-border-light: #4a3441;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.6);
}