/* ==========================================================================
   TOKENS - thème STOPR.
   --------------------------------------------------------------------------
   Source de vérité : src/design/tokens.ts et src/ui/Glass.tsx de l'app.
   Canvas quasi noir, nappes de lumière NEUTRES, surfaces « liquid glass »,
   et le lime réservé aux moments qui comptent : CTA, chiffres, marque.
   Une nappe teintée volerait son rôle au lime - le fond reste une gamme
   de noirs, comme dans l'app.

   RÈGLE : aucune valeur chromatique ailleurs que dans ce fichier.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- fonds */
  --fond: #08090b;
  --fond-profond: #0b0d11;
  --fond-noir: #050608;
  --fond-carte: #101216;
  --surface-2: #151821;
  --surface-3: #1c202a;

  /* Dégradés : des gammes de noirs, jamais de couleur pleine - le dégradé
     sert la profondeur, pas la surface (règle de marque). Le bleu nuit très
     sombre vient du gradient « reveal » de l'app. */
  --grad-carte: linear-gradient(#151821 0%, #0b0d11 100%);
  --grad-pill: radial-gradient(75% 119% at 50% 119.8%, #1c202a 0%, #0b0d11 100%);
  --grad-section: linear-gradient(#101528 0%, #0b0d11 55%, #08090b 106%);
  --grad-cta: linear-gradient(225deg, #0b0d11 0%, #101528 55%, #0b0d11 100%);
  --grad-rang: linear-gradient(90deg, #151821 0%, #0b0d11 100%);
  --grad-stats: linear-gradient(#151821 5%, #1c202a 100%);
  --grad-voile: linear-gradient(rgba(8, 9, 11, 0) 52%, rgba(8, 9, 11, 0.7) 80%, rgba(8, 9, 11, 0.97) 100%);

  /* ---------------------------------------------------------------- accent
     STOPR LIME. Très clair : tout contenu posé dessus est quasi noir,
     jamais blanc - le contraste blanc-sur-lime échoue. */
  --accent: #c6ff3d;
  --accent-vif: #c6ff3d;
  --accent-doux: rgba(198, 255, 61, 0.14);
  --accent-halo: rgba(198, 255, 61, 0.3);
  --sur-accent: #08090b;

  /* Couleurs système secondaires (mêmes rôles que dans l'app). */
  --info: #7c8cff;
  --calme: #5cf2d6;
  --danger: #ff5964;
  --ambre: #ffc857;

  /* ---------------------------------------------------------------- texte */
  --texte: #f7f8fa;
  --texte-doux: #a8afbc;
  --texte-faible: #6b7280;

  /* ---------------------------------------------------------------- traits */
  --trait: rgba(255, 255, 255, 0.08);
  --trait-fort: rgba(255, 255, 255, 0.14);
  --trait-accent: rgba(198, 255, 61, 0.4);

  /* Étoiles de notation : l'ambre du système, pas le lime. */
  --etoile: #ffc857;

  /* ----------------------------------------------------------- liquid glass
     Les cinq couches de Glass.tsx, traduites :
       1. flou    - backdrop-filter, il réfracte les nappes du fond .ciel ;
       2. teinte  - blanc à 3-6 %, le corps du verre ;
       3. spéculaire - reflet haut, blanc .16 qui s'éteint à 55 % ;
       4. rebord  - bordure réelle de 1 px ;
       5. arête   - filet clair sur le bord haut, lumineux au centre.
     Retirer une couche fait retomber la surface en carte plate. */
  --verre-fond: rgba(255, 255, 255, 0.012);
  --verre-teinte: rgba(255, 255, 255, 0.045);
  --verre-teinte-haute: rgba(255, 255, 255, 0.06);
  /* 60 dans l'app ; dosé pour le web où le flou se paie par surface. */
  --verre-flou: 26px;
  --verre-flou-leger: 16px;
  --verre-rim: rgba(255, 255, 255, 0.14);
  --verre-spec: linear-gradient(
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    transparent 55%
  );
  --verre-arete: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 28%,
    rgba(255, 255, 255, 0.28) 70%,
    transparent 100%
  );
  /* Variante héro : l'arête s'allume dans l'accent (GlassHero). */
  --verre-arete-accent: linear-gradient(
    90deg,
    transparent 0%,
    rgba(198, 255, 61, 0.8) 28%,
    rgba(198, 255, 61, 0.45) 70%,
    transparent 100%
  );
  --verre-rim-accent: rgba(198, 255, 61, 0.24);
  --verre-cast-accent: linear-gradient(
    rgba(198, 255, 61, 0.15) 0%,
    rgba(198, 255, 61, 0.04) 45%,
    transparent 100%
  );

  /* ------------------------------------------------------------ typographie */
  --police-titre: "Schibsted Grotesk", "Neue Montreal", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --police-corps: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;

  --t-h1: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
  --t-h2: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  --t-h3: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --t-manifeste: clamp(1.5rem, 0.9rem + 2.6vw, 2.9rem);
  --t-chiffre: clamp(2.2rem, 1.4rem + 3vw, 3.4rem);
  --t-corps: clamp(0.95rem, 0.9rem + 0.25vw, 1.125rem);
  --t-petit: 0.875rem;
  --t-eyebrow: 0.95rem;

  --lh-titre: 1.2;
  --lh-corps: 1.6;
  --ls-titre: -0.02em;

  /* ---------------------------------------------------------------- rayons */
  --r-pill: 999px;
  --r-carte: 25px;
  --r-carte-l: 32px;
  --r-bloc: 46px;
  --r-petit: 16px;

  /* Titane noir, comme sur l'appareil : un graphite brossé dont les arêtes
     accrochent la lumière. Un dégradé qui alterne faces et reflets. */
  --titane: linear-gradient(
    152deg,
    #63646b 0%,
    #33343a 11%,
    #17181c 26%,
    #3d3e45 44%,
    #1b1c20 60%,
    #2f3036 78%,
    #5c5d64 100%
  );
  --titane-bouton: linear-gradient(90deg, #6a6b72, #3a3b41 52%, #1d1e22);
  /* Le dos de l'appareil : le même métal, en sourdine. */
  --titane-dos: linear-gradient(150deg, #2c2d33, #0b0c0f);

  /* ---------------------------------------------------------------- rythme */
  --sect-y: clamp(4.5rem, 2rem + 9vw, 9rem);
  --gouttiere: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --largeur: 1240px;
  --largeur-etroite: 860px;

  /* ---------------------------------------------------------------- ombres */
  --ombre-carte: 0 24px 60px rgba(0, 0, 0, 0.5);
  --ombre-flottante: 0 30px 80px rgba(0, 0, 0, 0.65);
  --glow-accent: 0 0 46px rgba(198, 255, 61, 0.28);
  --glow-accent-fort: 0 0 70px rgba(198, 255, 61, 0.42);

  /* ---------------------------------------------------------------- durées */
  --d-court: 160ms;
  --d-moyen: 320ms;
  --d-long: 720ms;
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
  /* Sortie expo : rapide au départ, longue décélération. C'est la courbe des
     entrées de page ; elle donne la sensation de « pose » sans rebond. */
  --courbe-sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --d-entree: 950ms;

  color-scheme: dark;
}

/* La page est nativement sombre, comme l'app. Pas de variante claire. */