/* =============================================================================
   tokens.css · Source unique des décisions visuelles.
   Aucune règle de mise en page ici : uniquement des variables.
   Toute évolution de charte (couleur, échelle typographique, rythme) se fait
   dans ce fichier et se propage à l'ensemble du site.
   ========================================================================== */

:root {
  /* --- Couleurs de marque -------------------------------------------------
     Issues du logo Mellion : bleu nuit, bleu, cyan, blanc. Rien d'autre. */
  --navy-900: #030817;   /* fond général */
  --navy-850: #050c1c;
  --navy-800: #071226;
  --navy-700: #081a31;   /* surface posée sur le fond */
  --navy-600: #0b2340;   /* surface surélevée (cartes premium) */
  --blue: #1768ff;
  --blue-soft: #72a7ff;
  --cyan: #20d5df;

  /* --- Extensions de palette ----------------------------------------------
     Quatre teintes ajoutées pour la lisibilité et la mise en avant des chiffres.
     Elles restent dans la famille du logo (bleu → cyan), sauf --gain, réservé
     aux bénéfices quantifiés : le vert d'eau signale un gain sans ambiguïté,
     là où le cyan sert déjà d'accent générique.
     Toutes ont été vérifiées au contraste (≥ 4,5:1 sur leur fond d'usage).
     Pour revenir à la charte d'origine, il suffit de remplacer ici
     --cyan-bright et --gain par --cyan, --indigo et --blue-ink par --blue. */
  --cyan-bright: #5ef2fa;  /* chiffres clés, survol, emphase sur fond sombre */
  --indigo: #4a63ff;       /* second bleu : dégradés, halos, profondeur */
  --gain: #4fd6a8;

  /* Chiffre fantome des cartes numerotees (.rail__num). */
  --num-ghost: rgba(150, 195, 255, 0.42);         /* uniquement les gains chiffrés */
  --gain-deep: #0d7a5a;    /* le même gain, lisible sur fond clair */
  --blue-ink: #1156d6;     /* bleu assez foncé pour les chiffres sur fond clair */

  /* --- Texte sur fond sombre --------------------------------------------- */
  --ink: #f5f8ff;        /* titres */
  --ink-strong: #dfe7f4; /* texte fort */
  --ink-muted: #b8c5d7;  /* texte courant (contraste AA sur navy-900) */
  --ink-subtle: #93a2b7; /* texte secondaire */
  --ink-faint: #6d7c93;  /* micro-libellés */

  /* --- Texte sur fond clair (bandeaux « papier ») ------------------------- */
  --paper-ink: #07162b;
  --paper-ink-muted: #385570;
  --paper-ink-subtle: #49637d;
  --paper-accent: #076b98;

  /* --- Filets et surfaces ------------------------------------------------- */
  --line: rgba(160, 185, 225, 0.16);
  --line-strong: rgba(139, 178, 235, 0.26);
  --line-paper: rgba(7, 36, 70, 0.18);
  --glass: rgba(5, 14, 32, 0.66);
  --surface: rgba(7, 19, 40, 0.78);

  /* Couleur d'accent contextuelle : cyan sur fond sombre, bleu profond sur les
     bandeaux clairs (voir .section--paper dans components.css). Les composants
     utilisent var(--accent) : ils s'adaptent donc sans règle supplémentaire. */
  --accent: var(--cyan);

  /* Couleur des gains chiffrés, elle aussi contextuelle. */
  --accent-gain: var(--gain);

  /* --- Dégradés récurrents ------------------------------------------------ */
  --gradient-brand: linear-gradient(90deg, var(--blue), var(--cyan));
  --gradient-deep: linear-gradient(120deg, var(--indigo), var(--cyan));
  --gradient-title: linear-gradient(94deg, #f7f9ff 5%, #77a8ff 51%, #27dbe0 94%);
  --gradient-paper: linear-gradient(150deg, #fbfdff 0%, #edf6ff 58%, #deefff 100%);

  /* --- Typographie --------------------------------------------------------
     Geist (variable 100-900) est auto-hébergée : voir base.css.
     Les piles de repli couvrent le cas où la police n'est pas encore chargée. */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono",
    "Cascadia Mono", Consolas, monospace;

  /* Serif à fort contraste réservée aux grands titres et aux chiffres clés.
     Une seule graisse : voir la note sur font-synthesis dans base.css. */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia,
    "Times New Roman", serif;

  /* Échelle fluide : min lisible sur 360 px, max maîtrisé sur 1920 px. */
  --fs-display: clamp(2.9rem, 5.4vw, 5.25rem);  /*  46 → 84 px  (h1 accueil) */
  --fs-h1: clamp(3rem, 6.4vw, 5.75rem);         /*  48 → 92 px  (h1 pages)   */
  --fs-h2: clamp(2.35rem, 4.6vw, 4.25rem);      /*  38 → 68 px               */
  --fs-h2-sm: clamp(2rem, 3.4vw, 2.9rem);       /*  32 → 46 px               */
  --fs-h3: clamp(1.3rem, 1.7vw, 1.55rem);       /*  21 → 25 px               */
  --fs-lead: clamp(1.05rem, 1.3vw, 1.32rem);    /*  17 → 21 px               */
  --fs-body: 1rem;                              /*  16 px                    */
  --fs-small: 0.9375rem;                        /*  15 px                    */
  --fs-tiny: 0.8125rem;                         /*  13 px                    */
  --fs-mono: 0.625rem;                          /*  10 px (libellés mono)    */

  --lh-display: 0.98;
  --lh-title: 1.06;
  --lh-body: 1.72;
  --tracking-display: -0.015em;  /* chasse du serif, plus ouverte */
  --tracking-mono: 0.14em;

  /* --- Rythme vertical et gouttières -------------------------------------- */
  --shell-max: 1320px;
  --shell-gutter: clamp(20px, 4vw, 32px);
  --section-y: clamp(72px, 9vw, 130px);
  --section-y-sm: clamp(56px, 6vw, 90px);
  --block-gap: clamp(28px, 4vw, 56px);

  /* --- Formes ------------------------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  --shadow-card: 0 28px 70px rgba(2, 11, 28, 0.32);
  --shadow-float: 0 42px 90px rgba(0, 0, 0, 0.46);
  --shadow-glow: 0 16px 50px rgba(32, 213, 223, 0.14);

  /* --- Mouvement ----------------------------------------------------------
     Trois durées seulement, pour que le site garde un tempo homogène. */
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 800ms;

  /* --- Empilement ---------------------------------------------------------- */
  --z-ambient: 0;
  --z-content: 2;
  --z-header: 50;
  --z-skip: 100;
  --z-consent: 1200;
  --z-intro: 1400;
}