/* ============================================================================
   GeekHub — Design tokens (source de vérité unique)
   Direction validée : « cinématique sobre » — bleu-noir teinté (jamais #000
   pur), cyan #8FD3FF = identité/technique, ambre doré = CTA/prix/conversion.
   Toute couleur/espacement/ombre nouvelle DOIT venir d'ici.
   ========================================================================== */
:root {
  /* ---- Fonds & surfaces (élévation par éclaircissement, teinte 215°) ---- */
  --bg-0: #05070A;            /* profondeur max : canvas hero, modals scrim   */
  --bg-1: #080B10;            /* fond de page                                 */
  --surface-1: #0D121B;       /* cartes, panneaux                             */
  --surface-2: #121927;       /* survol, éléments actifs, inputs              */
  --surface-3: #182032;       /* modals, dropdowns, niveau le plus haut       */

  /* ---- Texte (contrastes AA vérifiés sur surface-1) ---- */
  --text-1: #F2F5FA;          /* titres, contenus premium        ~15.8:1      */
  --text-2: #A9B4C4;          /* secondaire                       ~7.6:1      */
  --text-3: #7C8899;          /* muted, notes                     ~4.7:1      */
  --text-faint: #55606F;      /* décoratif uniquement, jamais du contenu      */

  /* ---- Cyan — identité, liens, glow, technique ---- */
  --cyan-200: #CDEAFF;
  --cyan-300: #B5E0FB;        /* hover des liens                              */
  --cyan-400: #8FD3FF;        /* LA couleur GeekHub                           */
  --cyan-500: #5FBCF7;
  --on-cyan: #04121C;

  /* ---- Ambre doré — CTA, prix, conversion ---- */
  --amber-300: #FFD48A;
  --amber-400: #F5B84C;       /* boutons d'achat, prix                        */
  --amber-500: #E29E2E;
  --on-amber: #201302;

  /* ---- Sémantiques ---- */
  --success: #7FD8A4;
  --danger: #F2988D;
  --success-dim: rgba(127, 216, 164, .12);
  --danger-dim: rgba(242, 152, 141, .12);

  /* ---- Bordures ---- */
  --border-1: rgba(226, 236, 248, .08);   /* défaut                          */
  --border-2: rgba(226, 236, 248, .15);   /* inputs, éléments interactifs    */
  --border-cyan: rgba(143, 211, 255, .35);
  --border-amber: rgba(245, 184, 76, .40);

  /* ---- Typographie (Geist / Geist Mono) ----
     display : réservé aux heros — light 200 + <b>600, c'est l'identité.
     Le reste sort du tout-light : titres 550-650, corps 400.            */
  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --fs-display: clamp(2.75rem, 6vw, 5.25rem);   /* 44→84px  w200, -0.025em  */
  --fs-h1: clamp(2.125rem, 4.5vw, 3.25rem);      /* 34→52px  w250, -0.02em   */
  --fs-h2: clamp(1.5rem, 2.6vw, 1.875rem);       /* 24→30px  w600, -0.01em   */
  --fs-h3: 1.25rem;                              /* 20px     w600            */
  --fs-body: 0.9375rem;                          /* 15px     w400, lh 1.65   */
  --fs-sm: 0.84375rem;                           /* 13.5px                   */
  --fs-xs: 0.75rem;                              /* 12px                     */
  --fs-label: 0.6875rem;                         /* 11px mono uppercase      */
  --ls-label: 0.14em;
  --lh-body: 1.65;

  /* ---- Espacements (rythme 4/8) ---- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;  --sp-10: 128px;

  /* ---- Rayons ---- */
  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-full: 999px;

  /* ---- Élévations & lueurs ---- */
  --e-1: 0 1px 2px rgba(2, 6, 12, .6);
  --e-2: 0 12px 32px -12px rgba(2, 6, 12, .75);
  --e-3: 0 32px 80px -24px rgba(2, 6, 12, .9);
  --glow-cyan: 0 0 32px rgba(143, 211, 255, .25);
  --glow-cyan-strong: 0 0 44px rgba(143, 211, 255, .4);
  --glow-amber: 0 0 34px rgba(245, 184, 76, .25);

  /* ---- Motion (expo-out : rapide puis amorti) ---- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --dur-1: 150ms;   /* micro : hover, press          */
  --dur-2: 240ms;   /* standard : cartes, toasts     */
  --dur-3: 420ms;   /* entrées : reveals, modals     */

  /* ---- Plan de z-index ---- */
  --z-nav: 100; --z-drawer: 500; --z-modal: 1000; --z-toast: 1100;
}

/* ---- Primitives globales ---- */
::selection { background: rgba(143, 211, 255, .28); color: var(--text-1); }

:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}