/* =============================================================================
   LINGUA LP — DESIGN TOKENS  (source de vérité des valeurs visuelles)
   -----------------------------------------------------------------------------
   Règle : AUCUNE valeur en dur ailleurs. Toute couleur/espacement/rayon/typo
   passe par une variable définie ici (cf. CONVENTIONS.md §8, design-system.md).
   Nommage par RÔLE (danger, pas "rouge") → thème changeable sans mentir.
   ⚠️ v0 PLACEHOLDER : palette sobre par défaut, à ajuster avec le retour de
   l'enseignante. Changer une valeur ici = tout le produit se met à jour.
   ========================================================================== */

:root {
  /* --- Couleurs de marque (charte Lucie, prélevées sur son logo) --------- */
  --color-primary:          #2F4E6F;   /* navy — fond pavé 3 du logo, action principale */
  --color-primary-hover:    #26405C;
  --color-primary-contrast: #FFFFFF;   /* texte sur fond primary */
  --color-primary-soft:     #EAF0F6;   /* fond très clair (états, surlignage) */

  --color-secondary:        #F0D562;   /* moutarde/or — fond pavé 4 du logo, accent chaleureux */
  --color-secondary-hover:  #B8942E;   /* or foncé — hover + texte lisible sur fond clair */
  --color-secondary-contrast:#1E2A38;  /* texte navy foncé sur moutarde (lisibilité) */
  --color-secondary-soft:    #FBF3D2;  /* pâle doré (fonds de badges/états) */

  /* --- Couleurs sémantiques (états) ------------------------------------- */
  --color-success:      #15803D;   --color-success-soft: #E7F6EC;
  --color-warning:      #B45309;   --color-warning-soft: #FBF0E0;
  --color-danger:       #DC2626;   --color-danger-soft:  #FCECEC;
  --color-info:         #2563EB;   --color-info-soft:    #E8F0FE;

  /* --- Neutres / surfaces (gris légèrement chauds) ---------------------- */
  --color-background:   #F5F5F3;   /* fond d'app (gris chaud doux) */
  --color-surface:      #FFFFFF;   /* cartes, panneaux */
  --color-surface-alt:  #EFEEEA;   /* zones alternées, hover discret */
  --color-border:       #E3E1DB;   /* bordures, séparateurs */
  --color-overlay:      rgba(30, 42, 56, .45); /* fond de modale (teinté navy) */

  /* --- Texte ------------------------------------------------------------ */
  --color-text-strong:  #1E2A38;   /* titres (charbon bleuté, rappel navy) */
  --color-text:         #3F4A57;   /* corps */
  --color-text-muted:   #6B7280;   /* secondaire, légendes */
  --color-text-on-primary: #FFFFFF;
  --color-text-link:    var(--color-primary);

  /* --- Typographie ------------------------------------------------------ */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-md:   1rem;       /* 16 — base */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* --- Espacements (base 4px) ------------------------------------------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* --- Rayons ----------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* --- Ombres / élévation ---------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 3px rgba(17, 24, 39, .08);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, .08);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, .14);

  /* --- Z-index (ordre : dropdown < overlay < modal < toast) ------------ */
  --z-dropdown: 1000;
  --z-overlay:  1100;
  --z-modal:    1200;
  --z-toast:    1300;

  /* --- Animation -------------------------------------------------------- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
}