/* ============================================================
   Servia — tokens de design (charte vitrine, mode "structured")
   Source : Design Reference - Servia Nettoyage.md (handoff 09/2026)
   Variables uniquement : les règles de base (body, h1…, .kicker) du handoff sont
   omises car index.html / marketing.css les définissent déjà. DM Sans est chargé
   par le <link> Google Fonts de la page (pas de @import).
   À inclure AVANT le CSS existant de chaque page :
   <link rel="stylesheet" href="/css/servia-tokens.css">
   Remplace uniquement les couleurs / polices / rayons.
   Ne touche pas au layout ni à la logique.
   ============================================================ */


:root {
  /* — Polices — */
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-head: 'DM Sans', system-ui, sans-serif;
  --head-font: 'DM Sans', system-ui, sans-serif;   /* compat proto */
  --head-italic: normal;
  --head-weight: 700;

  /* — Palette de base (thème clair) — */
  --c-bg: #eef1f2;
  --c-surface: #ffffff;
  --c-text: #1c2836;
  --c-text-2: rgba(28, 40, 54, .72);
  --c-text-3: rgba(28, 40, 54, .55);
  --c-border: rgba(28, 40, 54, .14);
  --c-border-strong: rgba(28, 40, 54, .30);

  --c-navy: #1c2836;
  --c-navy-deep: #141e29;
  --c-on-navy: #eef1f2;
  --c-on-navy-2: rgba(238, 241, 242, .75);
  --c-on-navy-3: rgba(238, 241, 242, .55);
  --c-on-navy-border: rgba(238, 241, 242, .14);

  --c-accent: #3c6d8f;
  --c-accent-hover: #2f5972;
  --c-accent-light: #8fa7bb;      /* accent sur fond navy */
  --c-accent-soft: rgba(60, 109, 143, .10);
  --c-star: #e8c26a;

  /* — États (dérivés, absents de la charte — à valider) — */
  --c-success: #2f7a57;
  --c-warning: #b7791f;
  --c-danger: #a63a3a;

  /* — Rayons — */
  --r-btn: 10px;
  --r-card: 14px;
  --r-input: 10px;
  --r-tag: 8px;

  /* — Échelle typographique (reprise des protos) — */
  --fs-kicker: 11px;
  --fs-body-sm: 12.5px;
  --fs-body: 14px;
  --fs-card-title: 17px;
  --fs-hero: 28px;
  --ls-kicker: .1em;

  /* — Espacements — */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* — Ombres (légères, pas de dégradé de fond) — */
  --sh-sm: 0 1px 2px rgba(28, 40, 54, .08);
  --sh-md: 0 3px 10px rgba(28, 40, 54, .10);
  --sh-lg: 0 12px 32px rgba(28, 40, 54, .14);

  /* — Cibles tactiles / largeur colonne — */
  --tap-min: 44px;
  --col-max: 460px;
  --focus-ring: 2px solid var(--c-accent);
}

/* Thème sombre — aligné sur le mécanisme existant du tunnel :
   attribut data-color-mode posé sur <html> (state colorMode, localStorage "lerd_color_mode").
   Pas de prefers-color-scheme : le mode est piloté par React, jamais par l'OS. */
[data-color-mode="dark"] {
  --c-bg: #141e29;
  --c-surface: #1c2836;
  --c-text: #eef1f2;
  --c-text-2: rgba(238, 241, 242, .75);
  --c-text-3: rgba(238, 241, 242, .55);
  --c-border: rgba(238, 241, 242, .14);
  --c-border-strong: rgba(238, 241, 242, .30);
  --c-accent: #8fa7bb;
  --c-accent-hover: #a9bccb;
  --c-accent-soft: rgba(143, 167, 187, .14);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-md: 0 3px 10px rgba(0, 0, 0, .40);
  --sh-lg: 0 12px 32px rgba(0, 0, 0, .50);
}