/* ========================================================================== F&I STUDIO — DESIGN TOKENS (source unique de vérité visuelle) ========================================================================== Ce fichier est la fondation du nouveau Design System. Il ne modifie AUCUN rendu existant à lui seul : rien dans main.css / aesthetic-presentation.css / settings-premium.css ne référence encore ces variables. Voir docs/DESIGN_SYSTEM.md pour la philosophie, la hiérarchie de vérité et les règles d'usage complètes. Origine de chaque groupe de tokens : voir docs/UI_AUDIT.md (§3 et §8). Décisions prises avant la création de ce fichier : - Mode sombre : HORS SCOPE pour cette étape (aucun `prefers-color-scheme`, aucun `data-theme` ici — voir docs/UI_AUDIT.md §4.10). Les valeurs sombres existent déjà dans la maquette de référence et pourront être ajoutées plus tard sans repenser la structure des tokens. - Nommage sémantique : `--fi-indigo` (et équivalents génériques par nom de couleur) sont volontairement ABSENTS. L'audit a montré que ce nom portait déjà deux valeurs différentes selon l'endroit du code (docs/UI_AUDIT.md §4.12) ; plutôt que d'en choisir une arbitrairement, les tokens ci-dessous expriment un RÔLE (accent de marque, action principale, succès…), jamais un nom de couleur brut. - États hover/focus/active/disabled : la page de référence ne les définit presque pas (un seul `:hover` dans tout son code — docs/UI_AUDIT.md §3). Les valeurs ci-dessous marquées [EXTENSION DU DESIGN SYSTEM] sont donc conçues, pas extraites, dérivées mathématiquement des tokens de base via color-mix() pour rester ancrées dans la palette plutôt que d'introduire de nouvelles couleurs arbitraires. ========================================================================== */ :root{ /* V3 (approuvé 2026-10-08) : valeurs alignées sur la palette de l'Accueil et du Dossier V3 (css/v3/tokens.css --v3-home-*). Même rôles, mêmes noms : tous les composants .fi-* adoptent le langage V3 depuis cette source unique. */ /* -------------------------------------------------------------------- SURFACES — [EXTRAIT DE LA RÉFÉRENCE] -------------------------------------------------------------------- */ --fi-bg:#f4f6fb; /* fond de page */ --fi-surface:#ffffff; /* carte / surface principale */ --fi-surface-2:#f6f8fc; /* surface secondaire, encart, champ au repos */ --fi-border:#e3e7f0; /* bordure standard */ --fi-border-soft:#edf0f6; /* bordure discrète (séparateur interne) */ --fi-hover-surface:color-mix(in srgb, var(--fi-action-primary) 6%, var(--fi-surface)); /* survol V3 commun : voile bleu léger (≠ sélection, ≠ focus) */ --fi-hover-accent-soft:color-mix(in srgb, var(--fi-action-primary) 16%, var(--fi-surface)); /* survol des actions déjà bleu doux au repos */ --fi-calendar-today-bg:var(--fi-border); /* repère « aujourd'hui » des calendriers (≠ sélection, ≠ survol) */ /* -------------------------------------------------------------------- TEXTE — [EXTRAIT DE LA RÉFÉRENCE] -------------------------------------------------------------------- */ --fi-ink:#171b2a; /* texte principal */ --fi-ink-soft:#69728a; /* texte secondaire */ --fi-ink-faint:#929bb1; /* texte discret / métadonnée */ /* -------------------------------------------------------------------- ACCENT DE MARQUE — [EXTRAIT DE LA RÉFÉRENCE] Réservé aux états actifs, badges « recommandé », étiquettes de section. Remplace tout usage de doré/ambre hérité (docs/UI_AUDIT.md §4.4). -------------------------------------------------------------------- */ --fi-accent:#0d8290; --fi-accent-ink:#0a6670; --fi-accent-soft:#eaf7f8; --fi-accent-line:#bfe3e7; /* -------------------------------------------------------------------- ACTION PRINCIPALE — [EXTRAIT DE LA RÉFÉRENCE, hover/active dérivés] Réservée aux actions ("Envoyer", "Ajouter") — jamais utilisée comme accent de marque. -------------------------------------------------------------------- */ --fi-action-primary:#3d5cc8; /* [EXTRAIT] */ --fi-action-primary-ink:#2e47a8; /* [EXTRAIT] */ --fi-action-primary-soft:#edf2ff; /* [EXTRAIT] */ /* [EXTENSION DU DESIGN SYSTEM] — la référence ne définit pas ces états ; dérivés du token de base pour rester dans la même famille de couleur. */ --fi-action-primary-hover:color-mix(in srgb, var(--fi-action-primary) 90%, black); --fi-action-primary-active:color-mix(in srgb, var(--fi-action-primary) 80%, black); /* Aplat des actions principales (boutons primaires, ligne d'action mise en avant) : marine-ardoise profond et désaturé, sobre comme les nouveaux Paramètres. Le bleu --fi-action-primary reste réservé au focus, aux sélections et aux accents. */ --fi-action-solid:#20294f; --fi-action-solid-hover:color-mix(in srgb, var(--fi-action-solid) 88%, black); --fi-action-solid-active:color-mix(in srgb, var(--fi-action-solid) 78%, black); --fi-action-solid-soft:#e8ecf5; /* -------------------------------------------------------------------- SÉMANTIQUE — un rôle, une variante essentielle chacun -------------------------------------------------------------------- */ /* Succès — [EXTRAIT DE LA RÉFÉRENCE] */ --fi-success:#179765; --fi-success-soft:#e9f7f1; --fi-success-line:#b9e6d1; /* Avertissement — [EXTENSION DU DESIGN SYSTEM] : absent de la référence (qui n'a aucun état d'erreur/avertissement visible). Choisi en gardant la même structure fond-pastel/ligne/texte que les tokens sémantiques déjà validés ci-dessus, sans inventer une nouvelle famille de couleur arbitraire (ambre, cohérent avec l'usage bancaire/comptable du projet). */ --fi-warning:#b4740e; --fi-warning-soft:#fbf1df; --fi-warning-line:#f0d9a8; /* Danger — [EXTENSION DU DESIGN SYSTEM] : absent de la référence. */ --fi-danger:#d8434f; --fi-danger-soft:#fdecee; --fi-danger-line:#f0c4c0; /* Information — [EXTENSION DU DESIGN SYSTEM] : alias sémantique de l'accent de marque pour les messages neutres/informatifs, afin de ne pas inventer une 5e couleur de rôle alors que l'accent turquoise remplit déjà ce besoin. */ --fi-info:var(--fi-accent); --fi-info-soft:var(--fi-accent-soft); --fi-info-line:var(--fi-accent-line); /* -------------------------------------------------------------------- PALETTE DE PUCES D'ICÔNES — [EXTRAIT DE LA RÉFÉRENCE / main.css existant] Motif déjà cohérent et informel dans main.css (docs/UI_AUDIT.md §5/§7 point 5) : conservé tel quel plutôt que réinventé. -------------------------------------------------------------------- */ --fi-chip-blue-bg:#edf2ff; --fi-chip-blue-fg:#3d5cc8; --fi-chip-purple-bg:#f0edfb; --fi-chip-purple-fg:#614cc4; --fi-chip-orange-bg:#fff1e2; --fi-chip-orange-fg:#d9790f; --fi-chip-pink-bg:#fdecee; --fi-chip-pink-fg:#d8434f; --fi-chip-indigo-bg:#eef1fb; --fi-chip-indigo-fg:#5d67d8; --fi-chip-green-bg:#e9f7f1; --fi-chip-green-fg:#179765; /* -------------------------------------------------------------------- RONDEURS — échelle fermée à 7 paliers [EXTRAIT DE LA RÉFÉRENCE, corrigée lors de la 2e passe d'audit — docs/UI_AUDIT.md §3] Aucune autre valeur de border-radius n'est autorisée dans le nouveau Design System sans justification documentée. -------------------------------------------------------------------- */ --fi-radius-xs:8px; --fi-radius-sm:9px; --fi-radius-md:10px; --fi-radius-lg:12px; --fi-radius-xl:14px; --fi-radius-2xl:16px; --fi-radius-3xl:18px; --fi-radius-pill:999px; --fi-radius-circle:50%; /* -------------------------------------------------------------------- OMBRES — 2 paliers [EXTRAIT DE LA RÉFÉRENCE] -------------------------------------------------------------------- */ --fi-shadow-sm:0 1px 2px rgba(31,42,74,.04), 0 10px 24px rgba(31,42,74,.045); --fi-shadow-lg:0 2px 4px rgba(31,42,74,.05), 0 24px 48px -20px rgba(31,42,74,.18); /* [EXTENSION DU DESIGN SYSTEM] anneau de focus clavier, absent de la référence — dérivé du token d'action principale pour rester cohérent. */ --fi-shadow-focus-ring:0 0 0 3px color-mix(in srgb, var(--fi-action-primary) 20%, transparent); /* -------------------------------------------------------------------- TYPOGRAPHIE — une seule famille [EXTRAIT DE LA RÉFÉRENCE] IMPORTANT : Plus Jakarta Sans (LEGACY — à retirer après migration typographique, voir docs/DESIGN_SYSTEM.md §E) n'apparaît PAS ici. Ce token est la seule pile de police officielle du Design System. -------------------------------------------------------------------- */ --fi-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Échelle de taille [EXTRAIT DE LA RÉFÉRENCE] */ --fi-text-2xs:10.5px; --fi-text-xs:11px; --fi-text-sm:12px; --fi-text-sm2:12.5px; --fi-text-base:13px; --fi-text-base2:13.5px; --fi-text-md:14px; --fi-text-md2:14.5px; --fi-text-lg:16px; --fi-text-xl:19px; --fi-text-2xl:30px; /* Graisses [EXTRAIT DE LA RÉFÉRENCE, sauf --fi-weight-body] */ --fi-weight-nav:650; --fi-weight-meta:700; --fi-weight-interactive:750; --fi-weight-heading:800; /* [EXTENSION DU DESIGN SYSTEM] — la référence ne déclare aucun font-weight explicite sur son texte courant (hérite du défaut navigateur ~400). Fixé ici à 400 pour que les composants aient une valeur utilisable, sans prétendre que c'est une valeur observée. */ --fi-weight-body:400; /* Letter-spacing [EXTRAIT DE LA RÉFÉRENCE] */ --fi-tracking-tight:-.02em; /* grand titre */ --fi-tracking-snug:-.01em; /* titre de section, nom de marque */ --fi-tracking-wide:.05em; /* libellé en majuscules, court */ --fi-tracking-wider:.08em; /* libellé en majuscules, eyebrow */ /* Line-height [EXTRAIT DE LA RÉFÉRENCE] */ --fi-leading-tight:1.3; /* valeurs de statistique */ --fi-leading-normal:1.5; /* texte informatif */ /* -------------------------------------------------------------------- ESPACEMENT — [EXTRAIT DE LA RÉFÉRENCE, docs/UI_AUDIT.md §3] Échelle basée sur les espacements réellement observés dans la maquette — volontairement PAS une conversion automatique des espacements historiques de main.css (voir docs/UI_AUDIT.md §4.2/§4.3 : c'est précisément ce que ce système doit normaliser, pas hériter). -------------------------------------------------------------------- */ --fi-space-2xs:4px; --fi-space-xs:8px; --fi-space-sm:10px; --fi-space-md:12px; --fi-space-lg:14px; --fi-space-xl:16px; --fi-space-2xl:18px; --fi-space-3xl:20px; --fi-space-4xl:24px; --fi-space-5xl:26px; /* -------------------------------------------------------------------- DIMENSIONS DE CONTRÔLES — [EXTRAIT DE LA RÉFÉRENCE, déduit du padding + line-height, docs/UI_AUDIT.md §3] -------------------------------------------------------------------- */ --fi-control-height-compact:36px; /* select factice, lien de nav */ --fi-control-height-standard:44px; /* ligne d'action de liste */ --fi-control-height-primary:40px; /* bouton principal */ --fi-control-height-large:48px; /* CTA pleine largeur, bouton de statut */ --fi-control-height-header:32px; /* en-tête de fenêtre : Fermer / Agrandir (référence Paramètres) */ /* -------------------------------------------------------------------- MODALES D'APPLICATION — référence canonique des grands popups -------------------------------------------------------------------- */ --fi-modal-large-width:936px; --fi-modal-large-height:728px; --fi-modal-viewport-gutter:18px; }