/**
 * ═══════════════════════════════════════════════════════════════════════════
 * DESIGN TOKENS - Tableau des Iles
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Système centralisé de design tokens pour une identité visuelle cohérente
 * Tous les fichiers CSS doivent utiliser ces variables au lieu de valeurs hardcodées
 *
 * Structure:
 * 1. Couleurs de marque (Brand Colors)
 * 2. Couleurs sémantiques (Semantic Colors)
 * 3. Couleurs de texte (Text Colors)
 * 4. Couleurs de fond (Background Colors)
 * 5. Couleurs de bordure (Border Colors)
 * 6. Typographie (Typography)
 * 7. Espacements (Spacing)
 * 8. Bordures & Radius (Borders & Radius)
 * 9. Ombres (Shadows)
 * 10. Transitions & Animations
 * 11. Z-index
 * 12. Breakpoints (définis séparément dans responsive-variables.css)
 *
 * @version 2.0
 * @author Claude Code
 * ═══════════════════════════════════════════════════════════════════════════
 */

:root {
    /* ═══════════════════════════════════════════════════════════════════════
     * 1. COULEURS DE MARQUE (Brand Colors)
     * ═══════════════════════════════════════════════════════════════════════ */

    /* Primary - Violet/Purple (identité principale) */
    --color-primary: #844fc0;
    --color-primary-light: #9c75d1;
    --color-primary-lighter: #b594db;
    --color-primary-dark: #6b3d9e;
    --color-primary-darker: #52307a;

    /* Secondary - Rose/Pink (accent émotionnel) */
    --color-secondary: #ff4365;
    --color-secondary-light: #ff6a85;
    --color-secondary-lighter: #ff91a4;
    --color-secondary-dark: #e63256;
    --color-secondary-darker: #cc2847;

    /* Accent - Teal/Turquoise (CTA et liens) */
    --color-accent: #06d6a0;
    --color-accent-light: #38deb4;
    --color-accent-dark: #05b889;

    /* Teal/Blue - Actions principales */
    --color-teal: #3594b9;
    --color-teal-light: #4aa8ca;
    --color-teal-dark: #2a7492;
    --color-teal-darker: #1f5a73;

    /* ═══════════════════════════════════════════════════════════════════════
     * 2. COULEURS SÉMANTIQUES (Semantic Colors)
     * ═══════════════════════════════════════════════════════════════════════ */

    /* Success - Vert */
    --color-success: #28a745;
    --color-success-light: #48c764;
    --color-success-dark: #1e7e34;
    --color-success-bg: #d4edda;
    --color-success-border: #c3e6cb;

    /* Danger - Rouge */
    --color-danger: #dc3545;
    --color-danger-light: #e4606d;
    --color-danger-dark: #c82333;
    --color-danger-bg: #f8d7da;
    --color-danger-border: #f5c6cb;

    /* Warning - Jaune/Orange */
    --color-warning: #ffc107;
    --color-warning-light: #ffcd39;
    --color-warning-dark: #e0a800;
    --color-warning-bg: #fff3cd;
    --color-warning-border: #ffeaa7;

    /* Info - Bleu */
    --color-info: #007bff;
    --color-info-light: #339dff;
    --color-info-dark: #0056b3;
    --color-info-bg: #d1ecf1;
    --color-info-border: #bee5eb;

    /* ═══════════════════════════════════════════════════════════════════════
     * 3. COULEURS DE TEXTE (Text Colors)
     * ═══════════════════════════════════════════════════════════════════════ */

    --text-primary: #1a1a1a;          /* Texte principal - presque noir */
    --text-secondary: #4a4a4a;        /* Texte secondaire */
    --text-tertiary: #6b6b6b;         /* Texte tertiaire */
    --text-disabled: #999999;         /* Texte désactivé */
    --text-muted: #b3b3b3;            /* Texte très discret */
    --text-inverse: #ffffff;          /* Texte sur fond sombre */
    --text-link: var(--color-teal);   /* Liens */
    --text-link-hover: var(--color-teal-dark);

    /* Compatibilité avec ancien système */
    --text-dark: var(--text-primary);
    --text-medium: var(--text-secondary);
    --text-light: var(--text-disabled);

    /* ═══════════════════════════════════════════════════════════════════════
     * 4. COULEURS DE FOND (Background Colors)
     * ═══════════════════════════════════════════════════════════════════════ */

    --bg-primary: #ffffff;            /* Fond principal (blanc) */
    --bg-secondary: #f8f9fa;          /* Fond secondaire (très clair) */
    --bg-tertiary: #f5f5f5;           /* Fond tertiaire */
    --bg-gray-light: #f5f5f5;         /* Gris très clair */
    --bg-gray: #e9ecef;               /* Gris clair */
    --bg-gray-medium: #dee2e6;        /* Gris moyen */
    --bg-dark: #1a1a1a;               /* Fond sombre */
    --bg-overlay: rgba(0, 0, 0, 0.5); /* Overlay modal */

    /* Compatibilité avec ancien système */
    --light-gray: var(--bg-gray-light);
    --medium-gray: var(--bg-gray-medium);
    --dark-gray: var(--text-tertiary);

    /* ═══════════════════════════════════════════════════════════════════════
     * 5. COULEURS DE BORDURE (Border Colors)
     * ═══════════════════════════════════════════════════════════════════════ */

    --border-light: #e0e0e0;
    --border-medium: #cccccc;
    --border-dark: #999999;
    --border-focus: var(--color-primary);
    --border-error: var(--color-danger);
    --border-success: var(--color-success);

    /* ═══════════════════════════════════════════════════════════════════════
     * 6. TYPOGRAPHIE (Typography)
     * ═══════════════════════════════════════════════════════════════════════ */

    /* Famille de polices */
    --font-family-primary: 'Signika', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: var(--font-family-primary);
    --font-family-mono: 'Courier New', Courier, monospace;

    /* Tailles de police (échelle harmonieuse) */
    --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: 1.875rem;    /* 30px */
    --font-size-3xl: 2.25rem;     /* 36px */
    --font-size-4xl: 3rem;        /* 48px */

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

    /* Hauteur de ligne */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;

    /* ═══════════════════════════════════════════════════════════════════════
     * 7. ESPACEMENTS (Spacing)
     * Échelle cohérente basée sur 4px (0.25rem)
     * ═══════════════════════════════════════════════════════════════════════ */

    --space-0: 0;
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* Alias pour rétrocompatibilité */
    --spacing-xs: var(--space-2);     /* 8px */
    --spacing-sm: var(--space-3);     /* 12px */
    --spacing-md: var(--space-5);     /* 20px */
    --spacing-lg: var(--space-10);    /* 40px */
    --spacing-xl: var(--space-16);    /* 64px */

    /* ═══════════════════════════════════════════════════════════════════════
     * 8. BORDURES & RADIUS (Borders & Radius)
     * ═══════════════════════════════════════════════════════════════════════ */

    /* Épaisseur de bordure */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    /* Border radius (coins arrondis) */
    --radius-none: 0;
    --radius-sm: 0.25rem;     /* 4px */
    --radius-md: 0.5rem;      /* 8px */
    --radius-lg: 0.75rem;     /* 12px */
    --radius-xl: 1rem;        /* 16px */
    --radius-2xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;    /* Complètement arrondi (cercle/pill) */

    /* Alias pour rétrocompatibilité */
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-2xl);

    /* ═══════════════════════════════════════════════════════════════════════
     * 9. OMBRES (Shadows)
     * Système d'élévation cohérent
     * ═══════════════════════════════════════════════════════════════════════ */

    /* Ombres de base */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 24px 0 rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 20px 40px 0 rgba(0, 0, 0, 0.20);

    /* Ombres spéciales */
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-outline: 0 0 0 3px rgba(132, 79, 192, 0.2); /* Focus/outline */
    --shadow-outline-teal: 0 0 0 3px rgba(53, 148, 185, 0.2);
    --shadow-outline-danger: 0 0 0 3px rgba(220, 53, 69, 0.2);

    /* Ombres colorées (pour CTA importants) */
    --shadow-primary: 0 8px 25px rgba(132, 79, 192, 0.3);
    --shadow-primary-hover: 0 12px 35px rgba(132, 79, 192, 0.4);
    --shadow-teal: 0 8px 25px rgba(53, 148, 185, 0.3);
    --shadow-teal-hover: 0 12px 35px rgba(53, 148, 185, 0.4);

    /* ═══════════════════════════════════════════════════════════════════════
     * 10. TRANSITIONS & ANIMATIONS
     * ═══════════════════════════════════════════════════════════════════════ */

    /* Durées */
    --duration-instant: 100ms;
    --duration-fast: 200ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;

    /* Timing functions */
    --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);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Transitions complètes (propriété + durée + timing) */
    --transition-fast: all var(--duration-fast) var(--ease-out);
    --transition-normal: all var(--duration-normal) var(--ease-in-out);
    --transition-slow: all var(--duration-slow) var(--ease-in-out);
    --transition-colors: background-color var(--duration-fast) var(--ease-out),
                         color var(--duration-fast) var(--ease-out),
                         border-color var(--duration-fast) var(--ease-out);
    --transition-transform: transform var(--duration-normal) var(--ease-out);
    --transition-opacity: opacity var(--duration-fast) var(--ease-out);

    /* ═══════════════════════════════════════════════════════════════════════
     * 11. Z-INDEX (Layering)
     * Système de couches cohérent
     * ═══════════════════════════════════════════════════════════════════════ */

    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-navbar: 1000;
    --z-modal-backdrop: 1400;
    --z-modal: 1500;
    --z-popover: 1600;
    --z-tooltip: 1700;
    --z-notification: 1800;
    --z-debug: 9999;

    /* Alias pour rétrocompatibilité */
    --z-popup: var(--z-popover);

    /* ═══════════════════════════════════════════════════════════════════════
     * 12. GRADIENTS
     * Dégradés réutilisables pour l'identité visuelle
     * ═══════════════════════════════════════════════════════════════════════ */

    --gradient-main: linear-gradient(120deg, #c04f71, #8344b6, #36abcf);
    --gradient-primary: linear-gradient(120deg, var(--color-primary), var(--color-primary-light));
    --gradient-purple: linear-gradient(120deg, #8344b6, #36abcf);
    --gradient-teal: linear-gradient(120deg, var(--color-teal), var(--color-teal-light));
    --gradient-success: linear-gradient(120deg, #4da072, #449bb6);
    --gradient-gold: linear-gradient(to top, #b6802ff2, #e4bb62f2, transparent);
    --gradient-home: linear-gradient(120deg, var(--color-primary), var(--color-secondary), #b67b44);
    --gradient-overlay-dark: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
    --gradient-overlay-primary: linear-gradient(to bottom, rgba(132, 79, 192, 0.8), rgba(132, 79, 192, 0.95));

    /* ═══════════════════════════════════════════════════════════════════════
     * 13. BOUTONS (Button Tokens)
     * Couleurs spécifiques aux boutons
     * ═══════════════════════════════════════════════════════════════════════ */

    --btn-primary-bg: var(--color-teal);
    --btn-primary-hover: var(--color-teal-dark);
    --btn-primary-active: var(--color-teal-darker);
    --btn-primary-text: var(--text-inverse);

    --btn-secondary-bg: var(--color-primary);
    --btn-secondary-hover: var(--color-primary-dark);
    --btn-secondary-active: var(--color-primary-darker);
    --btn-secondary-text: var(--text-inverse);

    --btn-success-bg: var(--color-success);
    --btn-success-hover: var(--color-success-dark);
    --btn-success-text: var(--text-inverse);

    --btn-danger-bg: var(--color-danger);
    --btn-danger-hover: var(--color-danger-dark);
    --btn-danger-text: var(--text-inverse);

    --btn-warning-bg: var(--color-warning);
    --btn-warning-hover: var(--color-warning-dark);
    --btn-warning-text: var(--text-primary);

    --btn-info-bg: var(--color-info);
    --btn-info-hover: var(--color-info-dark);
    --btn-info-text: var(--text-inverse);

    /* Compatibilité avec ancien système */
    --button-primary: var(--btn-primary-bg);
    --button-primary-hover: var(--btn-primary-hover);
    --button-secondary: var(--btn-secondary-bg);
    --button-success: var(--btn-success-bg);
    --button-danger: var(--btn-danger-bg);
    --button-warning: var(--btn-warning-bg);
    --button-info: var(--btn-info-bg);

    /* ═══════════════════════════════════════════════════════════════════════
     * 14. FORMULAIRES (Form Tokens)
     * ═══════════════════════════════════════════════════════════════════════ */

    --input-bg: var(--bg-primary);
    --input-border: var(--border-light);
    --input-border-focus: var(--color-primary);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-muted);
    --input-disabled-bg: var(--bg-gray);
    --input-disabled-text: var(--text-disabled);

    --input-height-sm: 2rem;      /* 32px */
    --input-height-md: 2.5rem;    /* 40px */
    --input-height-lg: 3rem;      /* 48px */

    --input-padding-x-sm: var(--space-3);
    --input-padding-x-md: var(--space-4);
    --input-padding-x-lg: var(--space-5);

    /* ═══════════════════════════════════════════════════════════════════════
     * 15. CARTES (Card Tokens)
     * ═══════════════════════════════════════════════════════════════════════ */

    --card-bg: var(--bg-primary);
    --card-border: var(--border-light);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg);
    --card-radius: var(--radius-lg);
    --card-padding: var(--space-6);

    /* ═══════════════════════════════════════════════════════════════════════
     * 16. CONTENEURS (Container Tokens)
     * ═══════════════════════════════════════════════════════════════════════ */

    --container-max-width: 1600px;
    --container-padding-x: var(--space-6);
    --container-padding-y: var(--space-8);

    /* ═══════════════════════════════════════════════════════════════════════
     * 17. ADMIN DASHBOARD (Tokens spécifiques)
     * ═══════════════════════════════════════════════════════════════════════ */

    --admin-primary: #3b82f6;
    --admin-primary-dark: #2563eb;
    --admin-secondary: #8b5cf6;
    --admin-sidebar-bg: #1f2937;
    --admin-sidebar-hover: #374151;
    --admin-light: #f6f7f9;
    --admin-dark: #111827;

    /* Sémantiques admin (back-office) */
    --admin-success: #10b981;
    --admin-danger: #ef4444;
    --admin-warning: #f59e0b;
    --admin-info: #0ea5e9;
    --admin-border: #e5e7eb;

    /* Ombres admin (élévation douce, neutre) */
    --admin-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.08);
    --admin-shadow-md: 0 4px 12px -2px rgba(17, 24, 39, 0.1);
    --admin-shadow-lg: 0 14px 32px -8px rgba(17, 24, 39, 0.18);

    /* Transition admin */
    --admin-transition: all 0.2s ease;

    /* ═══════════════════════════════════════════════════════════════════════
     * 18. GALERIE & MISE EN VALEUR DES ŒUVRES (Art Showcase Tokens)
     * Utilisés pour mettre en avant tableaux, bannières et images
     * ═══════════════════════════════════════════════════════════════════════ */

    /* Police d'affichage (titres vedettes / hero) — serif élégant « galerie » */
    --font-family-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    /* Ratios d'image cohérents */
    --aspect-art: 4 / 5;          /* Portrait galerie (tableaux) */
    --aspect-square: 1 / 1;       /* Vignettes / cartes carrées */
    --aspect-banner: 16 / 9;      /* Bannières / slides */

    /* Ombres « galerie » (élévation chaleureuse des œuvres) */
    --shadow-art: 0 10px 30px rgba(26, 26, 26, 0.12);
    --shadow-art-hover: 0 18px 45px rgba(132, 79, 192, 0.22);

    /* Overlays dégradés pour lisibilité du texte sur image */
    --overlay-art: linear-gradient(to top, rgba(26, 26, 26, 0.78) 0%, rgba(26, 26, 26, 0.25) 45%, rgba(26, 26, 26, 0) 75%);
    --overlay-art-hover: linear-gradient(to top, rgba(82, 48, 122, 0.85) 0%, rgba(132, 79, 192, 0.4) 50%, rgba(132, 79, 192, 0) 82%);

    /* Zoom doux des images au survol */
    --art-zoom: 1.06;

    /* ═══════════════════════════════════════════════════════════════════════
     * 19. COMPATIBILITÉ — ALIAS ANCIEN SYSTÈME
     * Conserve le fonctionnement des feuilles utilisant les anciens noms.
     * Toujours mappés sur les tokens canoniques ci-dessus.
     * ═══════════════════════════════════════════════════════════════════════ */

    /* Couleurs de marque */
    --primary-color: var(--color-primary);
    --primary-light: var(--color-primary-light);
    --primary-dark: var(--color-primary-dark);
    --secondary-color: var(--color-secondary);
    --secondary-light: var(--color-secondary-light);
    --secondary-dark: var(--color-secondary-dark);
    --accent-color: var(--color-accent);

    /* Couleurs sémantiques */
    --success-color: var(--color-success);
    --danger-color: var(--color-danger);
    --warning-color: var(--color-warning);
    --info-color: var(--color-info);

    /* Texte & fonds */
    --color-text-dark: var(--text-primary);
    --color-text-muted: var(--text-muted);
    --background-light: var(--bg-secondary);
    --border-color: var(--border-light);

    /* Ombres & transitions */
    --box-shadow: var(--shadow-md);
    --transition-default: var(--transition-normal);

    /* ═══════════════════════════════════════════════════════════════════════
     * 20. DA v3 — « Galerie Tropicale » (surfaces, typo fluide, verre, dégradés)
     * Nouvelle direction artistique : canvas ivoire, grandes images, palette îles
     * ═══════════════════════════════════════════════════════════════════════ */

    /* Surfaces (canvas galerie chaleureux) */
    --surface-page: #faf7f2;          /* Ivoire chaud — fond de page */
    --surface-page-alt: #f3ece2;      /* Variation sable */
    --surface-card: #ffffff;          /* Cartes/sections */
    --surface-ink: #16120f;           /* Sombre chaud (sections immersives) */
    --surface-ink-soft: #221b16;

    /* Typographie fluide (clamp : s'adapte mobile → desktop) */
    --fs-hero: clamp(2.1rem, 1.3rem + 3.6vw, 4rem);
    --fs-h2: clamp(1.6rem, 1.15rem + 1.8vw, 2.6rem);
    --fs-h3: clamp(1.2rem, 1.02rem + 0.8vw, 1.6rem);
    --fs-lead: clamp(1.05rem, 0.97rem + 0.45vw, 1.35rem);
    --fs-body: clamp(1rem, 0.97rem + 0.16vw, 1.125rem);
    --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.85rem);

    /* Rythme de page */
    --section-gap: clamp(3rem, 1.8rem + 4.5vw, 6rem);
    --content-max: 1280px;
    --content-wide: 1480px;
    --page-pad-x: clamp(1rem, 0.4rem + 3vw, 3rem);

    /* Verre dépoli (contrôles sur image, overlays) */
    --glass-bg: rgba(255, 255, 255, 0.16);
    --glass-bg-strong: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-blur: blur(12px) saturate(140%);

    /* Dégradés DA — coucher de soleil & océan des îles */
    --gradient-hero: linear-gradient(135deg, #2a1742 0%, #5e3597 26%, #9c3f7e 55%, #c25d63 78%, #cf9a52 100%);
    --gradient-sunset: linear-gradient(120deg, #844fc0, #ff4365, #b67b44);
    --gradient-ocean: linear-gradient(120deg, #3594b9, #06d6a0);
    --gradient-aurora: linear-gradient(120deg, #844fc0, #3594b9, #06d6a0);
    --accent-underline: linear-gradient(90deg, var(--color-primary), var(--color-secondary));

    /* Ombres galerie supplémentaires (élévation douce et chaleureuse) */
    --shadow-soft: 0 6px 24px -8px rgba(34, 27, 22, 0.18);
    --shadow-float: 0 18px 50px -18px rgba(34, 27, 22, 0.28);
    --shadow-ink: 0 24px 60px -20px rgba(0, 0, 0, 0.5);

    /* Anneau de focus moderne (accessibilité) */
    --ring: 0 0 0 3px rgba(132, 79, 192, 0.4);
    --ring-light: 0 0 0 3px rgba(255, 255, 255, 0.7);
}

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * CLASSES UTILITAIRES OPTIONNELLES
 * (Peuvent être activées si besoin)
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* Exemple d'utilisation des tokens:
 *
 * .my-button {
 *     background-color: var(--btn-primary-bg);
 *     color: var(--btn-primary-text);
 *     padding: var(--space-3) var(--space-6);
 *     border-radius: var(--radius-md);
 *     box-shadow: var(--shadow-md);
 *     transition: var(--transition-colors);
 * }
 *
 * .my-button:hover {
 *     background-color: var(--btn-primary-hover);
 *     box-shadow: var(--shadow-lg);
 * }
 */