/* =====================================================================
   Design tokens — Présentation HDR Wafa BEN HASSEN
   Direction : d'après le design Figma "HDR Hero" (aesthetic cyber)
   Noir · Blanc · Néon rouge · Ardoise — Unbounded + Wix Madefor Text
   ===================================================================== */
:root {
  /* ---- Couleurs de base (Figma) ---- */
  --black:      #000000;
  --charcoal:   #202327;   /* boîte logo / surfaces sombres */
  --charcoal-2: #16181B;
  --charcoal-3: #0C0D0F;
  --slate:      #677178;   /* section chapitres */
  --slate-d:    #555E64;
  --slate-l:    #7C868C;
  --white:      #FFFFFF;

  /* ---- Accent néon (dérivé du rendu 3D rouge) ---- */
  --neon:       #FF3323;
  --neon-2:     #FF5A3C;
  --neon-d:     #D6241A;
  --neon-glow:  rgba(255, 51, 35, 0.55);
  --neon-soft:  rgba(255, 51, 35, 0.14);

  /* ---- Encres ---- */
  --ink:        #FFFFFF;                    /* texte principal (sur sombre) */
  --ink-soft:   rgba(255, 255, 255, 0.78);
  --muted:      rgba(255, 255, 255, 0.60);  /* texte secondaire */
  --faint:      rgba(255, 255, 255, 0.40);  /* numéros / hints */
  --ghost:      rgba(255, 255, 255, 0.24);
  --line:       rgba(255, 255, 255, 0.14);
  --line-strong:rgba(255, 255, 255, 0.28);
  --glass:      rgba(255, 255, 255, 0.06);
  --glass-2:    rgba(255, 255, 255, 0.09);

  /* ---- Surfaces & fonds ---- */
  --bg-abyss:  #000000;
  --bg-deep:   #0C0D0F;
  --bg-navy:   #16181B;    /* alias sombre (compat sections) */
  --paper:     #0C0D0F;    /* le "clair" devient sombre (site cyber) */
  --paper-2:   #16181B;
  --surface:   #202327;
  --line-dark: rgba(255,255,255,0.14);

  /* Encres "sur sombre" (compat) */
  --on-dark:       #FFFFFF;
  --on-dark-soft:  rgba(255,255,255,0.66);
  --on-dark-faint: rgba(255,255,255,0.40);

  /* Aliases néon (compat — anciens accents) */
  --petrol:    #FF3323; --petrol-d: #D6241A; --petrol-l: #FF5A3C;
  --amber:     #FF5A3C; --amber-d:  #D6241A;
  --coral:     #FF3323; --coral-d:  #D6241A;
  --sage:      #7C868C; --sage-d:   #555E64;
  --plum:      #677178; --plum-d:   #555E64;
  --navy:      #16181B; --navy-2:   #202327;
  --signal:    #FF3323; --signal-2: #FF5A3C;
  --glow-petrol: rgba(255, 51, 35, 0.55);

  /* ---- Typographie (Figma) ---- */
  --font-display: 'Unbounded', 'Arial Narrow', system-ui, sans-serif;   /* titres MAJ, Light */
  --font-body:    'Wix Madefor Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Wix Madefor Text', ui-monospace, monospace;          /* labels à fort tracking */

  /* Échelle typographique fluide (réf Figma : 80 / 52 / 28 / 24 / 18 / 14 / 12) */
  --t-hero:   clamp(2.6rem, 1.1rem + 6.5vw, 6.5rem);
  --t-h1:     clamp(2.2rem, 1.1rem + 4.6vw, 5rem);
  --t-h2:     clamp(1.6rem, 1rem + 2.6vw, 2.75rem);
  --t-h3:     clamp(1.35rem, 1.05rem + 1.2vw, 1.75rem);
  --t-card:   clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  --t-lead:   clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --t-body:   clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-small:  0.875rem;
  --t-micro:  0.75rem;

  --track-label: 0.62em;   /* labels très espacés (Figma 8.16px @ 12px) */

  /* ---- Espacement & rythme ---- */
  --space-section: clamp(5rem, 3rem + 8vw, 11rem);
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --measure:       64ch;
  --radius:        4px;     /* design très anguleux */
  --radius-lg:     8px;

  /* ---- Mouvement ---- */
  --dur-fast:   200ms;
  --dur:        450ms;
  --dur-slow:   950ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Ombres / lueurs ---- */
  --shadow-sm:  0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 40px 90px rgba(0, 0, 0, 0.65);
  --shadow-glow:0 0 34px var(--neon-glow);

  --maxw: 1440px;

  /* Image de fond du hero (rendu 3D Figma) */
  --hero-bg: url("../assets/figma/hero-bg-export.png");
}