/*
 * Design tokens — source unique de vérité.
 * Généré à partir de docs/da-exploration.md (étape 1a, validé).
 * Verrouillé après validation : ne pas ajouter de valeur brute ailleurs
 * dans le repo, toujours passer par une de ces variables.
 */

:root {
  /* Couleurs — texte */
  --color-heading: #171717;       /* titres, unifié depuis le cluster de noirs OP3/Gutenberg */
  --color-text: #262626;          /* texte courant */
  --color-text-secondary: #737373; /* texte secondaire */
  --color-text-tertiary: #a3a3a3;  /* légendes, texte tertiaire */
  --color-link: #6431f6;          /* lien distinctif — STRICTEMENT réservé au contenu d'article (.prose), jamais sur les pages marketing */

  /* Couleurs — accent (home, validé ronde 3) */
  --color-accent: #fece00;              /* jaune — coches, étapes "Comment ça marche" 1-3, étoiles, badges numérotés */
  --color-accent-soft: rgba(254, 206, 0, 0.8); /* variante 80% opacité mesurée (titres d'étape) */
  --color-accent-text: #ffffff;

  /* Couleurs — actions */
  --color-primary: #171717;             /* bouton primaire (unifié depuis #000000) */
  --color-primary-hover: #333333;       /* hover bouton primaire : gris foncé, transition lente */
  --color-primary-text: #ffffff;
  --color-secondary-bg: #f1f1f1;        /* bouton secondaire (pilules Bourse/Crypto/...) */
  --color-secondary-bg-hover: #ffffff;  /* hover : blanc, mouvement doux */
  --color-secondary-text: #171717;

  /* Couleurs — badges outline sémantiques (hero, validé ronde 3) */
  --color-success-bg: #eeffea;
  --color-success-text: #3ae06c;
  --color-info-bg: #edf7ff;             /* distinct de --color-background-info (#f7fbff), ne pas fusionner */
  --color-info-text: #6098ff;
  --color-error-bg: #ffeceb;            /* symétrique de --color-success, /page-conformite/ comparatif FIFO/DeclarAid, validé Sébastien */
  --color-error-text: #ff5a52;

  /* Couleurs — fonds */
  --color-background: #ffffff;
  --color-background-alt: #f6f6f6;      /* canonique du cluster gris clair (#f6f6f6/#f3f4f5/#fcfcfc) */
  --color-background-alt-dark: #e1e1e1; /* panneau "Chiffrement de Grade Militaire", mesuré/validé ronde 5 */
  --color-background-info: #f7fbff;     /* bleu très clair observé une seule fois */
  --color-background-dark: #1c1c1c;     /* section "Sécurité et Confidentialité", validé ronde 3 */
  --color-text-on-dark: #ffffff;
  --color-surface-muted: #f9fafb;       /* encadrés/callouts de contenu éditorial (article) */

  /* Couleurs — fonds pastel cards "Pour qui ?" (mesurés/validés ronde 5).
     Le 4e (vert) réutilise --color-success-bg, déjà identique. */
  --color-persona-yellow-bg: #fff8db;
  --color-persona-blue-bg: #e9f4ff;
  --color-persona-pink-bg: #ffeefd;

  /* Couleurs — bordures */
  --color-border: #e5e7eb;              /* bordure canonique — utilisée par toutes les cards, y compris pricing */

  /* Couleurs — tags de catégorie (tableau des courtiers, /page-courtiers/).
     5 couleurs mesurées sur le widget d'origine, validées explicitement par
     Sébastien pour ce composant précis — ne pas réutiliser ailleurs sans
     revalidation (voir docs/missing-components.md). */
  --color-tag-cto-bg: #4a90e2;
  --color-tag-pea-bg: #50e3c2;
  --color-tag-crypto-bg: #f5a623;
  --color-tag-crowdfunding-bg: #bd10e0;
  --color-tag-compte-bg: #7b8d93;
  --color-tag-text: #ffffff;

  /* Typographie */
  --font-family-heading: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-h1: 50px;   /* unifié — 3 valeurs différentes trouvées sur le site d'origine (45-54px) */
  --font-size-h2: 35px;
  --font-size-h3: 20px;   /* inversé avec H4 pour que H3 > H4 */
  --font-size-h4: 18px;
  --font-size-body: 16px;
  --font-size-xs: 11px;   /* badges/pilules, légendes très petites — mesuré (badge pricing) */
  --line-height-heading: 1.2;
  --line-height-body: 1.6;

  /* Espacements — échelle générale (provisoire, à confronter au clonage réel) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 36px;
  --space-2xl: 48px;  /* padding des panneaux (mesuré 50px sur l'original) — ronde 4 */
  --space-3xl: 88px;  /* padding vertical entre sections (mesuré ~90px sur l'original) — ronde 4 */

  /* Espacements — valeurs mesurées, conservées telles quelles (hors échelle ci-dessus) */
  --padding-btn-compact: 14px;
  --padding-btn-large: 18px 36px;
  --padding-badge: 4px 10px;             /* pilule pricing — petite, pas un bouton */
  --space-card: 24px;                    /* card marketing classique / harmonisée */
  --padding-card-marketing: 25px 20px 21px; /* card marketing classique (ex: liste de courtiers), mesuré */

  /* Tailles — badges/avatars (home, validé ronde 3) */
  --size-icon-badge: 64px;   /* cercle icône (.icon-badge) */
  --size-badge-step: 32px;   /* cercle numéroté (.badge-step) */
  --size-avatar-sm: 56px;    /* avatar card-quote */
  --size-avatar-md: 72px;    /* avatar card-testimonial */

  /* Radius */
  --radius-sm: 5px;    /* bouton compact */
  --radius-md: 10px;   /* bouton large, card marketing classique, card FAQ */
  --radius-lg: 16px;   /* card générique harmonisée (encadrés d'article de type key-takeaways/example/steps) */
  --radius-toc: 14px;  /* card sommaire d'article */
  --radius-pricing: 11px; /* card pricing, conservé tel quel */
  --radius-pill: 999px;   /* badge/pilule pricing, badge outline */

  /* Ombres */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);                                    /* card générique harmonisée, aussi utilisée par le sous-menu de nav (.site-nav__dropdown ul) */
  --shadow-card-marketing: rgba(0, 0, 0, 0.27) 0px 0px 20px -4px;                  /* card marketing classique (ex: liste de courtiers), card témoignage, card-blog, card-quote (défaut), card-pricing--featured, badge photo flottant */
  --shadow-toc: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; /* card sommaire d'article */
  --shadow-faq: rgba(0, 0, 0, 0.23) 0px 0px 13px -6px;                             /* card FAQ (marketing + fin d'article) */

  /* Animation — carrousel témoignages (home). Rangée unique de 6 cards
     (ronde 5, remplace les 2 rangées de 3 de la ronde 3) — durée doublée
     pour garder la même vitesse de défilement qu'avant (piste 2x plus longue). */
  --duration-marquee: 120s;

  /* Breakpoints (en commentaire, réutilisés dans les media queries) */
  /* mobile: max-width 767px / tablet: 768–1023px / desktop: 1024px+ */
  /* Bascule nav desktop -> mobile confirmée quelque part entre 768px et 1440px, non affinée précisément */
}