/* ============================================================
   VARIABLES.CSS — Les Sondeurs
   Design tokens extraits du logo et validés en Étape 1
   Charte : "Clean Teal Intelligence"
   ============================================================ */

:root {

  /* ──────────────────────────────────────────
     COULEURS — Primaires (Teal logo #00A8C8)
  ────────────────────────────────────────── */
  --color-primary:        #00A8C8;   /* Teal bulle logo — couleur signature */
  --color-primary-hover:  #0090AD;   /* Hover boutons primaires */
  --color-primary-dark:   #006B82;   /* Teal tagline logo — sections foncées */
  --color-primary-xdark:  #004E60;   /* Header / footer / accents très foncés */
  --color-primary-light:  #E0F7FC;   /* Fond badges, highlights légers */
  --color-primary-xlight: #F0FBFD;   /* Fond sections alternées */

  /* Gamme teal complète */
  --color-teal-50:   #F0FBFD;
  --color-teal-100:  #E0F7FC;
  --color-teal-200:  #B3ECF7;
  --color-teal-300:  #7DD8EE;
  --color-teal-400:  #00A8C8;
  --color-teal-500:  #0090AD;
  --color-teal-600:  #006B82;
  --color-teal-700:  #004E60;
  --color-teal-800:  #003040;
  --color-teal-900:  #001820;

  /* ──────────────────────────────────────────
     COULEURS — Textes
  ────────────────────────────────────────── */
  --color-text-primary:    #1A2F3A;  /* Titres, texte fort — gris bleu foncé */
  --color-text-secondary:  #5B7A8A;  /* Corps de texte courant */
  --color-text-muted:      #8A9BAD;  /* Gris logo — labels, captions, placeholder */
  --color-text-inverse:    #FFFFFF;  /* Texte sur fonds colorés foncés */
  --color-text-link:       #00A8C8;  /* Liens */
  --color-text-link-hover: #006B82;  /* Hover liens */

  /* ──────────────────────────────────────────
     COULEURS — Fonds & Surfaces
  ────────────────────────────────────────── */
  --color-bg:              #F8FAFB;  /* Fond page principal — blanc ivoire */
  --color-surface:         #FFFFFF;  /* Cards, modals, nav — blanc pur */
  --color-surface-alt:     #F0FBFD;  /* Sections alternées — teal très léger */
  --color-surface-dark:    #1A2F3A;  /* Sections sombres (footer, CTA band) */
  --color-surface-xdark:   #0D1E28;  /* Footer très foncé */

  /* ──────────────────────────────────────────
     COULEURS — Bordures
  ────────────────────────────────────────── */
  --color-border:          #DCE9EF;  /* Bordures fines standard */
  --color-border-strong:   #B3D4DF;  /* Bordures accentuées */
  --color-border-focus:    #00A8C8;  /* Focus ring accessibilité */

  /* ──────────────────────────────────────────
     COULEURS — Sémantiques
  ────────────────────────────────────────── */
  --color-success:         #0D9E75;
  --color-success-light:   #E6F7F2;
  --color-warning:         #F0A500;
  --color-warning-light:   #FFF8E6;
  --color-error:           #DC2626;
  --color-error-light:     #FEF2F2;
  --color-info:            #00A8C8;
  --color-info-light:      #E0F7FC;

  /* ──────────────────────────────────────────
     TYPOGRAPHIE
  ────────────────────────────────────────── */

  /* Familles */
  --font-title: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:  'Space Mono', 'Courier New', Courier, monospace;

  /* Tailles — Échelle typographique */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.125rem;    /* 18px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  1.875rem;    /* 30px */
  --text-3xl:  2.25rem;     /* 36px */
  --text-4xl:  3rem;        /* 48px */
  --text-5xl:  3.75rem;     /* 60px */
  --text-6xl:  4.5rem;      /* 72px */

  /* Hauteurs de ligne */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   2;

  /* Graisses */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  /* ──────────────────────────────────────────
     ESPACEMENT — Système 4/8pt
  ────────────────────────────────────────── */
  --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 */
  --space-32:  8rem;      /* 128px */

  /* ──────────────────────────────────────────
     ARRONDIS (Border radius)
  ────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ──────────────────────────────────────────
     OMBRES
  ────────────────────────────────────────── */
  --shadow-xs:    0 1px 3px rgba(0, 107, 130, 0.04);
  --shadow-sm:    0 2px 8px rgba(0, 107, 130, 0.06);
  --shadow-md:    0 6px 24px rgba(0, 107, 130, 0.10);
  --shadow-lg:    0 16px 48px rgba(0, 107, 130, 0.13);
  --shadow-xl:    0 24px 80px rgba(0, 107, 130, 0.16);
  --shadow-teal:  0 4px 20px rgba(0, 168, 200, 0.30);
  --shadow-teal-lg: 0 8px 40px rgba(0, 168, 200, 0.35);

  /* ──────────────────────────────────────────
     TRANSITIONS
  ────────────────────────────────────────── */
  --transition-fast:    all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition:         all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce:  all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ──────────────────────────────────────────
     LAYOUT
  ────────────────────────────────────────── */
  --container-max:    1280px;
  --container-md:     1024px;
  --container-sm:     768px;
  --header-height:    72px;
  --header-height-sm: 60px;

  /* Z-index */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}