/* ========================================
   VARIABLES / DESIGN TOKENS - STYLE ÉDITORIAL
   ======================================== */

:root {
  /* ---- COULEURS PRINCIPALES ---- */
  --color-black: #0a0a0a;
  --color-black-soft: #1a1a1a;
  --color-cream: #f5f3f0;
  --color-cream-dark: #e8e5e0;
  --color-cream-warm: #f0ede8;
  --color-grey: #8a8a8a;
  --color-grey-dark: #4a4a4a;
  --color-grey-warm: #a8a098;
  --cream: #EDE6D5;
  --ink: #0F0F0F;
  
  /* Accents éditoriaux */
  --color-accent-primary: #d4b896;     /* Beige doré */
  --color-accent-secondary: #9b8b7a;   /* Taupe */
  --color-accent-tertiary: #6b5b4f;    /* Brun chaud */
  
  /* ---- TYPOGRAPHIES ---- */
  --font-display: 'Anton', sans-serif;           /* Gros titres impact */
  --font-heading: 'Oswald', sans-serif;         /* Sous-titres */
  --font-body: 'Inter', sans-serif;             /* Texte courant */
  --font-mono: 'JetBrains Mono', monospace;     /* Détails techniques */
  --font-alt: 'Space Grotesk', sans-serif;      /* Alternative moderne */
  
  /* ---- TAILLES TYPOGRAPHIQUES ---- */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --text-7xl: 4.5rem;     /* 72px */
  --text-8xl: 6rem;       /* 96px */
  --text-9xl: 8rem;       /* 128px */
  
  /* ---- ESPACEMENTS ---- */
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-32: 8rem;       /* 128px */
  
  /* ---- LAYOUT ---- */
  --container-max: 1400px;
  --container-padding: var(--space-6);
  --section-padding: var(--space-20);
  --section-padding-mobile: var(--space-12);
  
  /* ---- BORDURES & RAYONS ---- */
  --border-width: 1px;
  --border-width-thick: 2px;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;
  
  /* ---- ANIMATIONS ---- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ---- OPACITÉS ---- */
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  
  /* ---- Z-INDEX ---- */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;
  
  /* ---- BREAKPOINTS (pour media queries) ---- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
  
  --grain-opacity: 0.3; /* Augmentez cette valeur */
  --grain-size: 120px;
}