/* ============================================================================ Loca-fleet — Design Tokens (SOURCE UNIQUE) ---------------------------------------------------------------------------- Charte extraite de public/img/logo.svg + favicon.svg : navy #041E3F · navy profond #0a2a55 teal #12E7AD · teal clair #5AEEC4 Chargé en TÊTE de sur chaque page HTML par App\Http\Middleware\InjectDesignTokens → sert de socle : les vues CONSOMMENT ces variables et ne doivent plus redéfinir --accent / --surface / --text / --radius dans leur propre :root. Architecture 2 couches : PRIMITIVES (échelles brutes) → SÉMANTIQUES (rôles). ── COEXISTENCE avec public/css/gs-components.css (à ne PAS confondre) ── Deux conventions de nommage héritées cohabitent, aux MÊMES VALEURS : • --gs-* → public/css/gs-components.css : tokens + kit de composants .gsa-*. Lié explicitement par layouts.app et les vues autonomes. • --accent/--surface/… (CE fichier) : socle un-préfixé utilisé par les vues autonomes (login, tracking-v2, cpanel, dashboards) qui posaient chacune leur propre :root → maintenant fourni UNE fois, globalement. Ce fichier est tokens-only (aucun reset/sélecteur d'élément) → il ne peut pas doublonner le framework de gs-app.css. « Mêmes valeurs » n'est PAS une intention, c'est une contrainte VÉRIFIÉE : AssetIntegrityTest::test_design_token_vocabularies_agree parse les deux feuilles et échoue si --x ≠ --gs-x (clair ET sombre). Trois dérives avaient déjà passé inaperçues (--text-faint, --danger, --accent-2 sombre) : le socle se disait « source unique » tout en servant deux palettes différentes. Les deux fichiers restent LITTÉRAUX (pas d'alias var(--gs-x)) à dessein : aliaser rendrait le socle un-préfixé — donc la page de login — dépendant du chargement de gs-components.css. Le test paie la parité sans ce couplage. Tokens SANS jumeau --gs-* (donc hors parité, légitimement propres à ce fichier) : --offline, --focus-ring, --dur-*, les primitives, --r-*. Modèle sombre : bascule explicite [data-theme="dark"] (localStorage), pas d'auto prefers-color-scheme (les vues n'assument pas l'auto-inversion). ========================================================================= */ /* ── Police « instrument » : JetBrains Mono, subset latin, self-hostée (woff2, CSP+offline). Utilisée UNIQUEMENT pour les données numériques (KPI, vitesse, coordonnées, odomètre) via var(--font-mono) — le corps de texte reste en Inter. font-display:swap → pas de FOIT, fallback mono système. */ @font-face{ font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap; src:url(/fonts/jetbrains-mono/jbm-500.woff2) format('woff2'); } @font-face{ font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap; src:url(/fonts/jetbrains-mono/jbm-600.woff2) format('woff2'); } /* ── Police DISPLAY : Space Grotesk, subset latin, self-hostée (woff2). Dérivée de Space Mono → partage l'ADN de JetBrains Mono (système « instrument technique » cohérent). Utilisée pour les TITRES/en-têtes via var(--font-display) ; le corps reste Inter, les données restent JetBrains Mono. */ @font-face{ font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap; src:url(/fonts/space-grotesk/sg-600.woff2) format('woff2'); } @font-face{ font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap; src:url(/fonts/space-grotesk/sg-700.woff2) format('woff2'); } :root { /* Pile « instrument » (données chiffrées uniquement) */ --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Pile DISPLAY (titres/en-têtes uniquement) */ --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ── PRIMITIVES ─────────────────────────────────────────────── */ /* Navy (marque) */ --navy-900: #041E3F; --navy-800: #0a2a55; --navy-700: #14396e; /* Teal (accent) */ --teal-500: #12E7AD; --teal-400: #0AC795; --teal-300: #5AEEC4; --teal-050: #e6fbf5; /* Neutres */ --white: #ffffff; --ink-900: #0b1320; --ink-700: #1c2434; --ink-500: #5b6776; --ink-400: #6b7787; /* AA ~4.6:1 sur blanc (était #94a1b1 = 2.6:1, échouait) */ --grey-200: #e5e7eb; --grey-100: #f1f3f5; --grey-050: #f6f7f9; /* Statut (primitives) — DEUX rouges, deux métiers : red-600 = rouge de TEXTE (--danger), contrasté AA sur blanc. red-500 = rouge de MARQUEUR (--offline), plus vif, porté par les pastilles et icônes de statut véhicule de tracking-v2 → volontairement inchangé. */ --green-500: #0f9d6b; --blue-500: #2563c9; --amber-500: #b9760a; --red-600: #c81e1e; --red-500: #e24b4a; /* ── SÉMANTIQUES (dérivés — à consommer par les vues) ───────── */ --accent: var(--navy-900); --accent-ink: var(--white); --accent-2: var(--teal-500); --accent-3: var(--teal-400); --accent-soft: var(--teal-050); --bg: var(--grey-050); --surface: var(--white); --surface-2: #fafbfc; --border: var(--grey-200); --border-soft: var(--grey-100); --text: var(--ink-900); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --success: var(--green-500); --info: var(--blue-500); --warn: var(--amber-500); --danger: var(--red-600); --offline: var(--red-500); /* ── ÉCHELLE DE RAYONS (une seule — ALIGNÉE sur public/theme/gs-app.css (--gs-radius 8/14/20) pour que le socle un-préfixé et le système --gs-* des pages layouts.app soient NUMÉRIQUEMENT identiques). Fin de la dérive 8/10/12/14 constatée login/cpanel/fleet/tracking-v2. ── */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --radius: var(--r-md); /* alias rétro-compat = 14px (login + gs-app) */ --radius-sm: var(--r-sm); --radius-lg: var(--r-lg); /* ── ESPACEMENT ─────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* ── OMBRES ─────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(4,30,63,.06), 0 1px 3px rgba(4,30,63,.08); --shadow: 0 4px 12px rgba(4,30,63,.10); --shadow-lg: 0 12px 32px rgba(4,30,63,.16); /* ── FOCUS / MOTION ─────────────────────────────────────────── */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); --ease: cubic-bezier(.4, 0, .2, 1); --dur-1: .12s; --dur-2: .2s; } /* ── SOMBRE (parité avec la référence login/tracking) ─────────── */ [data-theme="dark"] { --bg: #0b1320; --surface: #161e2e; --surface-2: #1c2434; --border: #283246; --border-soft: #1f273a; --text: #f1f5fb; --text-faint: #818ea0; --text-muted: #95a3b8; /* en sombre le teal porte l'accent actif (contraste sur fond navy). accent-2 reste le teal VIF : c'est un rôle distinct d'--accent (surlignage, bordure active). Il valait var(--teal-400) = la valeur d'--accent, ce qui écrasait les deux rôles en une seule couleur. */ --accent: var(--teal-400); --accent-2: var(--teal-500); --accent-3: var(--teal-300); --accent-soft: #0a2a25; --shadow-sm: 0 1px 2px rgba(0,0,0,.30); --shadow: 0 4px 14px rgba(0,0,0,.40); --shadow-lg: 0 12px 34px rgba(0,0,0,.55); }