/* ============================================================
   PRIVOVA — tokens.css
   Design tokens partagés (couleurs, typo, espacements, ombres).
   Importé en premier sur chaque page, avant styles.css.
   Le teal --accent-500 est RARE et précieux : action + positif.
   ============================================================ */

:root {
  /* ---- Couleurs de marque ---- */
  --brand-900: #0B1B2B;   /* Encre Privacy */
  --brand-700: #143A5A;   /* Bleu Souverain */
  --brand-500: #1E6FB8;   /* Bleu Privova */
  --accent-500: #15B79E;  /* Teal Confiance — CTA & positif */
  --accent-600: #0E9384;  /* Hover teal */
  --gold-500: #E8B33D;    /* Étoiles de notation UNIQUEMENT */

  /* ---- Neutres (lecture, mode clair) ---- */
  --bg: #FBFCFD;
  --surface: #FFFFFF;
  --surface-alt: #F3F6F9;
  --border: #E2E8F0;
  --ink-900: #0F172A;
  --ink-600: #475569;
  --ink-400: #94A3B8;

  /* ---- Sémantique ---- */
  --success: #15B79E;
  --danger: #E5484D;
  --warn: #E8B33D;

  /* ---- Surfaces dérivées (teintes douces) ---- */
  --accent-soft: #E7F6F2;   /* fond teal très léger */
  --accent-line: #BCE7DE;
  --danger-soft: #FDECEC;
  --header-bg: rgba(255,255,255,0.82);
  --hero-tint: #EEF4F9;

  /* ---- Typographie ---- */
  --font-title: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Échelle fluide clamp() */
  --fs-h1: clamp(2.1rem, 1.4rem + 3vw, 3rem);      /* ~34 → 48 */
  --fs-h2: clamp(1.65rem, 1.25rem + 1.8vw, 2.125rem); /* ~26 → 34 */
  --fs-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.5rem);  /* ~21 → 24 */
  --fs-h4: 1.25rem;   /* 20 */
  --fs-body: 1.125rem; /* 18 */
  --fs-small: 0.9375rem; /* 15 */
  --fs-micro: 0.8125rem; /* 13 */
  --lh-body: 1.7;
  --measure: 42rem;    /* ~720px colonne de lecture */

  /* ---- Espacements ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Rayons ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Ombres (très douces) ---- */
  --shadow-sm: 0 1px 2px rgba(11,27,43,.06);
  --shadow-md: 0 6px 24px rgba(11,27,43,.08);
  --shadow-card: 0 4px 16px rgba(11,27,43,.06);
  --shadow-pop: 0 18px 48px rgba(11,27,43,.14);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 150ms;
  --t-med: 220ms;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-prose: 46rem;
  --header-h: 68px;

  color-scheme: light;
}

/* ============================================================
   DARK MODE — appliqué via [data-theme="dark"] (toggle) et
   en repli auto via prefers-color-scheme plus bas.
   ============================================================ */
[data-theme="dark"] {
  --bg: #0B1B2B;
  --surface: #13283C;
  --surface-alt: #0F2133;
  --border: #244056;
  --ink-900: #E6EDF3;
  --ink-600: #A7BACB;
  --ink-400: #6E869B;

  --brand-700: #5FA8E0;   /* liens/titres lisibles sur sombre */
  --brand-500: #3E8FD4;

  --accent-soft: #103A35;
  --accent-line: #1C5C52;
  --danger-soft: #3A1F22;
  --header-bg: rgba(11,27,43,0.82);
  --hero-tint: #102438;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 24px rgba(0,0,0,.45);
  --shadow-card: 0 4px 16px rgba(0,0,0,.35);
  --shadow-pop: 0 18px 48px rgba(0,0,0,.55);

  color-scheme: dark;
}

/* Repli automatique si l'utilisateur n'a pas choisi (pas d'attribut data-theme="light") */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1B2B;
    --surface: #13283C;
    --surface-alt: #0F2133;
    --border: #244056;
    --ink-900: #E6EDF3;
    --ink-600: #A7BACB;
    --ink-400: #6E869B;
    --brand-700: #5FA8E0;
    --brand-500: #3E8FD4;
    --accent-soft: #103A35;
    --accent-line: #1C5C52;
    --danger-soft: #3A1F22;
    --header-bg: rgba(11,27,43,0.82);
    --hero-tint: #102438;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 6px 24px rgba(0,0,0,.45);
    --shadow-card: 0 4px 16px rgba(0,0,0,.35);
    --shadow-pop: 0 18px 48px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}