/* ============================================================
   L'Atelier du FLE — Design Tokens
   Pédagogie • confiance • progression • élégance
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Allura&family=Barlow+Condensed:wght@400;500;600;700&family=Mulish:wght@300;400;500;600;700&display=swap');

:root {
  /* --- Couleurs de marque ---------------------------------- */
  --color-halcyon-green:   #A2AAA3;
  --color-silvermist:      #B0B8B2;   /* sauge principal — validé cliente */
  --color-softened-green:  #B7B9A6;
  --color-clary-sage:      #ACAD97;
  --color-greek-villa:     #F6F2EC;
  --color-grecian-ivory:   #D9CFBE;
  --color-roycroft-vellum: #E8D9BD;
  --color-likeable-sand:   #C2AA98;
  --color-peach-01:        #E3B09A;
  --color-coral:           #DFA58D;

  /* --- Couleurs sémantiques -------------------------------- */
  --color-background:    #F6F2EC;
  --color-surface:       #FFFFFF;
  --color-surface-soft:  #FBF8F2;
  --color-surface-warm:  #E8D9BD;
  --color-surface-sage:  #ECECE3;

  --color-text:          #1F1F1D;
  --color-text-muted:    #5F625B;
  --color-text-inverse:  #FFFFFF;

  --color-border:        #D9CFBE;
  --color-border-soft:   #E8E0D2;

  --color-primary:       #B0B8B2;
  --color-primary-hover: #9EA6A0;
  --color-accent:        #DFA58D;
  --color-accent-hover:  #CF9278;

  /* --- Typographies --------------------------------------- */
  --font-signature: 'Allura', 'Pinyon Script', cursive;
  --font-display:   'Barlow Condensed', 'Oswald', sans-serif;
  --font-body:      'Mulish', 'Nunito Sans', system-ui, sans-serif;

  /* --- Rayons --------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* --- Ombres --------------------------------------------- */
  --shadow-soft:  0 12px 35px rgba(31,31,29,.08);
  --shadow-card:  0 8px  24px rgba(31,31,29,.06);
  --shadow-hover: 0 14px 40px rgba(31,31,29,.10);
  --focus-ring:   0 0 0 3px rgba(176,184,178,.32);

  /* --- Motion --------------------------------------------- */
  --ease-soft: cubic-bezier(.4,.0,.2,1);
  --dur-fast:  160ms;
  --dur-med:   240ms;
}