/* ==========================================================================
   GAIA CONCEPT — DESIGN TOKENS (V2)
   Direction artistique : "Crystal Water / Vision Pro" — inspirée du
   nouveau logo (goutte cristalline bleu nuit / glacier / argent).
   Site majoritairement clair, verre translucide, profondeur douce.
   Modifier les couleurs, typographies et espacements ICI se répercute
   automatiquement sur tout le site.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. COULEURS DE MARQUE
     Bleu marine, bleu et argent extraits par échantillonnage colorimétrique
     du nouveau rendu de logo (assets/images/logo/logo-gaia-concept.png).
     Le vert ci-dessous est une PROPOSITION (absent du logo, demandé par le
     client pour évoquer la fraîcheur de l'eau pure) : à valider, facilement
     ajustable ici sans toucher au reste du CSS.
     --------------------------------------------------------------------- */
  --color-ink: #0f2038;          /* bleu marine profond — texte, logotype */
  --color-navy-700: #16324f;     /* fonds sombres ponctuels (footer) */
  --color-blue-700: #1f4571;
  --color-blue-600: #2d6db4;     /* bleu de marque principal */
  --color-blue-500: #4a8fd1;
  --color-glacier-400: #8fc7f5;  /* bleu glacier — reflets, halos */
  --color-glacier-100: #eaf4fd;  /* fond teinté très clair */

  --color-silver-300: #c7d2da;   /* facettes de cristal — bordures, neutres */
  --color-silver-500: #9aa6b0;

  /* Proposition — vert aqua, à valider avec le client (voir commentaire ci-dessus) */
  --color-green-700: #167a5f;
  --color-green-500: #2fb894;
  --color-green-100: #e3f7f0;

  --color-champagne: #c9b79e;    /* accent discret, extrait du wordmark */

  /* ---------------------------------------------------------------------
     2. PALETTE "CRYSTAL WATER"
     --------------------------------------------------------------------- */
  --color-crystal-050: #f8fafc;  /* fond général du site, blanc légèrement bleuté */
  --color-crystal-100: #eef2f6;  /* panneaux clairs secondaires */
  --color-surface: #ffffff;      /* cartes, surfaces pleines */

  /* Texte */
  --color-text-primary: var(--color-ink);
  --color-text-secondary: #4a5c6b;
  --color-text-muted: #8695a1;
  --color-text-inverse: #f4f8fb;       /* texte clair sur les rares fonds sombres (footer) */
  --color-text-inverse-muted: #aec3d6;

  /* Bordures / lignes */
  --color-border-soft: #e3e9ee;
  --color-border-strong: #cbd5dc;
  --color-border-inverse: rgba(244, 248, 251, 0.14);

  /* États */
  --color-focus-ring: #4a8fd1;
  --color-success: #2f9e6e;

  /* ---------------------------------------------------------------------
     3. VERRE (Vision Pro) — panneaux translucides, halos, profondeur
     --------------------------------------------------------------------- */
  --glass-bg-strong: rgba(255, 255, 255, 0.74);
  --glass-bg-soft: rgba(255, 255, 255, 0.44);
  --glass-bg-navy: rgba(15, 32, 56, 0.55);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-border-navy: rgba(244, 248, 251, 0.16);
  --glass-blur: 22px;

  /* ---------------------------------------------------------------------
     4. DÉGRADÉS
     --------------------------------------------------------------------- */
  --gradient-page-wash: radial-gradient(120% 100% at 50% -10%, var(--color-glacier-100) 0%, var(--color-crystal-050) 55%, #f2f6f9 100%);
  --gradient-brand: linear-gradient(135deg, var(--color-blue-600) 0%, var(--color-blue-500) 100%);
  --gradient-aqua: linear-gradient(135deg, var(--color-glacier-400) 0%, var(--color-green-500) 100%);
  --gradient-air: linear-gradient(135deg, var(--color-ink) 0%, var(--color-blue-600) 100%);
  --gradient-water: linear-gradient(135deg, var(--color-blue-600) 0%, var(--color-green-500) 100%);
  --gradient-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.22) 100%);
  --gradient-glass-navy: linear-gradient(160deg, rgba(244, 248, 251, 0.14) 0%, rgba(244, 248, 251, 0.03) 100%);

  /* ---------------------------------------------------------------------
     5. TYPOGRAPHIE
     Pile système premium — aucune dépendance Google Fonts.
     Pour déposer une police locale plus tard : ajouter les fichiers dans
     assets/fonts/, déclarer une règle @font-face dans global.css, puis
     ajouter son nom en tête des piles ci-dessous.
     --------------------------------------------------------------------- */
  --font-display: "New York", "Iowan Old Style", "Georgia", "Times New Roman", serif;
  --font-body: -apple-system, "Segoe UI", "SF Pro Text", "Helvetica Neue", Roboto, Arial, sans-serif;

  --fs-h1: clamp(2.4rem, 1.7rem + 3.2vw, 4.6rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  --ls-tight: -0.02em;
  --ls-wide: 0.08em;
  --ls-wider: 0.16em;

  /* ---------------------------------------------------------------------
     6. ESPACEMENTS (échelle 4px)
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---------------------------------------------------------------------
     7. FORMES, OMBRES, TRANSITIONS
     --------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --radius-full: 999px;

  --shadow-soft: 0 8px 30px rgba(15, 32, 56, 0.06);
  --shadow-medium: 0 20px 50px rgba(15, 32, 56, 0.10);
  --shadow-deep: 0 34px 90px rgba(15, 32, 56, 0.16);
  --shadow-focus: 0 0 0 3px rgba(74, 143, 209, 0.45);

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  /* ---------------------------------------------------------------------
     8. STRUCTURE
     --------------------------------------------------------------------- */
  --header-height: 124px;         /* hauteur desktop, header à deux lignes (logo/CTA + navigation) */
  --header-height-scrolled: 100px;
  --header-height-mobile: 72px;   /* hauteur mobile/tablette : une seule ligne (pas de nav dédiée) */
  --mobile-bar-height: 64px;

  --z-header: 100;
  --z-mobile-menu: 200;
  --z-mobile-bar: 90;
  --z-skip-link: 300;
}