/* ══════════════════════════════════════════════════════════════
   DAR HIJAMA BRUSSEL — TOKENS.CSS
   Source de vérité unique du design system.
   Importé en PREMIER par main.css et par chaque page.
   Ne jamais mettre de valeur en dur ailleurs que ici.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ═══ BRAND — Charte officielle ═══ */
  --gold: #c7ab7d;
  --gold-deep: #90815c;
  --gold-soft: #e8d9bd;
  --gold-whisper: #f5ecd9;

  /* ═══ NEUTRALS — Profondeur dramatique ═══ */
  --ink-900: #0a0a0a;
  --ink-800: #141310;
  --ink-700: #1f1d18;
  --ink-600: #2a2822;
  --ink-500: #4a463e;
  --ink-400: #6b6658;
  --ink-300: #8a8578;
  --ink-200: #b8b4a8;
  --ink-100: #d8d4c9;
  --bone-100: #f0ebe0;
  --bone-200: #ebe5d6;
  --paper: #f7f3e9;
  --cream: #faf7f0;
  --white: #ffffff;

  /* ═══ GRADIENTS ═══ */
  --g-gold: linear-gradient(135deg, #c7ab7d 0%, #90815c 100%);
  --g-gold-soft: linear-gradient(135deg, #e8d9bd 0%, #c7ab7d 100%);
  --g-dark: linear-gradient(180deg, #0a0a0a 0%, #141310 100%);
  --g-editorial: linear-gradient(180deg, #faf7f0 0%, #ebe5d6 100%);

  /* ═══ TYPOGRAPHY — Familles ═══ */
  --f-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --f-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --f-mark: 'Bebas Neue', sans-serif;

  /* ═══ TYPOGRAPHIE — Échelle fluide (clamp unique par niveau) ═══
     UN seul clamp par niveau = taille identique sur toutes les pages.
     Pas d'override par breakpoint : clamp couvre mobile→desktop.     */
  --fs-display: clamp(56px, 7vw, 104px);   /* hero XXL                  */
  --fs-h1:      clamp(42px, 7.5vw, 72px);  /* titre principal de page   */
  --fs-h2:      clamp(32px, 4.5vw, 60px);  /* titre de section          */
  --fs-h3:      clamp(22px, 2.5vw, 32px);  /* titre de carte / bloc     */
  --fs-h4:      clamp(16px, 1.5vw, 20px);  /* sous-titre / label fort   */

  /* ═══ SPACING — Base 4px ═══ */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-28: 112px;
  --s-32: 128px; --s-40: 160px; --s-48: 192px;

  /* ═══ MOTION ═══ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ═══ SHADOWS ═══ */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.06), 0 1px 3px rgba(10, 10, 10, 0.04);
  --shadow-lg: 0 16px 40px -12px rgba(10, 10, 10, 0.12), 0 4px 12px rgba(10, 10, 10, 0.05);
  --shadow-xl: 0 30px 80px -20px rgba(10, 10, 10, 0.3), 0 8px 24px -4px rgba(10, 10, 10, 0.08);
  --shadow-gold: 0 20px 50px -12px rgba(199, 171, 125, 0.4);
  --shadow-glow: 0 0 0 1px rgba(199, 171, 125, 0.2), 0 8px 24px rgba(199, 171, 125, 0.15);

  /* ═══ CONTAINER ═══ */
  --container-max: 1320px;
  --container-narrow: 980px;
  --container-tight: 720px;

  /* ═══ RADII ═══ */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;
  --r-xl: 28px; --r-2xl: 40px; --r-full: 999px;

  /* ═══ BREAKPOINTS — Référence pour l'audit ═══ */
  --bp-mobile:  767px;
  --bp-tablet:  1100px;
  --bp-desktop: 1440px;
}