/* tokens.css — design system Synergetik (canonique) Charte V7.2 « Blue Trust », 2026-10-02 : la V7.1 du 2026-10-01 — accent #0441dc, moins agressif, mots d'accent des titres en accent dans les deux thèmes, thème sombre sur un fond #12151d —, plus un violet d'accompagnement et un dégradé signature bleu → violet, en touches (DESIGN.md § 4). Palette à ancres verrouillées. Thème clair par défaut ; thème sombre en variante ([data-theme="dark"]) ; le site web suit le thème de l'appareil ( ; son bouton de bascule pose data-theme="light" ou "dark" pour la visite en cours, sans stockage durable). Règle du chevron : chevron du bas = --accent ; chevron du haut et mot-symbole = --fg (#08090f sur fond clair, #f7f7f7 sur fond sombre). △ = paire sous le seuil de la charte, écart décidé par le dirigeant (DESIGN.md § 4). Détails : DESIGN.md. Self-host des polices : objectif à terme (#14) — rappel d'incohérence souveraineté ; ne bloque pas une livraison ; Google Fonts en brouillon et en livraison tant que #14 est ouvert. */ :root { color-scheme: light; /* ---------- Thème clair (défaut) — ancres verrouillées ---------- */ --bg: #f7f7f7; /* ancre : gris très clair neutre */ --fg: #08090f; /* ancre : encre quasi noire (chevron haut) · 18,6:1 */ --accent: #0441dc; /* ancre : bleu profond (chevron bas / signature) · 7,0:1 */ /* Dérivés clairs */ --surface: #ffffff; /* cartes, blocs · 1,07:1 sur --bg, la bordure complète */ --border: #d6d6d6; --muted: #565a6b; /* 6,4:1 sur --bg */ --accent-hover: #1d58ed; /* encre posée dessus : 5,7:1 */ --accent-soft: #9bb3f2; /* états intermédiaires, jamais du texte */ --accent-text: #0441dc; /* texte accent · 7,0:1 sur --bg, 7,5:1 sur --surface */ --ink-on-accent: #ffffff; /* CTA : texte blanc sur bleu · 7,5:1 */ --bg-alt: #edf0f6; /* fond de section alterné · encre 17,4:1, muted 6,0:1, accent 6,6:1 ; --surface s'y détache à 1,14:1 */ --accent-wash: #eaeffd; /* surface teintée d'accent (encadré, bloc mis en avant) · muted 6,0:1, accent 6,5:1 ; jamais un fond de page */ --violet: #7b2ff7; /* violet d'accompagnement (V7.2), en touches : formes, pastilles, fin du dégradé · 5,5:1 sur --bg ; encre blanche posée dessus 5,8:1 */ --violet-text: #6c22ec; /* petits textes violets · 6,4:1 sur --bg, 6,8:1 sur --surface, 6,0:1 sur --bg-alt */ /* ---------- Thème sombre (variante) — V7.1 ---------- */ --dark-bg: #12151d; /* ancre : bleu nuit très sombre · encre 17,0:1 */ --dark-fg: #f7f7f7; /* ancre (chevron haut) */ --dark-accent: #0441dc; /* ancre, identique au clair · △ chevron bas 2,4:1 sur --bg */ --dark-surface: #1d212c; /* cartes, blocs · 1,14:1 sur --bg */ --dark-border: #303545; /* 1,5:1 sur --bg */ --dark-muted: #a4a8b8; /* 7,7:1 sur --bg, 6,8:1 sur --surface */ --dark-accent-hover: #1d58ed; /* encre posée dessus : 5,7:1 */ --dark-accent-soft: #24356f; --dark-accent-text: #5a86f6; /* petits textes accent, liens, focus : l'accent éclairci · 5,4:1 sur --bg, 4,7:1 sur --surface ; les mots d'accent des titres restent en --accent (DESIGN.md § 4) */ --dark-ink-on-accent: #ffffff; /* 7,5:1 */ --dark-bg-alt: #171a23; /* fond de section alterné · 1,05:1 sur --bg · muted 7,3:1 */ --dark-accent-wash: #151d39; /* surface teintée d'accent, bleu nuit · 1,10:1 sur --bg · muted 7,0:1 */ --dark-violet: #9d6bff; /* 5,2:1 sur --bg */ --dark-violet-text: #ad85ff; /* 6,6:1 sur --bg, 5,8:1 sur --surface, 6,0:1 sur --accent-wash */ } /* Thème sombre explicite : bascule manuelle, section ou support sombre */ [data-theme="dark"] { color-scheme: dark; --bg: var(--dark-bg); --fg: var(--dark-fg); --accent: var(--dark-accent); --surface: var(--dark-surface); --border: var(--dark-border); --muted: var(--dark-muted); --accent-hover: var(--dark-accent-hover); --accent-soft: var(--dark-accent-soft); --accent-text: var(--dark-accent-text); --ink-on-accent: var(--dark-ink-on-accent); --bg-alt: var(--dark-bg-alt); --accent-wash: var(--dark-accent-wash); --violet: var(--dark-violet); --violet-text: var(--dark-violet-text); } /* Site web : suit le thème de l'appareil quand */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; --bg: var(--dark-bg); --fg: var(--dark-fg); --accent: var(--dark-accent); --surface: var(--dark-surface); --border: var(--dark-border); --muted: var(--dark-muted); --accent-hover: var(--dark-accent-hover); --accent-soft: var(--dark-accent-soft); --accent-text: var(--dark-accent-text); --ink-on-accent: var(--dark-ink-on-accent); --bg-alt: var(--dark-bg-alt); --accent-wash: var(--dark-accent-wash); --violet: var(--dark-violet); --violet-text: var(--dark-violet-text); } } /* ---------- Dégradé signature (V7.2, DESIGN.md § 4) ---------- Le seul dégradé de la charte : du bleu de la signature au violet, toujours dans ce sens. En touches — mots d'accent des titres, bouton principal, filets, pastilles, chiffres clés — et en fond, une seule déclinaison sombre : les moments de marque (bande sombre, appel final). */ :root { --degrade: linear-gradient(100deg, #0441dc 0%, #5a2df0 55%, #8a2ff7 100%); --degrade-survol: linear-gradient(100deg, #1d58ed 0%, #6a3cf5 55%, #9645fa 100%); --degrade-sombre: linear-gradient(135deg, #0c1440 0%, #12151d 48%, #23104d 100%); /* encre 15,6:1, muted 7,1:1 au plus sombre */ } /* ---------- Typographie ---------- */ :root { --font-display: "Instrument Sans", "Hanken Grotesk", sans-serif; --font-body: "Hanken Grotesk", "Helvetica Neue", sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1.0625rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-hero: clamp(2.75rem, 6vw, 4.5rem); --leading-body: 1.65; --leading-tight: 1.12; --tracking-tight: -0.015em; --weight-display: 700; /* hero et titres */ } /* ---------- Espacement, rayon, focus (DESIGN.md § 7) ---------- */ :root { --space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-card: 12px; /* cartes, blocs, boutons — aucune ombre */ --focus-width: 2px; /* contour plein en --accent-text */ --focus-offset: 2px; }