/* ============================================================ TOKENS RUNTIME — dérivé de design-tokens.css (source de vérité) design-tokens.css est au format Tailwind v4 (@theme), ignoré par les navigateurs sans build. Ce fichier expose les MÊMES variables sur :root pour l'usage CSS pur. Ne pas éditer à la main : régénérer depuis design-tokens.css en cas de changement. ============================================================ */ :root { /* ---------------------------------------------------------- 1. COULEURS Nommage repris des paint styles Figma quand ils existent. HSL en commentaire pour chaque valeur. ---------------------------------------------------------- */ /* — Neutres / encre (texte, fonds sombres) — */ --color-ink: #26292E; /* "Charleston Green" · hsl(218, 10%, 16%) · texte principal, fonds sombres */ --color-ink-strong: #17181B; /* "Eerie Black" · hsl(225, 8%, 10%) */ --color-ink-soft: #383C42; /* "Onyx" · hsl(216, 8%, 24%) */ --color-neutral-950: #111111; /* hsl(0, 0%, 7%) · titres sur sections claires */ --color-black: #000000; /* — Surfaces claires — */ --color-white: #FFFFFF; --color-surface: #F4F6F7; /* "Cultured" · hsl(200, 16%, 96%) · fond de section */ --color-surface-2: #F1F1F1; /* hsl(0, 0%, 95%) · aussi utilisé en overlay @22% et @13% */ --color-surface-3: #F0F0F0; /* hsl(0, 0%, 94%) */ --color-media-bg: #E5E5E5; /* hsl(0, 0%, 90%) · fond placeholder images/médias (occurrence dominante) */ /* — Bordures — */ --color-border: #E5E7E9; /* "Platinum" · hsl(210, 8%, 91%) · bordure par défaut */ --color-border-strong: #CBD1D5; /* "American Silver" · hsl(204, 11%, 82%) */ --color-border-dark: #27292E; /* hsl(220, 8%, 17%) · bordures sur fonds sombres */ /* — Accent principal (violet) — */ --color-primary: #7160F3; /* hsl(247, 86%, 66%) */ --color-primary-vivid: #675EFF; /* hsl(243, 100%, 68%) · variante stroke/hover */ --color-primary-soft: #E9DDFE; /* "Lavender (Web)" · hsl(262, 94%, 93%) · fond de tag/badge */ /* — Accents secondaires (tags, illustrations, data-viz) — */ --color-accent-orange: #FF8A00; /* hsl(32, 100%, 50%) */ --color-accent-coral: #FF774A; /* hsl(15, 100%, 65%) */ --color-accent-blue: #004CE5; /* hsl(220, 100%, 45%) */ --color-accent-cyan: #03AED2; /* hsl(190, 97%, 42%) */ --color-accent-sky: #D9F3FF; /* "Water" · hsl(199, 100%, 93%) · fond de tag */ --color-accent-green: #3CBA00; /* hsl(101, 100%, 36%) · succès (fond @10%) */ --color-accent-pink: #FB4E70; /* hsl(348, 96%, 65%) */ --color-danger: #FF0000; /* hsl(0, 100%, 50%) · erreur (fond @10%) */ /* ---------------------------------------------------------- 2. TYPOGRAPHIE Manrope = police effective de la LP (titres, labels, corps). Inter Display = text styles nommés du fichier ("Heading 01…06", "Body"), utilisés dans les sections héritées. Les deux sont requis. ---------------------------------------------------------- */ --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif; --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif; /* — Échelle de tailles (valeurs mesurées, arrondies natives) — */ --text-hero: 72px; /* Manrope Bold · lh 72px (1) · ls -2% */ --text-hero--line-height: 72px; --text-hero--letter-spacing: -0.02em; --text-hero--font-weight: 700; --text-h1: 64px; /* SemiBold · lh 72px (1.125) · ls -2% · = style Figma "Heading 01-64px" */ --text-h1--line-height: 72px; --text-h1--letter-spacing: -0.02em; --text-h1--font-weight: 600; --text-h2: 54px; /* Manrope SemiBold · lh 56px (1.04) · ls -2% · titres de section */ --text-h2--line-height: 56px; --text-h2--letter-spacing: -0.02em; --text-h2--font-weight: 600; --text-h2-alt: 50px; /* Inter Display SemiBold · lh 62px · ls -2% · = "Heading 02-50px" */ --text-h2-alt--line-height: 62px; --text-h2-alt--letter-spacing: -0.02em; --text-h2-alt--font-weight: 600; --text-h3: 32px; /* Inter Display Medium · lh 44px · ls -2% · = "Heading 03-32px" */ --text-h3--line-height: 44px; --text-h3--letter-spacing: -0.02em; --text-h3--font-weight: 500; --text-h4: 24px; /* SemiBold/Medium · lh 32px · ls -1 à -2% · = "Heading 04-24px" */ --text-h4--line-height: 32px; --text-h4--letter-spacing: -0.015em; --text-h4--font-weight: 600; --text-h5: 21px; /* Manrope SemiBold · lh 32px (aérée) ou 26px (dense) · ls -2% · titres de card */ --text-h5--line-height: 32px; --text-h5--letter-spacing: -0.02em; --text-h5--font-weight: 600; --text-h6: 20px; /* Medium · lh 28–32px · ls -1% · = "Heading 05-20px" */ --text-h6--line-height: 28px; --text-h6--letter-spacing: -0.01em; --text-h6--font-weight: 500; --text-body-lg: 18px; /* Regular · lh 28px (1.56) · = "Body-18px" */ --text-body-lg--line-height: 28px; --text-body-lg--font-weight: 400; --text-body: 16px; /* Regular · lh 24px (1.5) · = "Body-16px" · corps par défaut */ --text-body--line-height: 24px; --text-body--font-weight: 400; --text-body-sm: 15px; /* Manrope Regular · lh 22px */ --text-body-sm--line-height: 22px; --text-body-sm--font-weight: 400; --text-small: 14px; /* Regular/Medium/SemiBold · lh 24px · UI, boutons, nav */ --text-small--line-height: 24px; --text-small--font-weight: 500; --text-caption: 13px; /* Medium · lh 20px */ --text-caption--line-height: 20px; --text-caption--font-weight: 500; --text-tiny: 12px; /* lh 16px */ --text-tiny--line-height: 16px; --text-tiny--font-weight: 400; /* — Eyebrow / label de section (signature typographique de la LP) — */ --text-eyebrow: 14px; /* Manrope Medium · lh 24px · ls +4% · uppercase probable */ --text-eyebrow--line-height: 24px; --text-eyebrow--letter-spacing: 0.04em; --text-eyebrow--font-weight: 500; /* ---------------------------------------------------------- 3. ESPACEMENTS Base 4px. Valeurs mesurées : gaps 2/4/6/8/10/16/18, paddings 8/12/14/16/20/24/28. Échelle étendue jusqu'aux gouttières (120px) mesurées sur le frame. ---------------------------------------------------------- */ --spacing: 4px; /* unité de base : p-1 = 4px, p-6 = 24px, etc. */ --spacing-gutter: 120px; /* marge latérale du frame 1440 (mesurée : sections à x=120) */ --spacing-section: 96px; /* rythme vertical inter-sections (dérivé, à ajuster visuellement) */ /* ---------------------------------------------------------- 4. BORDER-RADIUS Valeurs natives mesurées : 8, 10, 12, 14, 15, 16, 20, puis 70/80 (boutons pilule). ---------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* radius de card dominant */ --radius-xl: 20px; --radius-pill: 80px; /* boutons/tags pilule (70–80px mesurés) */ --radius-full: 9999px; /* ---------------------------------------------------------- 5. BREAKPOINTS & CONTAINER ⚠️ AUCUN breakpoint n'existe dans la maquette : une seule frame desktop 1440px, zéro déclinaison tablette/mobile. Valeurs ci-dessous : container MESURÉ (1200px de contenu, gouttières 120px) ; seuils tablette/mobile PROPOSÉS selon les standards — à valider avec le designer. ---------------------------------------------------------- */ --breakpoint-sm: 640px; /* proposé — mobile paysage */ --breakpoint-md: 768px; /* proposé — tablette */ --breakpoint-lg: 1024px; /* proposé — petit desktop */ --breakpoint-xl: 1280px; /* proposé — desktop, container 1200 + marges */ --breakpoint-2xl: 1440px; /* mesuré — largeur de conception de la maquette */ --container-max: 1200px; /* mesuré — largeur de contenu des sections */ --container-content: 1168px; /* mesuré — largeur interne récurrente (1200 - 2×16) */ }