/* ============================================
   MADE Institut — Design Tokens
   Palette dérivée de #7F4F47 (warm brown)
   ============================================ */

:root {
  /* ── Couleurs Principales ── */
  --primary: #7F4F47;
  --primary-light: #A67C75;
  --primary-dark: #5C3A34;
  --primary-rgb: 127, 79, 71;

  /* ── Accents ── */
  --secondary: #D4A574;
  --accent: #E8C9A0;
  --gold: #C9A96E;

  /* ── Neutres chauds ── */
  --cream: #FDF6F0;
  --bg: #FFFAF5;
  --bg-alt: #F5EDE5;
  --dark: #2C1810;
  --white: #FEFCFA;

  /* ── Texte ── */
  --text: #3D2B24;
  --text-light: #8B7355;
  --text-muted: #B0A090;
  --text-on-dark: #F5EDE5;

  /* ── Bordures ── */
  --border: #E8DDD5;
  --border-light: #F0E8E0;

  /* ── Fonctionnel ── */
  --success: #4A7C59;
  --error: #C0392B;
  --warning: #D4A039;
  --info: #5B7FA5;

  /* ── Typographie ── */
  --font-heading: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Helvetica Neue', 'Arial', sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Tailles fluides (mobile → desktop) */
  --fs-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-h1: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.5vw + 0.25rem, 1.35rem);
  --fs-body: clamp(0.9375rem, 1vw + 0.25rem, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-label: 0.75rem;

  /* ── Espacement ── */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: clamp(4rem, 8vw, 8rem);

  /* ── Layout ── */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;
  --nav-height: 72px;
  --nav-height-mobile: 60px;

  /* ── Bordures & Ombres ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(44, 24, 16, 0.06);
  --shadow-md: 0 4px 12px rgba(44, 24, 16, 0.08);
  --shadow-lg: 0 8px 30px rgba(44, 24, 16, 0.12);
  --shadow-xl: 0 16px 50px rgba(44, 24, 16, 0.16);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-fast: 200ms var(--ease-out);
  --transition-base: 350ms var(--ease-out);
  --transition-slow: 600ms var(--ease-in-out);

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}