/* ==============================================
   CSS Variables - Douces Pattes
   ============================================== */

:root {
  /* Colors */
  --primary: #1f2421;
  --text: #1f2421;
  --muted: #6b7370;
  --line: rgba(31, 36, 33, 0.12);
  --bg: #fdfcfa;
  --terracotta: #c99089;
  --warm-brown: #8b6f47;
  --soft-beige: #f5f3f0;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;
  --spacing-section: 36px;
  
  /* Border Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-full: 999px;
  
  /* Patterns */
  --pattern-opacity-light: 0.18;
  --pattern-opacity-default: 0.2;
  --pattern-opacity-medium: 0.22;
  --pattern-opacity-strong: 0.25;
  
  /* Transitions */
  --transition-fast: 200ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 600ms ease;
  
  /* Shadows */
  --shadow-sm: 0 12px 25px rgba(31, 36, 33, 0.06);
  --shadow-md: 0 14px 28px rgba(31, 36, 33, 0.06);
  --shadow-lg: 0 18px 36px rgba(31, 36, 33, 0.08);
  
  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 13px;
  --font-size-sm: 15px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  
  /* Layout */
  --container-max-width: 1080px;
  --header-max-width: 680px;
}