/* NeXTapps — design system (variante A · « Néon Montréal »).
   Sombre, chirurgical, un seul néon cyan. Tous les autres fichiers
   n'utilisent QUE ces tokens (aucun hex brut hors de ce fichier).
   Contrastes en paires --x / --on-x (--on-x lisible AA sur --x). */
:root {
  /* palette — charbon + blanc cassé + UN néon cyan */
  --surface:        hsl(222 22% 7%);    /* fond plat sombre, jamais noir pur */
  --on-surface:     hsl(200 22% 92%);   /* blanc cassé */
  --surface-alt:    hsl(221 20% 11%);   /* panneaux / cartes surélevés */
  --on-surface-alt: hsl(200 18% 88%);
  --surface-deep:   hsl(223 26% 5%);    /* creux (pied de page, bandes) */
  --on-surface-deep:hsl(200 18% 84%);

  --brand:          hsl(186 100% 52%);  /* néon cyan électrique */
  --on-brand:       hsl(222 40% 6%);    /* texte sombre sur le cyan plein */

  --muted:          hsl(205 14% 62%);   /* texte secondaire sur --surface (AA) */
  --line:           hsl(205 18% 22%);   /* filets discrets */
  --line-glow:      hsl(186 90% 50% / 0.35); /* filet luminescent cyan */
  --glow:           hsl(186 100% 52% / 0.45); /* couleur de halo néon */

  /* fond : charbon plat + UN halo radial doux cyan */
  --bg-radial: radial-gradient(120% 90% at 78% -10%,
                 hsl(186 90% 40% / 0.16), hsl(186 90% 40% / 0) 55%),
               radial-gradient(90% 70% at 10% 8%,
                 hsl(200 40% 30% / 0.10), hsl(200 40% 30% / 0) 50%);

  /* type — Space Grotesk (display) + Inter (corps) */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --text-sm:   clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --text-lg:   clamp(1.2rem, 1.12rem + 0.35vw, 1.45rem);
  --text-xl:   clamp(1.5rem, 1.35rem + 0.7vw, 2rem);
  --text-2xl:  clamp(2rem, 1.7rem + 1.4vw, 2.9rem);
  --text-hero: clamp(2.6rem, 1.9rem + 3.3vw, 4.6rem);
  --leading-body: 1.55;
  --leading-tight: 1.05;
  --tracking-eyebrow: 0.22em;

  /* spacing — 8pt */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* forme & profondeur — halos plutôt qu'ombres portées */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px hsl(223 40% 2% / 0.5), 0 4px 14px hsl(223 40% 2% / 0.4);
  --shadow:    0 2px 8px hsl(223 40% 2% / 0.55), 0 24px 60px hsl(223 40% 2% / 0.5);
  --glow-brand: 0 0 0 1px hsl(186 90% 50% / 0.5),
                0 0 24px hsl(186 100% 52% / 0.35),
                0 0 60px hsl(186 100% 52% / 0.2);

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 240ms;
}