/* ==========================================================================
   variables.css - Design tokens (couleurs, typographies, espacements)
   ========================================================================== */

:root {
  /* --- Palette de couleurs (noir + jaune/orange sur base beige) --- */
  --color-bg: #F7F5F0;          /* Fond principal beige clair */
  --color-bg-alt: #EFEAE1;      /* Fond secondaire, cartes, sections alternees */
  --color-text: #18181B;        /* Titres, corps (noir doux) */
  --color-text-soft: #71717A;   /* Sous-titres, legendes (gris) */
  --color-accent: #E8A33D;      /* Accent unique, ambre (boutons, icones sur fond clair) */
  --color-accent-hover: #C9862A;/* Hover accent (ambre plus fonce) */
  --color-accent-light: #F2C879;/* Jaune clair : accent texte/detail sur fonds sombres */
  --color-accent-text: #E8A33D; /* Accent utilise comme texte sur fond clair */
  --color-accent-text-hover: #C9862A; /* Hover/etat actif de l'accent texte */
  --color-dark: #18181B;        /* Sections sombres (hero, footer) : noir doux */

  /* Nuances derivees */
  --color-dark-soft: #3F3F46;
  --color-border: #E2DACB;
  --color-accent-tint: rgba(232, 163, 61, 0.10);
  --color-overlay: rgba(24, 24, 27, 0.55);

  /* Etat de succes (formulaires, validations) */
  --color-success: #2CB67D;
  --color-success-tint: rgba(44, 182, 125, 0.10);

  /* Etat d'erreur (formulaires) */
  --color-error: #B3392A;
  --color-error-tint: rgba(179, 57, 42, 0.08);

  /* Texte de substitution (placeholder de champ de formulaire) */
  --color-placeholder: #A1A1AA;

  /* --- Typographies --- */
  --font-heading: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Tailles de police fluides */
  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: clamp(1.25rem, 2.5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 4vw, 2.25rem);
  --fs-2xl: clamp(2rem, 5.5vw, 3.25rem);
  --fs-3xl: clamp(2.5rem, 7vw, 4.5rem);

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

  /* Letter-spacing pour etiquettes */
  --tracking-wide: 0.14em;
  --tracking-wider: 0.22em;

  /* --- Espacements --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* --- Layout --- */
  --container-max: 1240px;
  --container-narrow: 820px;
  --header-height: 78px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* --- Paliers responsive de reference (CSS ne permet pas d'interpoler
     une variable dans une media query : ces valeurs sont documentees ici
     et doivent etre reprises telles quelles dans le code) ---
     1024px : bascule de la navigation en menu mobile + reflow des grilles
              de contenu (2 colonnes -> 1, cartes 3 -> 2/1).
     640-768px : empilement complet en une colonne, boutons pleine largeur.
     520px et en dessous : ajustements fins ponctuels (ex. formulaire). */

  /* --- Rayons et ombres --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.05);
  --shadow-md: 0 8px 28px rgba(26, 26, 26, 0.08);
  --shadow-lg: 0 20px 50px rgba(26, 26, 26, 0.12);

  /* --- Transitions --- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-index --- */
  --z-header: 1000;
  --z-overlay: 900;
  --z-float: 850;
  --z-menu: 1100;
  --z-menu-toggle: 1200;
}