/* ============================================================
   VARIABLES.CSS — Studio Épure
   Agent 1 — L'Extracteur | Labo Digital
   Thème : Dark Minéral Premium (Anthracite, Grège, Laiton)
   ============================================================ */

:root {
  /* --- COULEURS : THÈME DARK MINÉRAL --- */
  /* Fonds (Chauds et profonds) */
  --color-bg-base: #121110;       /* Noir très légèrement brun/taupe */
  --color-bg-surface: #1a1917;    /* Anthracite chaud pour les cartes */
  
  /* Textes */
  --color-text-main: #a8a39d;     /* Gris sable/grège pour le texte lisible */
  --color-text-inverse: #f2efe9;  /* Blanc cassé/albâtre pour les titres */
  
  /* Accents (Laiton / Or vieilli) */
  --color-primary: #c8a97e;       /* Laiton élégant */
  --color-primary-dark: #b08f60;  /* Laiton assombri pour les survols (hover) */
  
  /* Bordures */
  --color-border-light: rgba(242, 239, 233, 0.08); /* Ligne discrète sable */

  /* --- TYPOGRAPHIE --- */
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* Tailles fluides (Clamp pour le responsive) recalibrées "Luxe" */
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  
  /* Tailles de titres réduites et élégantes */
  --font-size-xl: clamp(1.5rem, 1vw + 1.25rem, 1.8rem);
  --font-size-3xl: clamp(2rem, 2vw + 1.5rem, 2.8rem);
  --font-size-4xl: clamp(2.5rem, 3vw + 1.5rem, 3.5rem);
  --font-size-5xl: clamp(3rem, 4vw + 1.5rem, 4.5rem);
  --font-display-custom: clamp(3.2rem, 5vw + 1rem, 5.5rem); /* C'est lui qui gère le Hero ! */
  /* Graisses */
  --font-weight-medium: 400;
  --font-weight-semibold: 500; /* Allégé pour faire plus "Luxe" */
  --font-weight-bold: 600;     /* Allégé au lieu de 700 ou 800 */

  /* --- ESPACEMENTS (Rythme de 8px) --- */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 2rem;     /* 32px */
  --spacing-xl: 3rem;     /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
  --spacing-5xl: clamp(5rem, 10vw, 10rem); /* Espacement fluide inter-sections */
  
  --spacing-container-lg: 1200px; /* Largeur max du site */

  /* --- ARRONDIS (Border Radius) --- */
  /* On réduit légèrement les arrondis pour un look plus "Archi/Carré" tout en restant doux */
  --radius-md: 4px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --radius-full: 9999px;

  /* --- ANIMATIONS & TRANSITIONS --- */
  --transition-duration-default: 0.3s;
  --transition-timing-default: cubic-bezier(0.16, 1, 0.3, 1); /* Ease-out très doux */
}