/* ========================================================================== tokens.css — Source de vérité DA Trakkt Généré audit niveau 3 (LOT B — fix/B-design) — 2026-05-07 ---------------------------------------------------------------------- Brief Yoen + sprint 0 audit (228 substitutions WCAG AA) : - Or BASE = #B5883A (5.77:1 sur texte #1A1205) — bannit #C49A3C/#D4A62B/#C9A84C - Vert = #496D41 - Cream = #F2EFE0 (chaud) / Surface app = #F8FAF9 (cool) ---------------------------------------------------------------------- À charger via en tête du , AVANT tout autre CSS — chaque page peut alors lire les variables et arrête de redéfinir son propre :root. ========================================================================== */ :root { /* ----- Brand Trakkt — DA officielle ------------------------------- */ --tk-gold: #B5883A; /* base or — WCAG AA 5.77:1 sur #1A1205 */ --tk-gold-dark: #8E6A2D; /* hover / pressed */ --tk-gold-light: #DCB36A; /* tints / highlights */ --tk-gold-text: #1A1205; /* texte sur fond gold */ --tk-gold-bg-rgba: 181, 136, 58; /* alpha rgba(var(--tk-gold-bg-rgba), .x) */ --tk-green: #496D41; /* vert principal brand */ --tk-green-dark: #314B2C; /* gradient end, états pressés */ --tk-green-soft: #E8F0EA; /* surface verte douce */ --tk-green-ink: #14271C; /* fond sombre brand */ --tk-cream: #F2EFE0; /* cream chaude (sections hero/branding) */ --tk-bg-app: #F8FAF9; /* fond surfaces app (dashboard, formulaires) */ --tk-text: #1A1A1A; --tk-text-soft: #2D3A33; --tk-muted: #6B7280; --tk-border: #E5E7EB; --tk-border-soft: #F0F2F1; /* ----- Échelle typographique 8pt --------------------------------- */ --tk-text-xs: 12px; --tk-text-sm: 14px; --tk-text-base: 16px; --tk-text-lg: 18px; --tk-text-xl: 24px; --tk-text-2xl: 32px; --tk-text-3xl: 48px; /* ----- Espacement 8pt ------------------------------------------- */ --tk-space-1: 4px; --tk-space-2: 8px; --tk-space-3: 12px; --tk-space-4: 16px; --tk-space-6: 24px; --tk-space-8: 32px; --tk-space-12: 48px; --tk-space-16: 64px; /* ----- Transitions ---------------------------------------------- */ --tk-t-fast: 150ms; --tk-t-base: 250ms; --tk-t-slow: 450ms; --tk-easing: cubic-bezier(.2, .7, .2, 1); /* ----- Container widths (cf. F-36 audit-design) ----------------- */ --tk-container-sm: 780px; /* formulaires centrés (rdv, connexion) */ --tk-container-md: 1080px; --tk-container-lg: 1200px; } /* ========================================================================== Focus-visible global — DA Trakkt (gold) Ajoute un outline doré 2px partout où l'utilisateur clavier atterrit. Le `:focus:not(:focus-visible)` neutralise le focus souris (pas d'outline indésirable au clic), tout en gardant l'accessibilité clavier intacte. ========================================================================== */ :focus-visible { outline: 2px solid var(--tk-gold); outline-offset: 2px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* ========================================================================== Prefers-reduced-motion — guard global (WCAG 2.3.3) ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }