/* =========================================================================
   MATIRA LOCATION — Design tokens
   Direction : Lagon cinématique (dark premium)
   Palette : anthracite profond + turquoise lagon + or sable
   ========================================================================= */

:root {
  /* ---- Couleurs : fonds (light luxury — plage de Matira) ---- */
  --bg-abyss: #0b5f59; /* lagon profond — base du hero */
  --bg-base: #fbf8f2; /* sable chaud — fond principal */
  --bg-surface: #ffffff; /* cartes blanches */
  --bg-surface-2: #f4eee2; /* surfaces alternées / hover sable */
  --bg-glass: rgba(255, 255, 255, 0.62);
  --bg-glass-strong: rgba(255, 255, 255, 0.88);

  /* ---- Couleurs : texte ---- */
  --text-strong: #06343e; /* titres — bleu océan profond */
  --text: #244a50; /* corps */
  --text-muted: #5c7479; /* secondaire */
  --text-faint: #8a9da0; /* légendes */

  /* ---- Accent lagon (turquoise) ---- */
  --lagoon-50: #e6fbf7;
  --lagoon-200: #7de3d5;
  --lagoon-400: #15b8a6; /* fills / CTA */
  --lagoon-500: #0e9e8e;
  --lagoon-600: #0b8275;
  --lagoon-ink: #0a7468; /* turquoise lisible en TEXTE sur clair (AA) */
  --lagoon-glow: rgba(21, 184, 166, 0.28);

  /* ---- Accent or / sable (premium) ---- */
  --sand-200: #f3e7cf;
  --sand-400: #c9a86a;
  --sand-500: #b88a3e;
  --gold-ink: #9a6f24; /* or lisible en TEXTE sur clair */

  /* ---- Lignes & bordures ---- */
  --line: rgba(6, 52, 62, 0.1);
  --line-strong: rgba(6, 52, 62, 0.16);
  --line-lagoon: rgba(21, 184, 166, 0.4);

  /* ---- Dégradés ---- */
  --grad-lagoon: linear-gradient(135deg, #0e9e8e 0%, #15b8a6 55%, #5eead4 100%);
  --grad-hero:
    radial-gradient(
      120% 90% at 70% 12%,
      rgba(94, 234, 212, 0.18) 0%,
      rgba(11, 95, 89, 0) 55%
    ),
    linear-gradient(
      180deg,
      rgba(4, 40, 40, 0.1) 0%,
      rgba(4, 40, 40, 0.32) 45%,
      rgba(4, 36, 38, 0.72) 100%
    );
  --grad-card: linear-gradient(160deg, #ffffff 0%, #f7f1e6 100%);
  --grad-sand: linear-gradient(135deg, #c9a86a 0%, #f3e7cf 100%);

  /* ---- Typographie ---- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --text-xl: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --text-2xl: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --text-hero: clamp(2.9rem, 1.6rem + 6vw, 6.5rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.7;

  /* ---- Espacements ---- */
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);
  --maxw: 1240px;
  --maxw-narrow: 860px;

  /* ---- Rayons ---- */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* ---- Ombres (douces, teintées océan) ---- */
  --shadow-sm: 0 4px 14px rgba(6, 52, 62, 0.06);
  --shadow-md: 0 18px 40px rgba(6, 52, 62, 0.1);
  --shadow-lg: 0 34px 70px rgba(6, 52, 62, 0.14);
  --shadow-lagoon: 0 22px 50px -18px rgba(21, 184, 166, 0.45);

  /* ---- Mouvement ---- */
  --dur-fast: 150ms;
  --dur: 260ms;
  --dur-slow: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- z-index ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 40;
  --z-overlay: 60;
  --z-modal: 80;
}