/**
 * variables.css
 * Tokens de design : couleurs, typographies, espacements, animations
 * Dépend de : rien
 * Utilisé par : tous les autres fichiers CSS
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,600;1,9..144,700&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* ── Couleurs principales ── */
  --terracotta:       #C4622D;
  --terracotta-light: #E07B47;
  --terracotta-dark:  #9A4A1F;
  --cream:            #FAF6F0;
  --cream-dark:       #F0E8DC;
  --sand:             #E8D5B7;
  --brown:            #3D2314;
  --brown-mid:        #6B3F24;
  --gold:             #C9963C;

  /* ── Couleurs texte ── */
  --text-dark:  #3D2B1F;
  --text-mid:   #5C3D25;
  --text-light: #9A7560;
  --white:      #FDFAF7;

  /* ── Typographies ── */
  --font-body:    'Inter', sans-serif;
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-logo:    'Fraunces', serif;
  --font-classic: 'Cormorant Garamond', Georgia, serif;

  /* ── Espacements ── */
  --spacing-xs:  8px;
  --spacing-sm:  16px;
  --spacing-md:  24px;
  --spacing-lg:  48px;
  --spacing-xl:  72px;
  --spacing-2xl: 100px;

  /* ── Rayons ── */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-xl:  24px;
  --radius-pill: 50px;

  /* ── Ombres ── */
  --shadow-sm:  0 2px 8px rgba(61,35,20,0.08);
  --shadow-md:  0 8px 24px rgba(61,35,20,0.12);
  --shadow-lg:  0 20px 60px rgba(61,35,20,0.14);

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow:   0.3s ease;
}