/* ============================================================================
   CleanPhoneList — tokens.css
   CONTRAT DE DESIGN — SOURCE UNIQUE DES VALEURS VISUELLES
   ----------------------------------------------------------------------------
   Consommé par :  la maquette commerciale (03-DESIGN/site/*)  ET  les pages
                   rendues par le Worker (M9-bis) — le portage est un RESTYLE,
                   pas une ré-architecture.

   RÈGLES (non négociables)
   R1. Aucun #hex, rgb()/rgba() ni valeur d'ombre brute HORS de ce fichier.
       Un lint « tokens-only » (grep d'un #hex dans le HTML servi) doit échouer.
   R2. Les NOMS sont ceux de la maquette de référence (index10-bis.html) — ils
       sont le contrat : --bg, --surface, --ink, --slate, --teal, --sky, --violet,
       --valid/--risky/--invalid/--unknown, --radius, --shadow, --font-*.
   R3. Thème : attribut `data-theme="light|dark"` sur <html>.
       Défaut = PRÉFÉRENCE SYSTÈME (aucune préférence imposée) ; le choix
       manuel est mémorisé sous la clé `cpl-theme` (localStorage).
       Sans JS : le bloc @media (prefers-color-scheme) prend le relais.
   R4. Les couleurs de verdict sont celles du CONTRAT PRODUIT (Spec-P1-A §2.1) —
       ne pas inventer d'autres codes couleur de statut.
   R5. Ce fichier ne contient AUCUN sélecteur de composant (.btn, .card, ...) :
       uniquement des variables + le contrat de thème.
   ========================================================================== */

:root{
  color-scheme: light;

  /* ---- Surfaces & encre (thème clair) ---------------------------------- */
  --bg:#f2f5f8;
  --bg-2:#e9edf3;
  --surface:#ffffff;
  --surface-2:#f7f9fc;

  --ink:#1d1c28;            /* titres — charbon quasi noir */
  --ink-2:#343444;
  --logo-ink:#1d1c28;       /* logo header — charbon plein en clair */
  --logo-cut:#ffffff;       /* détourage du logo */
  --slate:#464654;          /* corps de texte */
  --muted:#6b6b7d;
  --muted-2:#8f8fa3;

  /* ---- Marque ---------------------------------------------------------- */
  --teal:#088572;
  --teal-strong:#066a5c;
  --teal-050:#e3f3ef;
  --sky:#06638d;
  --sky-050:#e3eff6;
  --violet:#554590;
  --violet-strong:#3f3370;
  --violet-2:#293d9a;
  --violet-050:#ede9f6;

  --grad:linear-gradient(115deg,#088572 0%,#06638d 52%,#554590 100%);
  --grad-soft:linear-gradient(115deg,#0aa084,#087396 52%,#5b4a9c 100%);
  --grad-text:linear-gradient(100deg,#35d4b4,#3aa9d8 55%,#a79af0);
  --on-grad:#fff;               /* texte posé sur fond dégradé (invariant thème — le grad ne change pas en dark) */

  /* ---- Verdicts (contrat produit P1-A §2.1 — R4) ------------------------ */
  --valid:#0f9d6b;     --valid-050:#e1f4ec;     /* valid_mobile, valid_fixed  */
  --risky:#e8930c;     --risky-050:#fdf1dd;     /* voip, ported, risk         */
  --invalid:#d84242;   --invalid-050:#fbe7e7;   /* invalid, malformed         */
  --unknown:#5b7c99;   --unknown-050:#e8eef4;   /* unknown, provider down     */

  /* ---- Lignes / séparateurs ------------------------------------------- */
  --line:rgba(29,28,40,.09);
  --line-strong:rgba(29,28,40,.16);

  /* ---- Surfaces sombres (sections « dark » DANS un thème clair) -------- */
  --dark:#14121c;
  --dark-2:#1a1830;
  --dark-card:rgba(255,255,255,.045);
  --dark-line:rgba(255,255,255,.10);

  /* ---- Rayons ---------------------------------------------------------- */
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:26px;
  --radius-full:999px;

  /* ---- Ombres ---------------------------------------------------------- */
  --shadow-sm:0 2px 10px rgba(29,28,40,.06);
  --shadow:0 18px 44px rgba(29,28,40,.10);
  --shadow-lg:0 34px 80px rgba(29,28,40,.16);
  --focus-ring:0 0 0 3px rgba(8,133,114,.35);   /* focus visible WCAG AA */

  /* ---- Typographie ----------------------------------------------------- */
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Sora',var(--font-body);

  --fs-xs:.78rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-lead:1.08rem;
  --fs-h3:1.25rem;
  --fs-h2:clamp(1.9rem,3.6vw,2.9rem);
  --fs-h1:clamp(2.3rem,5vw,3.6rem);

  --lh-tight:1.12;
  --lh-body:1.65;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-black:800;

  --tracking-tight:-.02em;
  --tracking-eyebrow:.16em;

  /* ---- Espacement (échelle 4 px) --------------------------------------- */
  --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:104px;

  /* ---- Mise en page ---------------------------------------------------- */
  --container:1180px;
  --gutter:24px;

  /* ---- Mouvement ------------------------------------------------------- */
  --t-fast:150ms;
  --t:240ms;
  --t-slow:420ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* ---- Plans (z-index) ------------------------------------------------- */
  --z-header:50;
  --z-panel:60;
  --z-modal:70;
}
/* ============================================================================
   THÈME SOMBRE
   Appliqué par : data-theme="dark" (script, choix mémorisé) — ou, SANS JS, par
   la préférence système (bloc @media ci-dessous). Les deux blocs doivent
   rester STRICTEMENT synchronisés (mêmes variables, mêmes valeurs).
   ========================================================================== */
[data-theme="dark"]{
  color-scheme: dark;

  --bg:#14121c;
  --bg-2:#181626;
  --surface:#1a1830;
  --surface-2:#201d38;

  --ink:#f2f5f8;
  --ink-2:#e6e4ef;
  --logo-ink:#ffffff;
  --logo-cut:#14121c;
  --slate:#cfccdd;
  --muted:#a3a0b8;
  --muted-2:#8b889f;

  --teal-strong:#4fd6bd;
  --sky:#3aa9d8;
  --violet-strong:#b3a6f0;

  --teal-050:rgba(10,160,132,.14);
  --sky-050:rgba(58,169,216,.14);
  --violet-050:rgba(139,124,255,.14);

  --valid-050:rgba(15,157,107,.14);
  --risky-050:rgba(232,147,12,.14);
  --invalid-050:rgba(216,66,66,.14);
  --unknown-050:rgba(91,124,153,.16);

  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  --shadow-sm:0 2px 10px rgba(0,0,0,.45);
  --shadow:0 18px 44px rgba(0,0,0,.50);
  --shadow-lg:0 34px 80px rgba(0,0,0,.58);
  --focus-ring:0 0 0 3px rgba(79,214,189,.40);
}

/* Sans JS : la préférence système décide (R3) — mêmes valeurs que ci-dessus. */
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    color-scheme: dark;

    --bg:#14121c;
    --bg-2:#181626;
    --surface:#1a1830;
    --surface-2:#201d38;

    --ink:#f2f5f8;
    --ink-2:#e6e4ef;
    --logo-ink:#ffffff;
    --logo-cut:#14121c;
    --slate:#cfccdd;
    --muted:#a3a0b8;
    --muted-2:#8b889f;

    --teal-strong:#4fd6bd;
    --sky:#3aa9d8;
    --violet-strong:#b3a6f0;

    --teal-050:rgba(10,160,132,.14);
    --sky-050:rgba(58,169,216,.14);
    --violet-050:rgba(139,124,255,.14);

    --valid-050:rgba(15,157,107,.14);
    --risky-050:rgba(232,147,12,.14);
    --invalid-050:rgba(216,66,66,.14);
    --unknown-050:rgba(91,124,153,.16);

    --line:rgba(255,255,255,.10);
    --line-strong:rgba(255,255,255,.18);

    --shadow-sm:0 2px 10px rgba(0,0,0,.45);
    --shadow:0 18px 44px rgba(0,0,0,.50);
    --shadow-lg:0 34px 80px rgba(0,0,0,.58);
    --focus-ring:0 0 0 3px rgba(79,214,189,.40);
  }
}

/* Accessibilité : mouvement réduit → les transitions tombent à zéro. */
@media (prefers-reduced-motion: reduce){
  :root{
    --t-fast:0ms;
    --t:0ms;
    --t-slow:0ms;
  }
}

/* ============================================================================
   CONTRAT D'USAGE (à respecter par la maquette ET par M9-bis)

   Thème (R3) — script anti-flash en tête de <head>, AVANT tout CSS :
     (function(){try{var k='cpl-theme',t=localStorage.getItem(k);
        if(t!=='light'&&t!=='dark'){
          t=(window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light';
        }
        document.documentElement.setAttribute('data-theme',t);}catch(e){}})();
   Bascule utilisateur : data-theme = l'inverse + localStorage.setItem('cpl-theme', ...).
   La clé s'appelle `cpl-theme` (jamais `scrubr-theme`).

   Composants — toujours par variable, jamais en dur :
     fond de page ................. var(--bg) / var(--bg-2)
     carte, panneau ............... var(--surface) / var(--surface-2)
     titre ........................ var(--ink)   · corps var(--slate) · secondaire var(--muted)
     bouton principal ............. background: var(--grad) ; couleur: #fff → var(--surface)
     libellé de section ........... var(--teal-strong) + var(--grad) (filet ::before)
     séparateur ................... var(--line) / var(--line-strong)
     succès / risque / échec ...... var(--valid) · var(--risky) · var(--invalid) · var(--unknown)
                                    (+ variantes -050 pour les fonds de badge)
     focus clavier ................ box-shadow: var(--focus-ring)  (jamais outline:none)
     rythme ....................... var(--sp-*)  · rayons var(--radius-*)
     largeur de contenu ........... width: min(var(--container), calc(100% - 2*var(--gutter)))
     transitions .................. var(--t) var(--ease)

   Typographie — INTERDIT de charger les polices depuis un CDN bloquant :
     auto-héberger Inter + Sora (woff2), `font-display:swap`, preload des 2 poids
     critiques. Les tokens ci-dessus ne définissent QUE les familles et l'échelle.

   Vérification : un écran ne doit contenir AUCUN #hex / rgba() (R1).
   ========================================================================== */