/* ═══════════════════════════════════════════════════════════════════════════
   Avisira — Design tokens (source unique de vérité visuelle)

   Tout le site (styles.css) et la page /design-system lisent CES variables.
   Ne jamais écrire une couleur, une taille, un rayon ou une ombre en dur ailleurs :
   ajouter / modifier un token ici, et tout le site suit.

   Sommaire : 1. Polices · 2. Couleurs · 3. Typographie · 4. Espacements
              5. Rayons · 6. Ombres · 7. Mouvement · 8. Mise en page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Polices auto-hébergées (Fontsource, SIL OFL 1.1, sous-ensemble latin) ── */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-latin-800.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-latin-700.woff2") format("woff2"); }

:root {
  /* ── 2. Couleurs ─────────────────────────────────────────────────────────── */

  /* Primaire — bleu confiance : liens, boutons, accents d'interface */
  --color-primary: #185FA5;
  --color-primary-hover: #2E7CD6;
  --color-primary-soft: #EAF2FB;      /* fonds légers, état sélectionné */
  --color-primary-border: #DCE9F8;    /* contour des fonds légers */
  --color-primary-on-dark: #9FC4EC;   /* bleu lisible sur fond sombre */

  /* Bleu profond — marque (logo), titres forts */
  --color-deep: #17466F;
  --color-deep-hover: #1F5A8C;
  --color-deep-soft: #E6EDF4;

  /* Accent ambre — chaleur, étoiles, détails de marque (jamais pour du texte courant) */
  --color-accent: #E8A13C;
  --color-accent-hover: #D18A24;
  --color-accent-soft: #FDF3E3;
  --color-accent-strong: #8A5A12;     /* texte ambre sur fond accent-soft (chips « Dès que possible », « à demander ») */

  /* Neutres — gris froids */
  --gray-0: #FFFFFF;
  --gray-50: #F7F8FA;
  --gray-100: #EEF1F5;
  --gray-150: #E4E8EF;
  --gray-200: #D5DBE4;
  --gray-300: #CBD3DE;
  --gray-400: #9AA5B4;
  --gray-500: #5B6675;
  --gray-700: #334155;
  --gray-900: #1B2430;

  /* Sémantiques */
  --color-success: #1D9E75;           /* « ce qui plaît », tarifs affichés */
  --color-success-strong: #145C46;
  --color-success-soft: #E7F6EF;
  --color-success-border: #CDEBDC;
  --color-vigilance: #D85A30;         /* corail : « ce qui revient », champ requis */
  --color-vigilance-strong: #B23A14;  /* messages d'erreur */
  --color-vigilance-soft: #FBEDE6;
  --color-vigilance-faint: #FFF8F5;   /* fond de champ en erreur */
  --color-vigilance-border: #F2D5C5;

  /* Rôles (à utiliser dans les composants plutôt que l'échelle brute) */
  --color-bg: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-translucent: rgba(255, 255, 255, .9);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-500);
  --color-text-on-dark: var(--gray-0);
  --color-text-on-dark-muted: #C8D0DC;
  --color-text-on-dark-soft: rgba(255, 255, 255, .75);
  --color-border: var(--gray-150);
  --color-border-strong: #D4DBE6;     /* contour de carte au survol */
  --color-border-input: var(--gray-300);
  --color-neutral-soft: var(--gray-100);   /* badges factuels neutres */
  --color-neutral-strong: var(--gray-700);
  --color-neutral-border: var(--gray-200);
  --color-star: var(--color-accent);
  --color-focus: var(--color-primary-hover);

  /* ── 3. Typographie ──────────────────────────────────────────────────────── */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;     /* UI + corps */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;                    /* titres éditoriaux, accroches, marque */

  /* Échelle (base 17px, généreuse pour un public senior). Rem = 16px navigateur. */
  --text-display: clamp(2rem, 4.6vw, 3rem);       /* titre d'accueil */
  --text-h1: clamp(1.75rem, 3.6vw, 2.4rem);       /* titre de page */
  --text-accroche: clamp(1.75rem, 4vw, 2.6rem);    /* accroche de fiche (Space Grotesk) */
  --text-h2: 1.5rem;                               /* 24px — sections */
  --text-h3: 1.375rem;                             /* 22px — sous-sections, panneaux */
  --text-h4: 1.25rem;                              /* 20px — titres de cartes */
  --text-lead: 1.125rem;                           /* 18px — chapeau, texte mis en avant */
  --text-body: 1.0625rem;                          /* 17px — corps */
  --text-ui: 1rem;                                 /* 16px — boutons, champs (évite le zoom iOS) */
  --text-small: .9375rem;                          /* 15px — méta, aides */
  --text-caption: .875rem;                         /* 14px — minimum du texte courant (légendes, méta) */
  --text-meta: .8125rem;                           /* 13px — fil d'Ariane, nom Google (texte secondaire) */
  --text-numeral: 2rem;                            /* note sur carte */
  --text-numeral-xl: 3.4rem;                       /* note de fiche */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -.015em;
  --tracking-tight: -.01em;
  --tracking-wide: .05em;
  --tracking-wider: .08em;

  /* ── 4. Espacements (échelle 4px) ─────────────────────────────────────────── */
  --space-1: .25rem;   /*  4px */
  --space-2: .5rem;    /*  8px */
  --space-3: .75rem;   /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --tap-target: 44px;  /* cible tactile minimale */
  --control-height: 40px;  /* boutons pilule de la barre de filtres */

  /* ── 5. Rayons ─────────────────────────────────────────────────────────── */
  --radius-sm: 8px;    /* focus, petits éléments */
  --radius-md: 12px;   /* boutons, champs, blocs internes */
  --radius-lg: 16px;   /* cartes, panneaux */
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ── 6. Ombres (douces, jamais de drop-shadow lourde) ────────────────────── */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .06);     /* repos : cartes, panneaux */
  --shadow-2: 0 4px 10px rgba(16, 24, 40, .07), 0 10px 24px rgba(16, 24, 40, .08);  /* survol */
  --shadow-3: 0 8px 20px rgba(16, 24, 40, .08), 0 20px 40px rgba(16, 24, 40, .10);  /* éléments flottants */
  --shadow-focus: 0 0 0 3px var(--color-primary-soft);                              /* anneau de focus des champs */

  /* ── 7. Mouvement (micro-interactions douces) ──────────────────────────────── */
  --duration-instant: 80ms;    /* appui (translateY) */
  --duration-fast: 150ms;      /* survols */
  --duration-base: 220ms;      /* ouvertures, apparitions */
  --duration-slide: 200ms;     /* écrans du formulaire en étapes (glissé) */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-standard: ease;

  /* ── 8. Mise en page ─────────────────────────────────────────────────────── */
  --layout-max: 1100px;
  --layout-gutter: 92vw;
  --header-offset: 80px;       /* compense le header sticky sur les ancres */
  --header-height: 74px;       /* hauteur du header sticky (barre de filtres collée dessous) */
}