/* ==========================================================================
   AIG Création — Design tokens
   Wedding planner · Le Tampon, île de La Réunion
   À copier tel quel dans le thème (style.css / assets/css/tokens.css).
   Aucune règle applicative ici : uniquement des :root{}.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------
     1. COULEURS DE MARQUE
     --------------------------------------------------------------- */
  --aig-ravine:        #17423A;  /* vert profond des ravines — couleur primaire */
  --aig-ravine-fonce:  #0F2E28;  /* pressed / fonds immersifs */
  --aig-palme:         #2E6B5B;  /* vert secondaire, liens, hover */
  --aig-lagon:         #8FC5BD;  /* teinte décorative, traits, filigranes */
  --aig-lagon-pale:    #DDEDE9;  /* fonds de chip, surfaces teintées */

  --aig-or:            #9A6B2F;  /* or austral — accent, ornements, icônes */
  --aig-or-texte:      #82591F;  /* variante lisible pour du texte sur clair */
  --aig-or-clair:      #D9B47C;  /* accent sur fond sombre */
  --aig-or-pale:       #F2E4CE;  /* fond de badge premium */

  --aig-frangipanier:  #EBD2C8;  /* blush, surfaces émotionnelles (témoignages) */
  --aig-rose-logo:     #E5B0B1;  /* rose poudré du logo AIG d'origine — relevé sur le fichier de marque */
  --aig-rose-fonce:    #B4666B;  /* variante lisible du rose de marque sur fond clair */
  --aig-hibiscus:      #A8394B;  /* accent chaud rare — coeur, favoris */

  /* ---------------------------------------------------------------
     2. NEUTRES (base sable clair / sable noir)
     --------------------------------------------------------------- */
  --aig-basalte:       #1A1714;  /* sable noir volcanique — texte principal */
  --aig-encre:         #463E37;  /* texte courant secondaire */
  --aig-gris:          #6F6760;  /* texte tertiaire, légendes */
  --aig-trait:         #E4DCD2;  /* bordures, séparateurs */
  --aig-trait-fort:    #CFC3B5;  /* séparateurs appuyés (décoratif) */
  --aig-trait-controle:#8C837C;  /* bordure des contrôles : 3.60:1 sur --aig-sable (WCAG 1.4.11 OK) */
  --aig-ivoire:        #F6F1EA;  /* surface alternée, cartes creusées */
  --aig-sable:         #FDFBF8;  /* fond de page */
  --aig-blanc:         #FFFFFF;  /* surfaces élevées (cartes, sheets, tab bar) */

  /* ---------------------------------------------------------------
     3. RÔLES SÉMANTIQUES
     --------------------------------------------------------------- */
  --aig-bg:              var(--aig-sable);
  --aig-bg-alt:          var(--aig-ivoire);
  --aig-bg-inverse:      var(--aig-ravine);
  --aig-surface:         var(--aig-blanc);
  --aig-surface-sunken:  var(--aig-ivoire);
  --aig-text:            var(--aig-basalte);
  --aig-text-muted:      var(--aig-encre);
  --aig-text-subtle:     var(--aig-gris);
  --aig-text-on-dark:    var(--aig-sable);
  --aig-border:          var(--aig-trait);          /* décoratif uniquement */
  --aig-border-control:  var(--aig-trait-controle);  /* inputs, cases, toggles */
  --aig-accent:          var(--aig-ravine);
  --aig-accent-soft:     var(--aig-lagon-pale);
  --aig-ornement:        var(--aig-lagon);   /* SVG décoratifs via currentColor */

  /* ---------------------------------------------------------------
     4. ÉTATS
     --------------------------------------------------------------- */
  --aig-succes:        #1F7A4C;
  --aig-succes-bg:     #E6F3EC;
  --aig-attention:     #8A5A0B;
  --aig-attention-bg:  #FBF0DC;
  --aig-erreur:        #A3271F;
  --aig-erreur-bg:     #FBEAE8;
  --aig-info:          #215C7D;
  --aig-info-bg:       #E7F1F6;
  --aig-focus:         #17423A;
  --aig-focus-ring:    0 0 0 3px rgba(23, 66, 58, 0.30);
  --aig-disabled-bg:   #EFE9E1;
  --aig-disabled-fg:   #8C837C;

  /* Voiles sur photo (garantissent le contraste du texte en hero) */
  /* Deux couches : un voile d'ambiance sur toute la photo, et un panneau plus
     dense sous le bloc de texte. Sur une plage en plein soleil, un voile seul
     devrait monter à 80 % d'opacité pour rendre le texte lisible — la photo
     n'existerait plus. */
  --aig-voile-bas:     linear-gradient(180deg, rgba(15,46,40,0.28) 0%, rgba(15,46,40,0.20) 26%, rgba(15,46,40,0.40) 58%, rgba(15,46,40,0.64) 100%);
  --aig-voile-plein:   rgba(15, 46, 40, 0.46);
  --aig-voile-texte:   linear-gradient(180deg, rgba(15,46,40,0) 0%, rgba(15,46,40,0.48) 18%, rgba(15,46,40,0.66) 56%, rgba(15,46,40,0.76) 100%);

  /* ---------------------------------------------------------------
     5. TYPOGRAPHIE — Google Fonts
     Cormorant Garamond 300 + 500 (display serif, fort contraste)
     Mulish 400 + 600 (sans humaniste, UI et texte courant)
     --------------------------------------------------------------- */
  --aig-font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --aig-font-sans:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --aig-fw-display-light: 300;
  --aig-fw-display-medium: 500;
  --aig-fw-regular: 400;
  --aig-fw-semibold: 600;

  /* Échelle fluide : bornes calées sur 360px → 1440px */
  --aig-fs-display: clamp(2.5rem,    1.500rem + 4.444vw, 5.500rem);  /*  40 →  88 */
  --aig-fs-h1:      clamp(2rem,      1.417rem + 2.593vw, 3.750rem);  /*  32 →  60 */
  --aig-fs-h2:      clamp(1.625rem,  1.292rem + 1.481vw, 2.625rem);  /*  26 →  42 */
  --aig-fs-h3:      clamp(1.3125rem, 1.125rem + 0.833vw, 1.875rem);  /*  21 →  30 */
  --aig-fs-h4:      clamp(1.125rem,  1.042rem + 0.370vw, 1.375rem);  /*  18 →  22 */
  --aig-fs-lead:    clamp(1.125rem,  1.063rem + 0.278vw, 1.3125rem); /*  18 →  21 */
  --aig-fs-body:    clamp(1rem,      0.958rem + 0.185vw, 1.125rem);  /*  16 →  18 */
  --aig-fs-small:   clamp(0.875rem,  0.854rem + 0.093vw, 0.9375rem); /*  14 →  15 */
  --aig-fs-micro:   clamp(0.75rem,   0.729rem  + 0.093vw, 0.8125rem); /*  12 →  13 — plancher de lisibilité */

  --aig-lh-display: 0.98;
  --aig-lh-h1:      1.06;
  --aig-lh-h2:      1.12;
  --aig-lh-h3:      1.22;
  --aig-lh-h4:      1.32;
  --aig-lh-lead:    1.58;
  --aig-lh-body:    1.68;
  --aig-lh-small:   1.55;
  --aig-lh-micro:   1.2;

  --aig-ls-display: -0.02em;
  --aig-ls-h1:      -0.015em;
  --aig-ls-h2:      -0.01em;
  --aig-ls-h3:      -0.005em;
  --aig-ls-h4:       0em;
  --aig-ls-body:     0em;
  --aig-ls-small:    0.005em;
  --aig-ls-overline: 0.18em;   /* surtitres capitales en Mulish 600 */
  --aig-ls-bouton:   0.04em;

  --aig-measure:        68ch;  /* longueur de ligne confortable */
  --aig-measure-narrow: 46ch;  /* chapô, citations */

  /* ---------------------------------------------------------------
     6. ESPACEMENT (base 4px)
     --------------------------------------------------------------- */
  --aig-space-3xs: 0.25rem;  /*   4 */
  --aig-space-2xs: 0.5rem;   /*   8 */
  --aig-space-xs:  0.75rem;  /*  12 */
  --aig-space-sm:  1rem;     /*  16 */
  --aig-space-md:  1.5rem;   /*  24 */
  --aig-space-lg:  2rem;     /*  32 */
  --aig-space-xl:  3rem;     /*  48 */
  --aig-space-2xl: 4rem;     /*  64 */
  --aig-space-3xl: 6rem;     /*  96 */
  --aig-space-4xl: 8rem;     /* 128 */

  --aig-gutter:    clamp(1.25rem, 0.5rem + 3.33vw, 3rem);  /* 20 → 48 */
  --aig-section-y: clamp(3.5rem, 2rem + 6.667vw, 8rem);    /* 56 → 128 */
  --aig-stack:     var(--aig-space-md);                    /* rythme vertical par défaut */

  --aig-container:        75rem;   /* 1200 */
  --aig-container-narrow: 45rem;   /*  720 */
  --aig-container-wide:   90rem;   /* 1440 */

  /* ---------------------------------------------------------------
     7. RAYONS
     --------------------------------------------------------------- */
  --aig-radius-xs:   0.375rem;  /*  6 — chips, tags */
  --aig-radius-sm:   0.625rem;  /* 10 — inputs, petits boutons */
  --aig-radius-md:   0.875rem;  /* 14 — boutons, champs */
  --aig-radius-lg:   1.25rem;   /* 20 — cartes */
  --aig-radius-xl:   1.75rem;   /* 28 — cartes média, sheets */
  --aig-radius-2xl:  2.25rem;   /* 36 — hero mobile, galerie */
  --aig-radius-pill: 999px;
  --aig-radius-circle: 50%;

  /* ---------------------------------------------------------------
     8. OMBRES & ÉLÉVATIONS (teintées basalte, jamais noir pur)
     --------------------------------------------------------------- */
  --aig-shadow-xs:  0 1px 2px rgba(26, 23, 20, 0.05);
  --aig-shadow-sm:  0 2px 6px rgba(26, 23, 20, 0.06), 0 1px 2px rgba(26, 23, 20, 0.04);
  --aig-shadow-md:  0 6px 18px rgba(26, 23, 20, 0.08), 0 2px 6px rgba(26, 23, 20, 0.05);
  --aig-shadow-lg:  0 14px 38px rgba(26, 23, 20, 0.10), 0 4px 12px rgba(26, 23, 20, 0.06);
  --aig-shadow-xl:  0 28px 64px rgba(26, 23, 20, 0.14), 0 8px 20px rgba(26, 23, 20, 0.07);
  --aig-shadow-sheet:  0 -10px 36px rgba(26, 23, 20, 0.16);
  --aig-shadow-tabbar: 0 -8px 24px rgba(26, 23, 20, 0.06);
  --aig-shadow-fab:    0 8px 22px rgba(23, 66, 58, 0.28);
  --aig-shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------------------------------------------------------------
     9. MOTION
     --------------------------------------------------------------- */
  --aig-dur-instant: 90ms;
  --aig-dur-fast:    160ms;
  --aig-dur-base:    240ms;
  --aig-dur-slow:    380ms;
  --aig-dur-sheet:   420ms;
  --aig-dur-reveal:  420ms;

  --aig-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --aig-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --aig-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --aig-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --aig-ease-sheet:    cubic-bezier(0.32, 0.72, 0, 1);

  --aig-press-scale:  0.97;   /* :active sur bouton */
  --aig-press-scale-card: 0.985;

  /* ---------------------------------------------------------------
     10. LAYOUT APPLICATIF (mobile) & SAFE AREAS iOS
     --------------------------------------------------------------- */
  --aig-safe-top:    env(safe-area-inset-top, 0px);
  --aig-safe-bottom: env(safe-area-inset-bottom, 0px);
  --aig-safe-left:   env(safe-area-inset-left, 0px);
  --aig-safe-right:  env(safe-area-inset-right, 0px);

  --aig-header-h:      56px;
  --aig-tabbar-h:      58px;
  --aig-tabbar-total:  calc(var(--aig-tabbar-h) + var(--aig-safe-bottom));
  --aig-fab-offset:    calc(var(--aig-tabbar-total) + var(--aig-space-sm));
  --aig-scroll-pad:    calc(var(--aig-header-h) + var(--aig-space-sm));
  --aig-tap-min:       44px;   /* cible tactile minimale */

  --aig-blur-bar: saturate(180%) blur(14px);
  --aig-bar-bg:   rgba(253, 251, 248, 0.88);

  /* ---------------------------------------------------------------
     11. PROFONDEURS (z-index)
     --------------------------------------------------------------- */
  --aig-z-base:     0;
  --aig-z-sticky:   100;
  --aig-z-header:   200;
  --aig-z-tabbar:   300;
  --aig-z-fab:      350;
  --aig-z-overlay:  400;
  --aig-z-sheet:    500;
  --aig-z-toast:    600;

  /* ---------------------------------------------------------------
     12. CONTACT (valeurs de marque réutilisées dans les liens)
     --------------------------------------------------------------- */
  --aig-tel-affiche: "0692 17 67 79";
}

/* Desktop : header plus généreux, plus de tab bar */
@media (min-width: 1024px) {
  :root {
    --aig-header-h:     76px;
    --aig-tabbar-h:     0px;
    --aig-tabbar-total: 0px;
    --aig-stack:        var(--aig-space-lg);
  }
}

/* Accessibilité : on neutralise les durées, pas les états */
@media (prefers-reduced-motion: reduce) {
  :root {
    --aig-dur-instant: 1ms;
    --aig-dur-fast:    1ms;
    --aig-dur-base:    1ms;
    --aig-dur-slow:    1ms;
    --aig-dur-sheet:   1ms;
    --aig-dur-reveal:  1ms;
    --aig-press-scale: 1;
    --aig-press-scale-card: 1;
  }
}