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

:root {
    /* ---- Tokens de marque (palette officielle) ---- */
    --color-sable-lune:  #fcf9f1;   /* Sable de lune  — fond principal   */
    --color-parme:       #4E203D;   /* Parme           — couleur primaire */
    --color-sable-dore:  #f0dacb;   /* Sable doré      — CTA / chaleur   */
    --color-orchidee:    #c9b2d7;   /* Orchidée        — accent / dark    */

    /* Texte sur fond --color-primary (Parme sombre en light, Orchidée clair en dark) */
    --color-on-primary: #FFFFFF;

    /* Couleurs principales */
    --color-primary: var(--color-parme);
    --color-primary-light: #6B3A5E;
    --color-primary-dark: #3A1830;
    --color-primary-rgb: 78, 32, 61;

    /* Couleurs de fond */
    --color-bg: var(--color-sable-lune);
    --color-bg-light: #FFF8F4;
    --color-bg-card: #FFFFFF;
    --color-bg-stores: var(--color-parme);
    --color-cta-bg: var(--color-sable-dore);
    --color-cta-text: var(--color-parme);

    /* Couleurs texte */
    --color-text: #2D2D2D;
    --color-text-light: #5C5C5C;
    --color-text-muted: #767676;
    --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: 100;
    --z-header: 1000;
    --z-overlay: 2000;
    --z-modal: 3000;

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

/* ========================================
   DARK MODE COLORS
   ======================================== */
[data-theme="dark"] {
    --color-bg: #1A1418;
    --color-bg-light: #241B21;
    --color-bg-card: #2E222A;
    --color-bg-stores: #2E222A;
    --color-cta-bg: #3D1830;
    --color-cta-text: #EDE5E9;

    --color-text: #EDE5E9;
    --color-text-light: #C0AFBA;
    --color-text-muted: #877283;
    --color-text-white: #ffffff;
    --color-text-primary: var(--color-orchidee);

    /* Orchidée comme primaire dark — seule couleur de la palette
       assez claire pour être lisible sur fond sombre               */
    --color-on-primary: var(--color-bg);

    --color-primary: var(--color-orchidee);
    --color-primary-light: #DDD0E8;
    --color-primary-dark: #A890BE;
    --color-primary-rgb: 201, 178, 215;

    --color-accent-red: #E8687A;
    --color-accent-green: #5EC878;

    --color-border: #3A2B34;
    --color-border-light: #46363F;

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