/* ============================================================================
   VARIABLES CSS DU THÈME - Généré à partir de config/theme-config.js
   ============================================================================
   SOURCE UNIQUE DE VÉRITÉ pour toutes les couleurs du site de mariage.

   Palette inspirée de : ressources/mockup/inspiration-02.JPG
   Couleurs dominantes : Bleu marine + Rose pêche + Beige crème

   Pour modifier les couleurs, éditez uniquement config/theme-config.js
   Ce fichier CSS est généré automatiquement.
   ============================================================================ */

:root {
    /* ====================================================================
       COULEURS PRIMAIRES - Bleu marine (inspiré de l'image)
       ==================================================================== */
    --color-primary: #222641;              /* Navy blue - couleur dominante */
    --color-primary-light: #333c65;        /* Navy blue clair - pour hover */
    --color-primary-dark: #1a1f30;         /* Navy blue très foncé - pour fond sombre */
    
    /* ====================================================================
       COULEURS SECONDAIRES - Rose pêche (inspiré de l'image)
       ==================================================================== */
    --color-secondary: #dc9682;            /* Rose pêche - accents chauds */
    --color-secondary-light: #f0beaa;      /* Rose pêche clair - accents doux */
    --color-secondary-dark: #c97960;       /* Rose pêche foncé - contraste */
    
    /* ====================================================================
       COULEURS D'ACCENT - Bleu gris (détails fins)
       ==================================================================== */
    --color-accent: #323c64;               /* Bleu gris - accent principal */
    --color-accent-light: #4a5480;         /* Bleu gris clair */
    --color-accent-dark: #1f2340;          /* Bleu gris foncé */
    
    /* ====================================================================
       FONDS - Palette neutre beige/crème
       ==================================================================== */
    --color-background: #f5f3f0;           /* Beige/crème - fond principal */
    --color-background-alt: #ede9e3;       /* Beige/crème moyen - fond alternatif */
    --color-background-dark: #e5ddf6;      /* Beige/crème foncé - contraste */
    
    /* ====================================================================
       TEXTE ET CONTENEURS
       ==================================================================== */
    --color-text: #222641;                 /* Navy blue - texte principal */
    --color-text-light: #4a505a;           /* Gris-bleu - texte secondaire */
    --color-text-lighter: #8a8a9a;         /* Gris clair - texte désactivé */
    --color-white: #ffffff;                /* Blanc pur */
    --color-black: #000000;                /* Noir pur */
    
    /* ====================================================================
       BORDURES ET SÉPARATEURS
       ==================================================================== */
    --color-border: #d0ccc6;               /* Gris beige - bordures principales */
    --color-border-light: #e0ddd7;         /* Gris beige clair - bordures subtiles */
    --color-border-dark: #c0bbb2;          /* Gris beige foncé - bordures marquées */
    
    /* ====================================================================
       ÉTATS SÉMANTIQUES
       ==================================================================== */
    --color-error: #d9534f;                /* Rouge - erreurs */
    --color-error-light: #f2dedd;          /* Rouge très clair - fond d'erreur */
    --color-success: #5cb85c;              /* Vert - succès */
    --color-success-light: #dff0d8;        /* Vert très clair - fond de succès */
    --color-warning: #f0ad4e;              /* Orange - avertissements */
    --color-warning-light: #fcf8e3;        /* Orange très clair - fond d'avertissement */
    --color-info: #5bc0de;                 /* Cyan - informations */
    --color-info-light: #d9edf7;           /* Cyan très clair - fond d'info */
    
    /* ====================================================================
       ALIAS RÉTRO-COMPATIBILITÉ (pour l'ancien code)
       ==================================================================== */
    --color-primary-hover: #222641;        /* Compatible ancien code */
    --color-backgroundAlt: #ede9e3;        /* Alias ancien (utiliser --color-background-alt) */

    /* Polices - modifiables via theme-config.js */
    --font-decorative: 'RTL-Adam Script', cursive;
    --font-heading: 'Lato', sans-serif;
    --font-body: 'Forum', serif;
    --font-alternative: 'Montserrat', sans-serif;
    
    /* Poids des polices */
    --font-weight-decorative: normal;
    --font-weight-heading: 400;
    --font-weight-body: normal;
    --font-weight-alternative: 300, 400, 600;
    
    /* Espacements */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-xxl: 60px;
    
    /* Bordures */
    --radius-none: 0px;
    --radius-small: 5px;
    --radius-medium: 10px;
    --radius-large: 20px;
    --radius-full: 50%;
    
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 3px;
    
    /* Ombres */
    --shadow-small: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 20px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Classes utilitaires pour appliquer le thème */

/* Couleurs de fond */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-background { background-color: var(--color-background); }
.bg-backgroundAlt { background-color: var(--color-backgroundAlt); }

/* Couleurs de texte */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-white { color: var(--color-white); }

/* Bordures */
.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-accent { border-color: var(--color-accent); }

/* Polices */
.font-decorative { font-family: var(--font-decorative); }
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.font-alternative { font-family: var(--font-alternative); }

/* Espacements */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-xxl { padding: var(--spacing-xxl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-xxl { margin: var(--spacing-xxl); }

/* Arrondis */
.rounded-none { border-radius: var(--radius-none); }
.rounded-small { border-radius: var(--radius-small); }
.rounded-medium { border-radius: var(--radius-medium); }
.rounded-large { border-radius: var(--radius-large); }
.rounded-full { border-radius: var(--radius-full); }

/* Ombres */
.shadow-small { box-shadow: var(--shadow-small); }
.shadow-medium { box-shadow: var(--shadow-medium); }
.shadow-large { box-shadow: var(--shadow-large); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* Transitions */
.transition-fast { transition: all var(--transition-fast); }
.transition-normal { transition: all var(--transition-normal); }
.transition-slow { transition: all var(--transition-slow); }