/* =================================================================
   TOKENS — Super Designer Design System
   Source de vérité unique : toutes les valeurs viennent d'ici.
   Tous les autres CSS n'utilisent que var(--...)

   Couleurs marquées ⚠️ = présentes dans le code mais absentes
   des variables Figma → à ajouter dans le fichier Figma aussi.
================================================================= */

:root {

  /* ─────────────────────────────────────────
     COULEURS — Fonds
  ───────────────────────────────────────── */
  --bg-hero:        #11051d;   /* ⚠️ fond violet profond hero */
  --bg-logos:       #0d111c;   /* ⚠️ fond navy section logos + footer */
  --bg-deep:        #050030;   /* ⚠️ fond le plus sombre */
  --bg-dark:        #0d1c3f;   /* = Bleu Data Figma */
  --bg-pattern:     #1f2435;   /* ⚠️ fond Big Pixels Pattern (footer) */
  --pixel-accent:   #353c53;   /* ⚠️ pixels accent du Pattern footer */

  /* ─────────────────────────────────────────
     COULEURS — Palette Or (UI pixel-art)
     Bouton principal, nav section dorée, bevel
  ───────────────────────────────────────── */
  --gold-fill:      #ffd794;   /* ⚠️ fond or */
  --gold-hi:        #fff0d9;   /* ⚠️ bevel highlight (haut/gauche) */
  --gold-shadow:    #fea13b;   /* ⚠️ bevel shadow (bas/droite) */
  --gold-outline:   #1a0f26;   /* ⚠️ contour noir/brun foncé */
  --gold-text:      #1a0f26;   /* ⚠️ texte sur fond or */

  /* ─────────────────────────────────────────
     COULEURS — Palette Teal (CTA nav)
  ───────────────────────────────────────── */
  --teal-fill:      #c0faf1;   /* ⚠️ fond teal */
  --teal-hi:        #f4fffd;   /* ⚠️ bevel highlight */
  --teal-shadow:    #15ad94;   /* ⚠️ bevel shadow */

  /* ─────────────────────────────────────────
     COULEURS — Figma variables officielles
  ───────────────────────────────────────── */
  --violet:         #340c8e;   /* Violet Orchestral */
  --violet-mid:     #624c96;   /* ⚠️ utilisé dans box-shadow nav */
  --teal-sync:      #1ae2bc;   /* Vert Sync / Turquoise Sonate */
  --green-vibrato:  #4ff180;   /* Vert Vibrato */
  --green-nocode:   #027862;   /* Vert Nocode */
  --blue-api:       #103ea9;   /* Bleu API */
  --yellow-pulse:   #f5c05c;   /* Jaune Pulse */
  --yellow-automate:#f0a10b;   /* Jaune Automate */
  --yellow-50:      #fef6e7;   /* accent-z-50 */
  --yellow-700:     #aa7208;   /* accent-z-700 */
  --orange-audit:   #fc6613;   /* Orange Audit */

  /* Neutres */
  --neutral-300:    #5c7584;
  --grey-link:      #9095a3;
  --grey-flow:      #c5cad6;
  --grey-cloud:     #ebeef5;
  --grey-whisper:   #f8f2f4;
  --black-insight:  #201221;

  /* Textes clairs (sur fonds sombres) */
  --text-light:     #fff1db;   /* ⚠️ titre hero */
  --text-on-dark:   #fff0d9;   /* ⚠️ corps hero */

  /* ─────────────────────────────────────────
     TYPOGRAPHIE — Familles
  ───────────────────────────────────────── */
  --font-heading: 'Raw Pixel', 'Press Start 2P', monospace;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'VCR OSD Mono', 'Courier New', monospace;

  /* ─────────────────────────────────────────
     TYPOGRAPHIE — Tailles (échelle Figma exacte)
  ───────────────────────────────────────── */
  --text-h1:  56px;
  --text-h2:  48px;
  --text-h3:  32px;
  --text-h4:  24px;
  --text-xl:  20px;
  --text-lg:  18px;
  --text-md:  16px;
  --text-sm:  14px;

  /* ─────────────────────────────────────────
     TYPOGRAPHIE — Poids
  ───────────────────────────────────────── */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ─────────────────────────────────────────
     TYPOGRAPHIE — Interlignage & Espacement
  ───────────────────────────────────────── */
  --lh-heading: 1;
  --lh-h1:      1.28;
  --lh-body:    1;

  --ls-h1:  6.72px; /* letter-spacing Figma H1 : 56px × 12% = 6.72px */
  --ls-h2:  4px;    /* letter-spacing Figma H2 */

  /* ─────────────────────────────────────────
     ESPACEMENTS — Grille 8px
  ───────────────────────────────────────── */
  --space-1:    8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-6:   48px;
  --space-8:   64px;    /* gap logos, gap sections */
  --space-11:  88px;    /* padding latéral nav */
  --space-15: 120px;    /* padding latéral section */
  --space-16: 128px;    /* padding top hero content */

  /* ─────────────────────────────────────────
     COMPOSANTS — Nav
  ───────────────────────────────────────── */
  --nav-radius:  16px;
  --nav-shadow:  0px 8px 24px 0px rgba(98, 76, 150, 0.24);
  --nav-delay:   0ms;   /* override par page : 2500ms sur la homepage */

  /* ─────────────────────────────────────────
     COMPOSANTS — Logos ticker
  ───────────────────────────────────────── */
  --logo-tint:   #c9a96e;   /* couleur cible pour SVG inline */
  --logo-speed:  40s;       /* durée du cycle — ↓ valeur = + rapide */

  /* ─────────────────────────────────────────
     COMPOSANTS — Section ICP (personnages)
  ───────────────────────────────────────── */
  /* Pixel Boy — cyan */
  --cyan-500:    #6ebeff;
  --cyan-100:    #c2e4ff;

  /* Ultra Color — orange */
  --orange-900:  #342312;   /* brun quasi-noir — texte & fond carte SuperDesigner */
  --orange-700:  #fe9e3a;   /* bordure & titre carte How */
  --orange-500:  #ffc15b;
  --orange-100:  #fff3da;
  --orange-50:   #fff7e7;   /* fond carte How */

  /* Impacktor — purple */
  --purple-950:  #11051d;   /* violet nuit profond — bg section hero */
  --purple-900:  #1a0f26;   /* violet quasi-noir */
  --purple-700:  #7b3dee;   /* violet foncé */
  --purple-500:  #b493ff;   /* violet moyen */
  --purple-50:   #edecff;   /* lavande très clair */
  --purple-100:  #d4c2ff;   /* lavande — H1 hero */
  --cyan-50:     #f0fffd;   /* fond mint très clair */

  /* Fond commun des noms de personnage */
  --blue-icp:    #1b1564;

}

/* =================================================================
   RESPONSIVE — Surcharges de tokens par breakpoint
   Toute règle CSS utilisant var(--...) s'adapte automatiquement.

   Breakpoints :
     1024px — tablette
      768px — mobile
      480px — petit mobile

   NE PAS toucher ici :
     --space-11  (padding latéral nav  → nav.css responsive)
     --space-16  (padding top hero     → hero.css responsive)
================================================================= */

/* ── Tablette ≤ 1024px ─────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    /* Typo */
    --text-h1:   44px;
    --text-h2:   36px;
    --ls-h1:      6px;
    --ls-h2:      2px;

    /* Espacements */
    --space-15:  64px;    /* padding latéral sections */
  }
}

/* ── Mobile ≤ 768px ─────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    /* Typo */
    --text-h1:   32px;
    --text-h2:   26px;
    --text-h3:   22px;
    --text-h4:   18px;
    --text-xl:   18px;
    --ls-h1:      2px;
    --ls-h2:      0px;

    /* Espacements */
    --space-15:  24px;
  }
}

/* ── Petit mobile ≤ 480px ───────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    /* Typo */
    --text-h1:   26px;
    --text-h2:   22px;
    --text-h3:   18px;
    --ls-h1:      0px;

    /* Espacements */
    --space-15:  16px;
  }
}