/**
 * Tokens design — source unique pour couleurs / espacements.
 * Les pages peuvent surcharger via variables existantes (--primary, etc.).
 */
:root {
  /* ==========================================================================
     BREAKPOINTS CANONIQUES — SOURCE DE VÉRITÉ UNIQUE
     Les @media ne peuvent PAS utiliser var() : ces valeurs sont donc à
     recopier EN DUR, à l'identique, partout (CSS et tailwind.config.js).

       base   : 360px  — mobile, AUCUNE media query (styles par défaut)
       sm     : 480px  — @media (min-width: 480px)
       md     : 768px  — @media (min-width: 768px)
       lg     : 1024px — @media (min-width: 1024px)
       xl     : 1280px — @media (min-width: 1280px)

     Approche MOBILE-FIRST stricte : min-width uniquement, jamais max-width.

     Table de migration des anciennes valeurs (47 relevées dans l'audit) :
       320–440px           → base (réécrire le style par défaut)
       480–640px           → sm 480
       680–800px (et 767)  → md 768
       820–1100px          → lg 1024 (cas par cas : 860/900 souvent → md 768)
       1120–1600px         → xl 1280
     ========================================================================== */
  --bp-sm: 480px;  /* référence JS/doc uniquement — pas utilisable en @media */
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Layout */
  --lt-space-xs: 0.25rem;
  --lt-space-sm: 0.5rem;
  --lt-space-md: 1rem;
  --lt-space-lg: 1.5rem;
  --lt-space-xl: 2rem;
  --lt-space-2xl: 3rem;
  --lt-container-sm: 720px;
  --lt-container-md: 960px;
  --lt-container-lg: 1200px;
  --lt-container-xl: 1440px;

  /* Radius / elevation */
  --lt-radius-sm: 8px;
  --lt-radius-md: 12px;
  --lt-radius-lg: 16px;
  --lt-radius-pill: 999px;
  --lt-shadow-card: 0 4px 20px rgba(44, 62, 80, 0.08);
  --lt-shadow-lg: 0 12px 40px rgba(44, 62, 80, 0.12);

  /* Semantic colors */
  --lt-color-bg: var(--light, #f8fafc);
  --lt-color-surface: var(--surface-card, #ffffff);
  --lt-color-surface-muted: var(--light-gray, #f1f5f9);
  --lt-color-text: var(--dark, #172033);
  --lt-color-text-muted: var(--gray, #64748b);
  --lt-color-border: var(--border-light, #e2e8f0);
  --lt-color-primary: var(--primary, #385e6b);
  --lt-color-primary-strong: var(--primary-dark, #2c3e50);
  --lt-color-accent: var(--accent, #f2deb9);
  --lt-color-accent-hover: var(--accent-hover, #e5d4a8);
  --lt-color-danger: var(--danger, #b91c1c);
  --lt-color-success: var(--success, #166534);

  /* Typography — échelle FLUIDE (clamp : min mobile 360px → max desktop 1280px).
     Règles : corps de texte ≥ 16px sur mobile (--lt-text-md plancher 1rem),
     inputs ≥ 16px obligatoire (zoom auto iOS), xs/sm réservés aux métadonnées
     (badges, légendes), jamais au corps de texte. */
  --lt-font-body: Inter, Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lt-font-heading: Poppins, Inter, system-ui, sans-serif;
  --lt-text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);   /* 12 → 13px */
  --lt-text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14 → 15px */
  --lt-text-md: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);      /* 16 → 17px */
  --lt-text-lg: clamp(1.125rem, 1.07rem + 0.35vw, 1.25rem);   /* 18 → 20px */
  --lt-text-xl: clamp(1.375rem, 1.27rem + 0.6vw, 1.625rem);   /* 22 → 26px */
  --lt-text-2xl: clamp(1.625rem, 1.45rem + 1vw, 2.125rem);    /* 26 → 34px */
  --lt-text-3xl: clamp(2rem, 1.7rem + 1.7vw, 2.875rem);       /* 32 → 46px */
  --lt-leading-body: 1.6;     /* corps : ≥ 1.5 imposé */
  --lt-leading-heading: 1.2;
  --lt-measure: 70ch;         /* longueur de ligne max du texte courant */

  /* Z-index — échelle unique (interdiction des 999/9999 ad hoc) */
  --lt-z-below: -1;
  --lt-z-base: 0;
  --lt-z-raised: 10;      /* cartes survolées, badges */
  --lt-z-dropdown: 100;   /* menus déroulants, autocomplétions */
  --lt-z-sticky: 200;     /* CTA sticky, barres d'outils collantes */
  --lt-z-header: 300;     /* header fixe */
  --lt-z-bottom-nav: 400; /* bottom nav mobile */
  --lt-z-overlay: 500;    /* voiles, drawers, bottom sheets */
  --lt-z-modal: 600;      /* modales, lightbox */
  --lt-z-toast: 700;      /* notifications */

  /* Safe areas iOS (encoche / barre home) — à additionner sur fixed/sticky */
  --lt-safe-top: env(safe-area-inset-top, 0px);
  --lt-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Components */
  --lt-control-height: 44px;
  --lt-control-radius: var(--lt-radius-sm);
  --lt-card-radius: var(--lt-radius-md);
  --lt-card-border: 1px solid var(--lt-color-border);
}

[data-theme="dark"] {
  --lt-color-bg: var(--light, #0f1318);
  --lt-color-surface: var(--surface-card, #1a2028);
  --lt-color-surface-muted: var(--surface-muted, #141a22);
  --lt-color-text: #f1f5fb;
  --lt-color-text-muted: #cbd5e1;
  --lt-color-border: var(--border-light, rgba(255, 255, 255, 0.1));
  --lt-dark-page-bg: #0b0f14;
  --lt-dark-page-bg-deep: #080a0d;
  --lt-dark-surface: #1a2028;
  --lt-dark-surface-muted: #141a22;
  --lt-dark-surface-elevated: #1e2635;
  --lt-dark-text: #f1f5fb;
  --lt-dark-text-soft: #cbd5e1;
  --lt-dark-text-muted: #d1dae6;
  --lt-dark-text-subtle: #8896ab;
  --lt-dark-link-muted: #b8c0cc;
  --lt-dark-danger: #f87171;
  --lt-dark-danger-hover: #fca5a5;
  --lt-dark-info: #7dd3fc;
  --lt-dark-success-bg: rgba(34, 197, 94, 0.12);
  --lt-dark-success-text: #bbf7d0;
  --lt-dark-error-bg: rgba(248, 113, 113, 0.12);
  --lt-dark-error-text: #fecaca;
  --lt-dark-white-line: rgba(255, 255, 255, 0.06);
  --lt-dark-white-line-strong: rgba(255, 255, 255, 0.14);
  --lt-dark-white-surface: rgba(255, 255, 255, 0.08);
  --lt-dark-white-surface-hover: rgba(255, 255, 255, 0.14);
  --lt-dark-white-surface-strong: rgba(255, 255, 255, 0.16);
  --lt-dark-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --lt-dark-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.48);
  --lt-dark-shadow-header: 0 4px 24px rgba(0, 0, 0, 0.35);
}

body.lt-accueil-gl,
body.lt-acheter-gl {
  --lt-color-bg: var(--gl-ocean-0, #050a1a);
  --lt-color-surface: var(--gl-ocean-1, #0a1628);
  --lt-color-surface-muted: var(--gl-ocean-2, #0d1f3c);
  --lt-color-text: #e8e0d0;
  --lt-color-text-muted: rgba(232, 224, 208, 0.55);
  --lt-color-border: rgba(212, 160, 23, 0.18);
  --lt-color-accent: var(--gl-gold, #d4a017);
  --lt-color-accent-hover: var(--gl-gold-l, #f0c842);
  --lt-premium-ink: #050a1a;
  --lt-premium-text: #e8e0d0;
  --lt-premium-text-soft: rgba(232, 224, 208, 0.55);
  --lt-premium-text-muted: rgba(232, 224, 208, 0.45);
  --lt-premium-text-faint: rgba(232, 224, 208, 0.35);
  --lt-premium-text-disabled: rgba(232, 224, 208, 0.25);
  --lt-premium-gold-glow: rgba(212, 160, 23, 0.45);
  --lt-premium-gold-title-glow: rgba(212, 160, 23, 0.65);
  --lt-premium-gold-card-glow: rgba(212, 160, 23, 0.22);
  --lt-premium-gold-card-haze: rgba(212, 160, 23, 0.1);
  --lt-premium-gold-shadow: rgba(212, 160, 23, 0.24);
  --lt-premium-gold-text-soft: rgba(212, 160, 23, 0.7);
  --lt-premium-gold-grid: rgba(212, 160, 23, 0.04);
  --lt-premium-gold-grid-soft: rgba(212, 160, 23, 0.035);
  --lt-premium-gold-grid-faint: rgba(212, 160, 23, 0.025);
  --lt-premium-gold-wash: rgba(212, 160, 23, 0.06);
  --lt-premium-gold-wash-medium: rgba(212, 160, 23, 0.055);
  --lt-premium-gold-line-subtle: rgba(212, 160, 23, 0.07);
  --lt-premium-gold-line-muted: rgba(212, 160, 23, 0.12);
  --lt-premium-gold-line-soft: rgba(212, 160, 23, 0.14);
  --lt-premium-gold-line-promo: rgba(212, 160, 23, 0.16);
  --lt-premium-gold-line: rgba(212, 160, 23, 0.18);
  --lt-premium-gold-line-control: rgba(212, 160, 23, 0.2);
  --lt-premium-gold-line-card: rgba(212, 160, 23, 0.22);
  --lt-premium-gold-line-medium: rgba(212, 160, 23, 0.25);
  --lt-premium-gold-line-strong: rgba(212, 160, 23, 0.38);
  --lt-premium-gold-scrollbar: rgba(212, 160, 23, 0.4);
  --lt-premium-gold-line-emphasis: rgba(212, 160, 23, 0.42);
  --lt-premium-gold-line-hover: rgba(212, 160, 23, 0.46);
  --lt-premium-gold-line-focus: rgba(212, 160, 23, 0.55);
  --lt-premium-gold-surface: rgba(212, 160, 23, 0.08);
  --lt-premium-gold-surface-strong: rgba(212, 160, 23, 0.16);
  --lt-premium-gold-focus: rgba(212, 160, 23, 0.12);
  --lt-font-heading: Cinzel, Poppins, serif;
}