/* tokens.css - Source unique des tokens de marque (monjiujitsu.com)
   Voir DESIGN.md. Aucune couleur brute dans les composants : tout passe par ces variables.
   ETAT : couleurs en GRAYSCALE / TBD (Gabriel n'a pas tranche). */

:root {
  /* ----- COULEUR DE MARQUE - terreux/nature (decide par Gabriel 2026-06-20) ---
     Direction : beige / kaki / brun, nature/bois/foret + touche classique
     (grec/romain, solide). Contraste AA re-verifie apres le swap. ------------ */
  --brand: 28 26% 22%;             /* brun espresso - sections sombres / CTA (solide) */
  --brand-foreground: 40 33% 97%;  /* blanc chaud */
  --accent: 30 40% 36%;            /* bronze/terre - le UN accent (souligne, liens, icones) */
  --accent-foreground: 40 33% 97%;
  --gold: 36 42% 59%;              /* or premium, RESERVE aux blocs sombres (forfait/CTA) ; AA 4.6:1 sur --brand */

  /* ----- Neutres terreux (beige clair, brun) ----- */
  --background: 40 30% 99%;        /* blanc casse chaud */
  --surface: 40 25% 96%;          /* beige clair - sections alternees */
  --foreground: 28 18% 15%;       /* brun tres fonce, pas noir pur */
  --muted: 32 13% 38%;            /* brun-gris de-emphasize */
  --muted-surface: 40 22% 93%;    /* fonds de carte calmes */
  --border: 38 22% 85%;           /* bordures chaudes */

  /* ----- Typographie ----- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-classical: "Cinzel", Georgia, "Times New Roman", serif;  /* accent grec/romain (logo-mot + sur-titres) */

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.25rem;
  --text-hero: clamp(2.5rem, 6vw, 4.25rem);

  /* ----- Espacement ----- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ----- Rayons ----- */
  --radius-sm: 0.375rem;
  --radius: 0.625rem;
  --radius-lg: 1rem;

  /* ----- Ombres (deux-parties : ambiante + directe) ----- */
  --shadow-sm: 0 1px 2px hsl(220 16% 12% / 0.04), 0 1px 3px hsl(220 16% 12% / 0.06);
  --shadow-md: 0 4px 12px hsl(220 16% 12% / 0.06), 0 2px 4px hsl(220 16% 12% / 0.08);
  --shadow-lg: 0 12px 32px hsl(220 16% 12% / 0.10), 0 4px 8px hsl(220 16% 12% / 0.06);

  /* ----- Layout ----- */
  --container: 1200px;
  --measure: 68ch;

  /* ----- Motion ----- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-micro: 140ms;
  --dur-std: 240ms;
  --dur-lg: 480ms;

  /* ----- Etats semantiques (messages de formulaire : succes / erreur) -----
     Tons chauds compatibles avec la palette terreux. AA verifie par calcul sur
     --background (succes 5.9:1, danger 5.8:1) ET --surface (>= 5.4:1). */
  --success: 145 45% 30%;   /* vert fonce - confirmation */
  --danger: 4 62% 44%;      /* rouge brique chaud - erreur */
}