/* ==========================================================================
   Coasia — Design Tokens
   Source : Figma — "Explorations" file, node "Design System" (1820:231)
   URL    : https://www.figma.com/design/FyCZgqDt8kg2rWpnSONabR/Explorations?node-id=1820-231&m=dev
   Extrait le : 2026-08-27
   Généré via Figma Dev Mode MCP (lecture directe des propriétés des nœuds,
   pas des étiquettes de texte).
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Couleurs
     Source : frame "Colors" (1820:375) — valeurs lues sur les fills réels
     ------------------------------------------------------------------------ */
  --color-blue-primary: #0E458A;   /* node 1820:376 */
  --color-navy: #072140;           /* node 1820:379 */
  --color-red-accent: #E5383E;     /* node 1820:380 */
  --color-gray-light: #EEEEEE;     /* node 1820:377 */
  --color-white: #FFFFFF;          /* node 1820:378 */

  /* Valeur additionnelle trouvée hors palette "Colors" : fond de section
     plein cadre (node 1820:233). Visuellement proche de --color-navy mais
     PAS identique — à confirmer avec le design. */
  --color-navy-section-bg: #0A1625; /* node 1820:233, "Section background" */

  /* Trouvées en implémentant la Section 2 (Modèle) — node 1820:60 */
  --color-navy-text: #012C42;      /* texte de paragraphe/cartes sur fond clair — distinct de --color-navy (titres) */
  --color-card-tint: rgba(14, 69, 138, 0.05); /* fond des cartes "model" — bleu primaire à 5% */
  --color-muted-blue: #7D8FA5; /* paragraphe secondaire sur fond sombre — Section 4 */

  /* Mappings sémantiques */
  --color-text-heading: var(--color-navy);
  --color-text-body: var(--color-navy-text);
  --color-text-accent: var(--color-red-accent);
  --color-surface-primary: var(--color-blue-primary);
  --color-surface-dark: var(--color-navy-section-bg);
  --color-surface-light: var(--color-gray-light);
  /* Fond de section pleine largeur (Hero et Section 2 partagent la même
     couleur à cet endroit du site — corrigé suite à un mauvais échantillonnage
     du screenshot, la vraie valeur est --color-gray-light). */
  --color-surface-tint: var(--color-gray-light);

  /* ------------------------------------------------------------------------
     Typographie (Desktop)
     Source : frame "Texte" (1820:366)
     ------------------------------------------------------------------------ */
  --font-family-heading: 'Gilroy', sans-serif; /* H1 / H2 */
  --font-family-body: 'Poppins', sans-serif;   /* H3, H4, Intro, Paragraphe, Surtitre, Boutons */

  /* Display — Gilroy Bold — CAPS — le très gros titre du footer ("Let's
     build what's next.") — plus grand que le H1 du Hero */
  --font-size-display: 120px;
  --line-height-display: 1.1;
  --font-weight-display: 700;

  /* H1 — Gilroy Bold — CAPS */
  --font-size-h1: 96px;
  --line-height-h1: 1.1;   /* 110% */
  --font-weight-h1: 700;

  /* H2 — Gilroy Bold — CAPS */
  --font-size-h2: 72px;
  --line-height-h2: 1.1;   /* 110% */
  --font-weight-h2: 700;

  /* H3 — Poppins Bold — CAPS */
  --font-size-h3: 28px;
  --line-height-h3: 1.2;   /* 120% */
  --font-weight-h3: 700;

  /* H4 — Poppins SemiBold — CAPS
     ⚠ Étiquette Figma = "SemiBold 24px", mais le nœud 1820:370 est
     actuellement stylé Bold/28px (identique à H3) dans le fichier.
     Valeurs ci-dessous = ce qui est DOCUMENTÉ (étiquette), à faire corriger
     dans Figma si l'incohérence n'est pas voulue. */
  --font-size-h4: 24px;
  --line-height-h4: 1.2;   /* 120% */
  --font-weight-h4: 600;

  /* Texte intro — Poppins Medium */
  --font-size-intro: 32px;
  --line-height-intro: 1.3; /* 130% */
  --font-weight-intro: 500;

  /* Paragraphe — Poppins Regular */
  --font-size-paragraph: 22px;
  --line-height-paragraph: 1.4; /* 140% */
  --font-weight-paragraph: 400;

  /* Chiffre et surtitre — Poppins Bold — couleur accent rouge */
  --font-size-surtitle: 18px;
  --line-height-surtitle: 1.2; /* 120% */
  --font-weight-surtitle: 700;
  --color-surtitle: var(--color-red-accent);

  /* Label / bouton — Poppins Medium (relevé sur les composants boutons) */
  --font-size-button: 20px;
  --font-weight-button: 500;

  /* Petit texte (description de carte, texte d'intro secondaire) — Poppins Regular */
  --font-size-small: 18px;
  --line-height-small: 1.4;
  --font-weight-small: 400;

  /* ------------------------------------------------------------------------
     Spacing / Grille (Desktop)
     Source : frame "Grid" (1820:238)
     ------------------------------------------------------------------------ */
  --grid-columns: 12;
  --grid-margin: 100px;
  --grid-gutter: 20px;

  /* Section pleine largeur — frame "Section background" (1820:232) */
  --section-max-width: 1920px;
  --section-content-width: 1840px;
  --section-padding: 40px;
  /* Inset interne des panneaux arrondis (Hero, Section 4…) : --grid-margin
     est mesurée depuis le bord de la fenêtre, mais un panneau a déjà sa
     propre marge de --section-padding — donc à l'intérieur, l'inset réel
     = 100 - 40 = 60px. Centralisé ici pour être réutilisé par tout panneau. */
  --panel-inset: calc(var(--grid-margin) - var(--section-padding));

  /* ------------------------------------------------------------------------
     Rayons de bordure
     ------------------------------------------------------------------------ */
  --radius-sm: 8px;    /* champs de formulaire — node 1820:298 */
  --radius-md: 12px;   /* cards, swatches couleurs, dropdowns — nodes 1820:246, 1820:376, 1820:281 */
  --radius-lg: 30px;   /* panneaux de section pleine largeur — node 1820:233 */
  --radius-pill: 40px; /* boutons primaires/secondaires (forme pilule) — node 1820:310 */

  /* ------------------------------------------------------------------------
     Ombres
     ------------------------------------------------------------------------ */
  --shadow-dropdown: 0px 6px 15px 0px rgba(0, 0, 0, 0.2); /* node 1820:281 */
}