/* =========================================================================
   JETONS DE STYLE
   =========================================================================

   Une seule declaration des valeurs de design, pour que la refonte a venir
   consiste a changer ces valeurs plutot qu'a repasser dans une dizaine de
   feuilles (admin-dashboard, lk, journey, promo, diagnostic-viewer,
   diagnostic-expert, business...) ou tout est aujourd'hui ecrit en dur.

   Trois regles pour que cette couche serve a quelque chose :

   1. Les noms sont SEMANTIQUES, pas litteraux : `--couleur-danger`, pas
      `--rouge-500`. Une refonte change les valeurs, pas les noms ; un nom qui
      decrit la couleur devient un mensonge des le premier changement de charte.

   2. Les valeurs ci-dessous ne sont pas inventees, elles sont relevees dans le
      code existant. La palette s'est trouvee etre celle de Tailwind, deja
      coherente mais recopiee a la main partout. On la nomme, on ne la remplace
      pas : la bascule ne doit rien changer a l'ecran.

   3. Les feuilles existantes migrent progressivement. Tant qu'une feuille n'est
      pas migree, elle continue de fonctionner : ce fichier n'ecrase rien.

   ========================================================================= */

:root {

    /* --- Surfaces ------------------------------------------------------- */
    --surface-fond: #f8fafc;          /* fond de page clair */
    --surface-carte: #ffffff;         /* carte posee sur le fond */
    --surface-sombre: #07111f;        /* fond de page sombre (landing) */
    --surface-voile: rgba(18, 27, 43, 0.54);   /* panneau translucide */

    /* --- Texte ---------------------------------------------------------- */
    --texte-fort: #111827;            /* titres, chiffres */
    --texte-normal: #334155;
    --texte-discret: #94a3b8;         /* legendes, mentions */
    --texte-sur-sombre: rgba(255, 255, 255, 0.94);
    --texte-discret-sur-sombre: rgba(255, 255, 255, 0.68);

    /* --- Traits --------------------------------------------------------- */
    --trait: #e2e8f0;
    --trait-marque: #cbd5e1;
    --trait-sur-sombre: rgba(255, 255, 255, 0.10);

    /* --- Couleurs de sens ----------------------------------------------- */
    /* Chacune a une variante douce, employee en fond d'alerte ou de pastille. */
    --couleur-accent: #3b82f6;
    --couleur-accent-doux: #dbeafe;
    --couleur-danger: #ef4444;
    --couleur-danger-doux: #fecaca;
    --couleur-succes: #22c55e;
    --couleur-succes-doux: #bbf7d0;

    /*
     * Teintes de la landing, exprimees en composantes pour pouvoir moduler
     * l'opacite sans redeclarer la couleur.
     */
    --teinte-or: 242, 190, 99;
    --teinte-bleue: 95, 168, 255;
    --teinte-violette: 169, 139, 255;
    --teinte-verte: 99, 215, 196;
    --teinte-rouge: 248, 113, 113;

    /* --- Rayons --------------------------------------------------------- */
    /* Echelle relevee : 8, 10, 12, 14, 16, 18, 20, 24, et la pilule. */
    --rayon-xs: 8px;
    --rayon-s: 10px;
    --rayon-m: 12px;
    --rayon-l: 14px;
    --rayon-xl: 16px;
    --rayon-xxl: 20px;
    --rayon-carte: 24px;
    --rayon-pilule: 999px;

    /* --- Espacements ---------------------------------------------------- */
    --espace-xs: 4px;
    --espace-s: 8px;
    --espace-m: 12px;
    --espace-l: 16px;
    --espace-xl: 24px;
    --espace-xxl: 32px;
    --espace-section: 64px;

    /* --- Typographie ---------------------------------------------------- */
    /* Le corps courant est a 13-14px, d'ou une echelle serree en bas. */
    --taille-mention: 11px;
    --taille-legende: 12px;
    --taille-corps: 13px;
    --taille-corps-l: 14px;
    --taille-intro: 15px;
    --taille-titre-s: 18px;
    --taille-titre-m: 22px;
    --taille-titre-l: 28px;

    --graisse-normale: 400;
    --graisse-moyenne: 600;
    --graisse-forte: 700;
    --graisse-titre: 800;

    /* --- Ombres --------------------------------------------------------- */
    --ombre-posee: 0 2px 8px rgba(0, 0, 0, 0.18);
    --ombre-flottante: 0 6px 20px rgba(0, 0, 0, 0.30);

    /* --- Mouvement ------------------------------------------------------ */
    --transition: .18s ease;
}

/*
 * Compatibilite : promo.css declarait deja ses propres variables `--promo-*`.
 * Elles pointent desormais sur les jetons, ce qui unifie les deux couches sans
 * toucher aux centaines d'usages existants. Elles disparaitront quand promo.css
 * aura ete migre, ce que la refonte de la vitrine fera de toute facon.
 */
:root {
    --promo-bg: var(--surface-sombre);
    --promo-panel: var(--surface-voile);
    --promo-border: var(--trait-sur-sombre);
    --promo-text: var(--texte-sur-sombre);
    --promo-muted: var(--texte-discret-sur-sombre);
    --promo-gold-rgb: var(--teinte-or);
    --promo-blue-rgb: var(--teinte-bleue);
    --promo-purple-rgb: var(--teinte-violette);
    --promo-green-rgb: var(--teinte-verte);
    --promo-red-rgb: var(--teinte-rouge);
}