/* =============================================================
   proteger-mes-donnees.fr : Design tokens
   Évolution du système existant. Couleur primaire teal de
   confiance (--c-primary-600 #0b7d88), accent ambre réservé
   aux alertes, neutres clairs légèrement tiédis.
   Contrastes visés : WCAG AA strict.
   ============================================================= */

:root {
  /* ---- Couleur primaire : teal de confiance ---------------- */
  --c-primary-50:  #f0fafb;
  --c-primary-100: #d6f0f3;
  --c-primary-200: #ade0e6;
  --c-primary-300: #79c9d2;
  --c-primary-400: #45aab6;
  --c-primary-500: #1c8e9a;
  --c-primary-600: #0b7d88; /* base */
  --c-primary-700: #0a656f;
  --c-primary-800: #0c525a;
  --c-primary-900: #0d4248;

  /* ---- Accent ambre : alertes et mises en avant UNIQUEMENT -- */
  --c-amber-50:  #fffaeb;
  --c-amber-100: #fef0c7;
  --c-amber-300: #fcd34d;
  --c-amber-500: #f59e0b; /* base accent */
  --c-amber-700: #b45309;
  --c-amber-900: #78350f;

  /* ---- Succès (vert sobre) --------------------------------- */
  --c-success-50:  #ecfdf3;
  --c-success-100: #d1fadf;
  --c-success-500: #15935a;
  --c-success-700: #0e6b41;

  /* ---- Danger (rouge sobre) -------------------------------- */
  --c-danger-50:  #fef3f2;
  --c-danger-100: #fee4e2;
  --c-danger-500: #c8372d;
  --c-danger-700: #9a261f;

  /* ---- Info (réutilise le teal pour cohérence) ------------- */
  --c-info-50:  var(--c-primary-50);
  --c-info-700: var(--c-primary-700);

  /* ---- Neutres : gris très légèrement tiédis --------------- */
  --c-white:      #ffffff;
  --c-neutral-50:  #f8f9f9;  /* surface très légèrement teintée */
  --c-neutral-100: #f1f3f3;
  --c-neutral-200: #e4e8e8;
  --c-neutral-300: #d3d9d9;
  --c-neutral-400: #aab2b2;
  --c-neutral-500: #7d8585;
  --c-neutral-600: #5b6363;
  --c-neutral-700: #424949;
  --c-neutral-800: #2b3131;
  --c-neutral-900: #1a1f1f;

  /* ---- Rôles sémantiques ----------------------------------- */
  --bg:            var(--c-white);
  --bg-subtle:     var(--c-neutral-50);
  --bg-muted:      var(--c-neutral-100);
  --surface:       var(--c-white);
  --border:        var(--c-neutral-200);
  --border-strong: var(--c-neutral-300);

  --text:          var(--c-neutral-900);
  --text-secondary:var(--c-neutral-700);
  --text-muted:    var(--c-neutral-600);
  --text-on-primary: var(--c-white);

  --link:          var(--c-primary-700);
  --link-hover:    var(--c-primary-800);

  --focus-ring:    var(--c-primary-500);

  /* ---- Typographie ----------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo",
               "Consolas", monospace;

  /* Échelle pensée pour la lecture longue : corps 17px */
  --fs-xs:   0.8125rem;  /* 13px : méta, chips */
  --fs-sm:   0.9375rem;  /* 15px : légendes */
  --fs-base: 1.0625rem;  /* 17px : corps */
  --fs-md:   1.1875rem;  /* 19px : chapô */
  --fs-lg:   1.375rem;   /* 22px */
  --fs-xl:   1.75rem;    /* 28px */
  --fs-2xl:  2.25rem;    /* 36px */
  --fs-3xl:  2.875rem;   /* 46px : H1 desktop */
  --fs-4xl:  3.5rem;     /* 56px : hero */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.65;   /* interligne lecture longue */

  --ff-semibold: 600;
  --ff-bold: 700;

  --measure: 44rem;   /* largeur de ligne max en prose */

  /* ---- Espacement (base 4px) ------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Rayons (10 à 16px) ---------------------------------- */
  --r-sm:  8px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* ---- Ombres très douces ---------------------------------- */
  --shadow-xs: 0 1px 2px rgba(13, 66, 72, 0.06);
  --shadow-sm: 0 1px 3px rgba(13, 66, 72, 0.07), 0 1px 2px rgba(13, 66, 72, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 66, 72, 0.07), 0 2px 4px rgba(13, 66, 72, 0.04);
  --shadow-lg: 0 12px 28px rgba(13, 66, 72, 0.10), 0 4px 8px rgba(13, 66, 72, 0.05);

  /* ---- Divers ---------------------------------------------- */
  --container: 72rem;     /* largeur max contenu large */
  --container-narrow: 48rem;
  --header-h: 68px;
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}