/* =============================================================================
   DESIGN SYSTEM — La Tribu des Filous
   =============================================================================
   Direction Artistique :
   - Montserrat    → Structure : titres, navigation, labels, boutons
   - Quicksand     → Corps : paragraphes, listes, formulaires
   - Dancing Script → Émotion : logo, citations, accents manuscrits
   ============================================================================= */

:root {
    /* ── Brand Palette ───────────────────────────────────── */
    --primary: #4A4A4A;
    /* Gris foncé — titres, texte fort          */
    --accent-main: #bca6b9;
    /* Mauve rosé — accent principal, liens     */
    --accent-light: #ebe4ea;
    /* Mauve rosé clair — fonds, bordures photo */
    --highlight: #F49B94;
    /* Corail — accent secondaire, CTA, déco    */
    --highlight-soft: #FDE8E6;
    /* Corail pâle — fonds badges, step-num     */

    /* ── Neutrals & Backgrounds ──────────────────────────── */
    --bg-body: #FFFBF7;
    /* Blanc chaud — fond de page               */
    --bg-hero: #bca6b9;
    /* Mauve rosé — fond hero                   */
    --bg-section: #F8F5F2;
    /* Gris/beige — sections alternées          */
    --bg-pink: #FFF0F5;
    /* Rose pâle — section recette              */
    --white: #FFFFFF;
    --text-dark: #2D2D2D;
    /* Texte principal                          */
    --text-light: #6D6D6D;
    /* Texte secondaire, légendes               */
    --text-muted: #888888;
    /* Texte discret — footer, meta             */
    --text-disabled: #aaaaaa;
    /* Texte désactivé — placeholder alt        */
    --border-light: #cccccc;
    /* Bordures légères — footer, séparateurs   */
    --bg-warm: #fdfaf6;
    /* Blanc chaud alt — en-têtes, contact      */
    --accent-muted: #b3a0b1;
    /* Mauve rosé sourd — placeholders          */

    /* ── Typography ──────────────────────────────────────── */
    --font-heading: 'Montserrat', sans-serif;
    /* Structure   */
    --font-body: 'Quicksand', sans-serif;
    /* Corps       */
    --font-script: 'Dancing Script', cursive;
    /* Émotion     */

    /* ── Spacing & Shapes ────────────────────────────────── */
    --radius-sm: 12px;
    --radius-md: 24px;
    --radius-lg: 40px;
    --radius-pill: 50px;
    --radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;

    /* ── Motion & Effects ────────────────────────────────── */
    --bezier-global: cubic-bezier(0.25, 0.8, 0.25, 1);
    --ease: cubic-bezier(0.25, 1, 0.5, 1);
    --transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease;
    --transition-colors: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    --transition-transform: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --shadow-subtle: 0 10px 30px -10px rgba(74, 74, 74, 0.08);
    --shadow-float: 0 20px 40px -10px rgba(188, 166, 185, 0.2);
    --shadow-card: 0 5px 15px rgba(0, 0, 0, 0.02);
    --shadow-card-hover: 0 15px 30px rgba(0, 0, 0, 0.05);
    --shadow-focus: 0 0 0 3px rgba(188, 166, 185, 0.15);
    --shadow-btn: 0 8px 20px rgba(188, 166, 185, 0.3);
    --shadow-btn-hover: 0 12px 25px rgba(0, 0, 0, 0.15);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: 1px solid rgba(255, 255, 255, 0.5);
}