/* Design tokens — Observatoire de l'Accession Sociale
   Source : Observatoire_Brief_Dev_ClaudeCode.md §4
   Règle d'or : --pop (rose) réservé à l'action et à la sélection.
*/

:root {
  /* — Socle d'identité — */
  --navy: #0E1D4D;
  --navy-light: #1a2e6b;
  --brand: #284181;
  --brand-light: #3555a8;
  --sky: #60A6DB;
  --pop: #f8c1d9;
  --warm: #fafaf8;

  /* — Texte — */
  --text: #1e293b;             /* sur fond clair */
  --text-muted-light: #64748b; /* sur fond clair */
  --text-muted: #9fb2d8;       /* sur navy */
  --text-on-navy: #f0f4ff;

  /* — Dispositifs (catégoriels) — */
  --d-hlm: #f8c1d9;   /* HLM ancien, rose signature (réaffecté : le bleu ciel se confondait) */
  --d-psla: #F0B44A;  /* PSLA, ambre */
  --d-brs: #3FCCA4;   /* BRS, menthe */
  --d-vefa: #B498F5;  /* VEFA, lavande */

  /* — Type de bien (axe distinct) — */
  --maison: #EC7A5C;
  --appartement: #60A6DB;

  /* — Rampe choroplèthe séquentielle (sur navy, fort = clair) — */
  --ramp-1: #20336e;
  --ramp-2: #2E519E;
  --ramp-3: #4B82CC;
  --ramp-4: #79B2E4;
  --ramp-5: #C7E4F8;
  --zone-insuffisante: #36456e;

  /* — Surfaces (cards translucides sur navy) — */
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-bg-hover: rgba(255, 255, 255, 0.07);
  --card-border: rgba(255, 255, 255, 0.09);

  /* — Couleur d'accent active (pilotée par JS via filtre dispositif) — */
  /* Défaut neutre = blanc (« Tous »). Le rose --pop est réaffecté à HLM ancien. */
  --accent: #ffffff;
  --accent-soft: rgba(255, 255, 255, 0.16);

  /* — Typographies — */
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "SF Mono", Menlo, Consolas, monospace;

  /* — Échelle typographique — */
  --fs-hero: clamp(2.5rem, 5.5vw + 1rem, 5rem);
  --fs-title: clamp(1.75rem, 2.5vw + 0.5rem, 2.75rem);
  --fs-subtitle: clamp(1.05rem, 0.5vw + 0.9rem, 1.25rem);
  --fs-totem: clamp(2.5rem, 4vw + 1rem, 4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* — Rythme & espace — */
  --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;

  --container-max: 1400px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  /* — Coins arrondis & ombres — */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* — Animations — */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 600ms;
}

/* Accents par segment — bascule via [data-dispositif] sur le scope souhaité.
   ancien = rose signature ; brs/psla/vefa = couleurs dispositif neuf. */
[data-dispositif="ancien"] { --accent: var(--d-hlm);  --accent-soft: rgba(248, 193, 217, 0.18); }
[data-dispositif="psla"]   { --accent: var(--d-psla); --accent-soft: rgba(240, 180, 74, 0.18); }
[data-dispositif="brs"]    { --accent: var(--d-brs);  --accent-soft: rgba(63, 204, 164, 0.18); }
[data-dispositif="vefa"]   { --accent: var(--d-vefa); --accent-soft: rgba(180, 152, 245, 0.18); }