/* ===================================================================== LA CORVÉE — corvee-tokens.css (Phase 2, design system) SOURCE DE VÉRITÉ des tokens de l'écosystème (app + vitrine). La copie vitrine (popote-site) est vérifiée par CI (sha256) : toute évolution passe par CE fichier puis `make sync-tokens`. Un seul :root, zéro build. Dix couches : 1. primitives papier / encre chaude (hue 48) + charbon (night) 2. alias sémantiques app (--bg, --border… — les deux vocabulaires vivent : ne PAS renommer --bg en --paper dans les templates) 3. statuts (warn / danger / info / success) promus des :root inline 4. marque (--brand) + familles couleur + namespace --module-* 5. indirection --accent (précédence : tenant inline > shell > brand) 6. radius unique (xs/sm/md/lg/xl/pill) + alias de compat 7. ombres brunes chaudes 8. focus + motion 9. typographie (Bricolage / Hanken / JetBrains) + échelle clamp() 10. table hex canonique (commentaire) pour les consommateurs hors-CSS (GD, Dompdf, manifest, JS) ===================================================================== */ :root { /* ----- 1. PRIMITIVES — papier chaud & encre (hue 48) ------------- */ --paper: oklch(0.991 0.006 78); --paper-2: oklch(0.972 0.011 72); --warm: oklch(0.955 0.018 66); --warm-2: oklch(0.935 0.024 62); --line: oklch(0.905 0.013 66); --line-2: oklch(0.855 0.018 60); --hairline: oklch(0.938 0.008 70); --ink-0: oklch(0.235 0.018 48); --ink-1: oklch(0.36 0.02 48); --ink-2: oklch(0.5 0.018 50); --ink-3: oklch(0.64 0.015 54); --ink-4: oklch(0.8 0.012 60); /* encre muette AA — petites étiquettes 11-12px (fix livreur promu) : --ink-3 (0.64) passe sous 4.5:1 sur papier ; le réserver aux gros corps et à la décoration. */ --ink-mute: oklch(0.545 0.017 54); /* charbon chaud (bandes sombres, sidebar admin) */ --night: oklch(0.255 0.015 46); --night-2: oklch(0.305 0.017 46); --night-3: oklch(0.355 0.018 46); --night-ink: oklch(0.82 0.018 66); --night-ink-2: oklch(0.66 0.02 60); --night-line: oklch(0.4 0.02 50); /* ----- 2. ALIAS SÉMANTIQUES APP ----------------------------------- */ --bg: var(--paper); --bg-elev: oklch(1 0 0); --bg-sunken: var(--paper-2); --bg-warm: var(--warm); --border: var(--line); --border-strong: var(--line-2); /* ----- 3. STATUTS (promus des 12 :root inline Latte) -------------- */ --warn: oklch(0.72 0.14 70); --warn-ink: oklch(0.45 0.115 62); --warn-soft: oklch(0.96 0.045 80); --warn-line: oklch(0.88 0.06 80); --warn-border: var(--warn-line); --danger: oklch(0.55 0.16 28); --danger-ink: oklch(0.42 0.14 25); --danger-soft: oklch(0.955 0.038 30); --danger-line: oklch(0.86 0.08 25); --danger-border: var(--danger-line); --info: oklch(0.56 0.105 238); --info-ink: oklch(0.4 0.1 240); --info-soft: oklch(0.955 0.028 238); --info-line: oklch(0.85 0.06 240); --info-border: var(--info-line); --success: var(--herb); --success-ink: var(--herb-ink); --success-soft: var(--herb-soft); --success-line: var(--herb-line); --success-border: var(--success-line); /* ----- 4. MARQUE + FAMILLES COULEUR + MODULES --------------------- */ /* vert La Corvée (« tom ») */ --tom: oklch(0.555 0.13 156); --tom-deep: oklch(0.465 0.119 157); --tom-ink: oklch(0.39 0.107 158); --tom-soft: oklch(0.95 0.034 156); --tom-mist: oklch(0.975 0.018 156); --tom-line: oklch(0.85 0.062 156); /* vert vif (coches, live, success) */ --herb: oklch(0.62 0.12 152); --herb-ink: oklch(0.43 0.105 154); --herb-soft: oklch(0.95 0.045 152); --herb-line: oklch(0.85 0.07 152); /* bleu (Balade) */ --bleu: oklch(0.6 0.115 240); --bleu-ink: oklch(0.46 0.11 244); --bleu-soft: oklch(0.945 0.04 240); --bleu-line: oklch(0.85 0.06 240); /* mauve (Jasette) — candidat 2 : base AA 4.51 sur crème, -soft à chroma 0.028 (limite gamut sRGB) */ --jas: oklch(0.56 0.13 305); --jas-ink: oklch(0.42 0.12 305); --jas-soft: oklch(0.95 0.028 305); --jas-line: oklch(0.85 0.06 305); /* tomate (Vigie) */ --rouge: oklch(0.6 0.16 32); --rouge-ink: oklch(0.48 0.15 32); --rouge-soft: oklch(0.95 0.035 32); --rouge-line: oklch(0.85 0.06 32); /* or / beurre (Ruche) */ --butter: oklch(0.79 0.135 76); --butter-ink: oklch(0.5 0.115 64); --butter-soft: oklch(0.955 0.055 84); --butter-line: oklch(0.88 0.08 80); /* marque plateforme */ --brand: var(--tom); --brand-ink: var(--tom-ink); --brand-soft: var(--tom-soft); --brand-line: var(--tom-line); /* namespace modules (accent par module, distinct de --accent) */ --module-popote: var(--tom); --module-popote-ink: var(--tom-ink); --module-popote-soft: var(--tom-soft); --module-popote-line: var(--tom-line); --module-balade: var(--bleu); --module-balade-ink: var(--bleu-ink); --module-balade-soft: var(--bleu-soft); --module-balade-line: var(--bleu-line); --module-jasette: var(--jas); --module-jasette-ink: var(--jas-ink); --module-jasette-soft: var(--jas-soft); --module-jasette-line: var(--jas-line); --module-vigie: var(--rouge); --module-vigie-ink: var(--rouge-ink); --module-vigie-soft: var(--rouge-soft); --module-vigie-line: var(--rouge-line); --module-ruche: var(--butter); --module-ruche-ink: var(--butter-ink); --module-ruche-soft: var(--butter-soft); --module-ruche-line: var(--butter-line); /* ----- 5. INDIRECTION --accent ------------------------------------- Défaut = marque. Un shell peut réassigner (admin → rouge) ; le override tenant inline (sidebar.latte, style="--accent: …") gagne TOUJOURS (précédence CSS élément > :root). */ --accent: var(--brand); --accent-deep: var(--tom-deep); --accent-ink: var(--brand-ink); --accent-soft: var(--brand-soft); --accent-softer: var(--tom-mist); --accent-border: var(--brand-line); --accent-line: var(--accent-border); /* ----- 6. RADIUS UNIQUE + COMPAT ----------------------------------- Échelle : 6 / 8 / 12 / 14 / 20 / 999. Les anciens vocabulaires (app : --radius/--radius-sm/--radius-lg ; livreur : --r-*) s'alignent dessus (convergence assumée, ±2 px). */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* compat app (shell.css historique) */ --radius: var(--radius-sm); /* compat livreur (--r-xl 28→20 : convergence assumée) */ --r-xs: var(--radius-xs); --r-sm: var(--radius-sm); --r-md: var(--radius-lg); --r-lg: var(--radius-xl); --r-xl: var(--radius-xl); --r-pill: var(--radius-pill); /* ----- 7. OMBRES BRUNES CHAUDES ------------------------------------ */ --shadow-sm: 0 1px 2px rgba(60, 30, 12, 0.05); --shadow-md: 0 6px 18px rgba(60, 30, 12, 0.07), 0 1px 3px rgba(60, 30, 12, 0.05); --shadow-lg: 0 28px 56px rgba(54, 26, 10, 0.10), 0 8px 20px rgba(54, 26, 10, 0.06); --shadow-xl: 0 48px 90px rgba(54, 26, 10, 0.16), 0 18px 36px rgba(54, 26, 10, 0.08); /* ----- 8. FOCUS + MOTION ------------------------------------------- */ --focus-ring-width: 2.5px; --focus-ring-offset: 2px; --focus-ring: var(--focus-ring-width) solid var(--accent); /* ⚠️ les media queries ne lisent PAS les custom props : le pattern reduced-motion reste un bloc @media par feuille consommatrice. */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ----- 9. TYPOGRAPHIE ---------------------------------------------- */ --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --text-xs: clamp(11px, 0.66rem + 0.1vw, 12px); --text-sm: clamp(12.5px, 0.75rem + 0.1vw, 13.5px); --text-base: clamp(14px, 0.84rem + 0.15vw, 15px); --text-lg: clamp(16px, 0.94rem + 0.2vw, 18px); --text-xl: clamp(19px, 1.08rem + 0.35vw, 22px); --text-2xl: clamp(24px, 1.32rem + 0.6vw, 28px); --text-3xl: clamp(28px, 1.5rem + 1vw, 34px); } /* --------------------------------------------------------------------- 10. TABLE HEX CANONIQUE — consommateurs hors-CSS (GD, Dompdf, manifest.webmanifest, JS). Conversion sRGB des oklch ci-dessus (scripts : conversion OKLab → sRGB gamma). Tout consommateur qui ne peut pas lire les custom props copie SA valeur d'ICI, avec un commentaire « table hex canonique » au point d'usage. token oklch hex --paper 0.991 0.006 78 #fefcf8 --paper-2 0.972 0.011 72 #fbf5ee --warm 0.955 0.018 66 #f9eee4 --warm-2 0.935 0.024 62 #f6e6da --line 0.905 0.013 66 #e6ded7 --line-2 0.855 0.018 60 #d9cdc4 --hairline 0.938 0.008 70 #eeeae5 --ink-0 0.235 0.018 48 #251c17 --ink-1 0.36 0.02 48 #463a34 --ink-2 0.5 0.018 50 #6c605a --ink-3 0.64 0.015 54 #948a84 --ink-mute 0.545 0.017 54 #786e67 --ink-4 0.8 0.012 60 #c4bcb6 --night 0.255 0.015 46 #29211d --night-2 0.305 0.017 46 #372d28 --night-3 0.355 0.018 46 #443934 --night-ink 0.82 0.018 66 #ccc2b8 --night-ink-2 0.66 0.02 60 #9c9086 --night-line 0.4 0.02 50 #51453e --bg-elev 1 0 0 #ffffff --tom 0.555 0.13 156 #118951 --tom-deep 0.465 0.119 157 #006c3d --tom-ink 0.39 0.107 158 #00552e --tom-soft 0.95 0.034 156 #ddf6e5 --tom-mist 0.975 0.018 156 #eefbf2 --tom-line 0.85 0.062 156 #aedabd --herb 0.62 0.12 152 #459b61 --herb-ink 0.43 0.105 154 #086034 --herb-soft 0.95 0.045 152 #d9f8e0 --herb-line 0.85 0.07 152 #acdcb8 --bleu 0.6 0.115 240 #3188be --bleu-ink 0.46 0.11 244 #085d90 --bleu-soft 0.945 0.04 240 #d6f1ff --bleu-line 0.85 0.06 240 #abd4f2 --jas 0.56 0.13 305 #865eb1 --jas-ink 0.42 0.12 305 #5d3881 --jas-soft 0.95 0.028 305 #f3eafe --jas-line 0.85 0.06 305 #d7c4ee --rouge 0.6 0.16 32 #ce533e --rouge-ink 0.48 0.15 32 #a1321f --rouge-soft 0.95 0.035 32 #ffe7e0 --rouge-line 0.85 0.06 32 #f2c0b6 --butter 0.79 0.135 76 #ecae4a --butter-ink 0.5 0.115 64 #8f5200 --butter-soft 0.955 0.055 84 #ffeec7 --butter-line 0.88 0.08 80 #f4d29b --warn 0.72 0.14 70 #dc932e --warn-ink 0.45 0.115 62 #814300 --warn-soft 0.96 0.045 80 #ffefd1 --warn-line 0.88 0.06 80 #edd4ab --danger 0.55 0.16 28 #bd4238 --danger-ink 0.42 0.14 25 #892122 --danger-soft 0.955 0.038 30 #ffe7e1 --danger-line 0.86 0.08 25 #ffbdb7 --info 0.56 0.105 238 #2b7cab --info-ink 0.4 0.1 240 #004d77 --info-soft 0.955 0.028 238 #e0f3ff --info-line 0.85 0.06 240 #abd4f2 --------------------------------------------------------------------- */