/**
 * tokens.css — Design tokens dotflo
 * Source de vérité de la direction artistique validée.
 * Toute valeur décorative de l'UI référence ces variables — pas de valeurs en dur ailleurs.
 */

:root {
  /* =========================================================
     COULEURS
     ========================================================= */

  --color-bg:        #0B0E10; /* fond principal — near-black, léger biais cyan (thème dark) */
  --color-bg-2:      #0E1316; /* surface basse / bandes */
  --color-surface:   #12181B; /* fond de carte */
  --color-surface-2: #161D21; /* carte survolée / imbriquée */
  --color-text:      #EDF1F3; /* texte principal — blanc cassé cool */
  --color-accent:    #00acd4; /* accent unique dotflo */
  --color-neutral-1: #8B979E; /* texte secondaire, légendes */
  --color-neutral-2: #232C31; /* séparateurs, bordures */

  /* Dérivés utilitaires (pas de nouvelles couleurs — juste des transparences) */
  --color-accent-alpha-10: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --color-accent-alpha-20: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --color-text-alpha-50:   color-mix(in srgb, var(--color-text) 50%, transparent);

  /* =========================================================
     TYPOGRAPHIE — familles
     ========================================================= */

  --font-display: 'Space Grotesk', sans-serif; /* titres, hero */
  --font-body:    'DM Sans', sans-serif; /* corps, UI, navigation */
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace; /* méta, données */

  /* Poids (utile pour les fonts variables) */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-black:   800;

  /* =========================================================
     TYPOGRAPHIE — échelle
     ========================================================= */

  /* H1 hero : 40px mobile → 96px desktop (Syne 700-800) */
  --text-h1: clamp(2.5rem, 5vw + 1.5rem, 6rem);
  /* H2 section : 32px → 48px (Syne 700) */
  --text-h2: clamp(2rem, 3vw + 1rem, 3rem);
  /* H3 : 24px → 32px (Syne 600) */
  --text-h3: clamp(1.5rem, 2vw + 0.75rem, 2rem);
  /* Corps : 16-17px (DM Sans 400) */
  --text-body:  clamp(1rem, 0.5vw + 0.875rem, 1.0625rem);
  /* Label uppercase : 12-13px (DM Sans 500) */
  --text-label: clamp(0.75rem, 0.3vw + 0.7rem, 0.8125rem);
  /* Petits textes / meta */
  --text-small: 0.875rem;

  /* Interlignage */
  --leading-tight:  1.15; /* titres */
  --leading-normal: 1.65; /* corps */
  --leading-label:  1.4;  /* labels / UI */

  /* Espacement lettres */
  --tracking-h1:    -0.02em;
  --tracking-h2:    -0.015em;
  --tracking-label:  0.06em;
  --tracking-normal: 0;

  /* =========================================================
     GRILLE & ESPACEMENT
     ========================================================= */

  --grid-cols:    12;
  --grid-gutter:  1.5rem;   /* 24px */
  --container-max: 82.5rem; /* 1320px */

  /* Padding horizontal du container */
  --container-px-desktop: 3rem;  /* 48px */
  --container-px-mobile:  1.25rem; /* 20px */

  /* Pas d'espacement : multiples de 8px */
  --space-1:  0.5rem;   /* 8px */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-5:  2.5rem;   /* 40px */
  --space-6:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */
  --space-20: 10rem;    /* 160px */
  --space-24: 12rem;    /* 192px */

  /* =========================================================
     MOTION — durées & easings
     ========================================================= */

  /* Durées */
  --duration-fast:    200ms;
  --duration-normal:  300ms;
  --duration-reveal:  600ms; /* animation ScrollTrigger entrée */
  --duration-hero:    800ms; /* hero headline au load */

  /* Stagger entre éléments reveal */
  --stagger-reveal: 80ms;

  /* Easings (GSAP power2.out ≈ cubic-bezier équivalent pour CSS pur) */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Décalage Y initial des reveals */
  --reveal-y: 1.5rem; /* 24px */

  /* Seuil ScrollTrigger : "top 80%" */
  /* (valeur documentée ici, utilisée dans motion.ts) */

  /* =========================================================
     BORDURES & RAYONS
     ========================================================= */

  --radius-sm:  0.25rem;  /* 4px */
  --radius-md:  0.5rem;   /* 8px */
  --radius-lg:  1rem;     /* 16px */
  --radius-xl:  1.5rem;   /* 24px */
  --radius-pill: 9999px;

  --border-width: 1px;
  --border-color: var(--color-neutral-2);
}