/* ============================================================================= The Architect's Toolbox — Design Tokens v1 Marque personnelle de Jean-François Beaulieu. Source de vérité des tokens. Voir DESIGN.md pour l'intention de chaque rôle. Consommation : copier ce fichier (ou @import) puis utiliser les variables. Mode : clair par défaut (:root) ; sombre via (mode par défaut de la marque) ou @media (prefers-color-scheme: dark). Polices : charger Lora + Open Sans + JetBrains Mono (Google Fonts) côté hôte. ============================================================================= */ :root { /* ---- Couleurs — neutres chauds (le « bruit ») ---- */ --bg: #FAF5EC; /* fond papier ivoire chaud */ --surface: #FFFFFF; /* cartes, surfaces élevées */ --surface-2: #F3ECDD; /* zones secondaires, code inline */ --ink: #1B1712; /* texte principal (encre espresso) */ --ink-muted: #6E655A; /* texte secondaire, légendes */ --border: #E7DCC9; /* filets, séparateurs */ /* ---- Couleur signature — cobalt (le « signal ») ---- */ --accent: #1E4FE6; /* accent de marque (un seul) */ --accent-strong: #173BB0; /* hover / active / pressed */ --accent-soft: #E6EAFD; /* fond teinté accent (callouts, badges) */ --on-accent: #FFFFFF; /* texte/icône sur fond accent */ /* ---- Sémantiques (fonctionnelles, discrètes) ---- */ --success: #2E7D5B; --warning: #B7791F; --error: #C0392B; --info: var(--accent); /* ---- Typographie ---- */ --font-display: "Lora", Georgia, "Times New Roman", serif; --font-body: "Open Sans", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --text-xs: 0.78rem; --text-sm: 0.875rem; --text-base: 1.0625rem; /* corps de lecture (≈17px) */ --text-h4: 1.25rem; --text-h3: 1.5rem; --text-h2: 2rem; --text-h1: 2.6rem; --text-display: 3.6rem; --lh-tight: 1.15; /* titres */ --lh-snug: 1.35; /* sous-titres */ --lh-body: 1.7; /* lecture longue */ --ls-tight: -0.02em; /* titres */ --ls-normal: 0; --ls-wide: 0.04em; /* kickers, labels mono en capitales */ --weight-regular: 400; --weight-medium: 600; --weight-bold: 700; --measure: 68ch; /* largeur de colonne de lecture */ /* ---- Espacements harmoniques (échelle 4) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* ---- Rayons ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-full: 999px; /* ---- Élévation (ombres chaudes) ---- */ --shadow-rgb: 28 22 14; /* teinte chaude des ombres */ --shadow-1: 0 1px 2px rgb(var(--shadow-rgb) / 0.10); --shadow-2: 0 4px 14px rgb(var(--shadow-rgb) / 0.12); --shadow-3: 0 14px 40px rgb(var(--shadow-rgb) / 0.18); /* ---- Lueur du signal (sans effet en clair) ---- */ --glow: 0 0 0 transparent; /* ---- Breakpoints (référence ; à utiliser en @media) ---- */ --bp-mobile: 640px; --bp-tablet: 1024px; --bp-desktop: 1440px; /* ---- Divers (ajoutés v1 suite au test de génération par agent IA) ---- */ --container-max: 1080px; /* largeur max du contenu (cf. §5 Layout) */ --touch-min: 44px; /* cible tactile minimale (cf. §8 Responsive) */ --transition: 0.15s ease; /* transitions UI (hover/focus) */ } /* ============================================================================ Mode sombre — mode PAR DÉFAUT de la marque. Charcoal bleuté (écho du mur d'accueil) + lueur cobalt sur le signal. ============================================================================ */ :root[data-theme="dark"] { --bg: #13161D; --surface: #1B1F29; --surface-2: #222734; --ink: #ECE5D8; --ink-muted: #9A9285; --border: #2B313D; --accent: #4E72FF; --accent-strong: #7B92FF; --accent-soft: #1A2550; --on-accent: #0B0E14; --success: #54B98A; --warning: #E0A33A; --error: #E8675A; --shadow-rgb: 0 0 0; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.40); --shadow-2: 0 4px 14px rgb(0 0 0 / 0.45); --shadow-3: 0 14px 40px rgb(0 0 0 / 0.55); --glow: 0 0 24px rgb(78 114 255 / 0.50); } /* Respect de la préférence système si data-theme n'est pas posé explicitement. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #13161D; --surface: #1B1F29; --surface-2: #222734; --ink: #ECE5D8; --ink-muted: #9A9285; --border: #2B313D; --accent: #4E72FF; --accent-strong: #7B92FF; --accent-soft: #1A2550; --on-accent: #0B0E14; --success: #54B98A; --warning: #E0A33A; --error: #E8675A; --shadow-rgb: 0 0 0; --shadow-1: 0 1px 2px rgb(0 0 0 / 0.40); --shadow-2: 0 4px 14px rgb(0 0 0 / 0.45); --shadow-3: 0 14px 40px rgb(0 0 0 / 0.55); --glow: 0 0 24px rgb(78 114 255 / 0.50); } }