/* ============================================
   RADAR Design System — Variables
   ============================================ */

:root {
  /* === Couleurs tirées du logo === */
  --color-olive: #8A8A3D;
  --color-olive-dark: #6E6E2F;
  --color-olive-darker: #555525;
  --color-olive-light: #A8A85A;
  --color-olive-pale: #D4D49E;

  --color-brown: #3D2E1F;
  --color-brown-light: #5A4838;

  --color-cream: #EBE3CF;
  --color-cream-light: #F5F0E1;

  --color-bg: #FAFAF5;
  --color-surface: #FFFFFF;

  --color-text: #2D2419;
  --color-text-muted: #6B5E4F;
  --color-text-light: #9A8E7D;

  --color-border: #D8CFB8;
  --color-border-light: #E8E0CC;

  --color-success: #5A7D3A;
  --color-warning: #C9941F;
  --color-danger: #B54838;

  /* === Typographie === */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.25rem;     /* 20px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-3xl: 1.875rem;   /* 30px */
  --fs-4xl: 2.25rem;    /* 36px */
  --fs-5xl: 3rem;       /* 48px */
  --fs-6xl: 3.75rem;    /* 60px */
  --fs-7xl: 4.5rem;     /* 72px */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

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

  /* === Espacements (échelle 4px) === */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* === Rayons de bordure === */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* === Ombres === */
  --shadow-sm: 0 1px 2px rgba(45, 36, 25, 0.05);
  --shadow: 0 2px 8px rgba(45, 36, 25, 0.08);
  --shadow-md: 0 4px 16px rgba(45, 36, 25, 0.10);
  --shadow-lg: 0 12px 32px rgba(45, 36, 25, 0.12);
  --shadow-xl: 0 24px 48px rgba(45, 36, 25, 0.16);

  /* === Transitions === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* === Layout === */
  --container-max: 1240px;
  --container-narrow: 880px;
  --header-height: 80px;

  /* === Z-index === */
  --z-base: 1;
  --z-dropdown: 50;
  --z-header: 100;
  --z-modal: 200;
  --z-toast: 300;
}