@charset "UTF-8"; /** * 01-tokens.css * ------------------------------------------------------------------ * Design tokens (variables CSS) et reset minimal du thème * Time To Learn. Conforme W3C CSS Color 4 / Custom Properties. * * Convention : * --bg-* : couleurs de fond * --ink-* : couleurs de texte * --r-* : rayons * --font-* : familles typographiques * ------------------------------------------------------------------ */ :root { /* ------ Palette ------ */ --bg: #fbf9f6; --bg-alt: #f2eee7; --bg-warm: #ede8de; --ink: #0e1726; --ink-soft: #2a3548; --marine: #243044; --marine-soft: #4a5670; --pink: #b89a8a; --pink-soft: #ddd1c5; --magenta: #1b3d7a; --cyan: #3dd4f5; --cyan-soft: #bfeef9; --line: #e6ddd0; --line-soft: #efe9df; --muted: #7a7568; --accent-magenta: #d62a7c; --brand-pink: #e8a4b4; /* ------ Typographie ------ */ --font-display: "Newsreader", "Times New Roman", serif; --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* ------ Espacement / largeurs ------ */ --container: 1280px; --pad: clamp(20px, 4vw, 56px); /* ------ Rayons ------ */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; /* ------ Transitions ------ */ --t-fast: 0.15s ease; --t-base: 0.25s ease; } /* ------ Reset minimal ------ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; } button { font-family: inherit; cursor: pointer; } /* ------ Accessibilité : focus visible ------ */ :focus-visible { outline: 2px solid var(--accent-magenta); outline-offset: 3px; border-radius: 4px; } /* ------ Variantes typo activables via data-typo sur ------ */ body[data-typo="editorial"] { --font-display: "Newsreader", "Times New Roman", serif; --font-body: "Geist", -apple-system, sans-serif; } body[data-typo="modern"] { --font-display: "Space Grotesk", sans-serif; --font-body: "Space Grotesk", sans-serif; } body[data-typo="humanist"] { --font-display: "Fraunces", serif; --font-body: "Manrope", sans-serif; } body[data-typo="condensed"] { --font-display: "Bricolage Grotesque", sans-serif; --font-body: "Manrope", sans-serif; } /* ------ Préférence "réduction des animations" ------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }