/* PokeCollection - Charte "L'Index" - Tokens de design. Source de verite unique : ne jamais coder une couleur, un rayon ou une ombre en dur ailleurs que dans ce fichier. */ :root { /* Surfaces */ --surface-base: #F4F6F8; --surface-card: #FFFFFF; --surface-inset: #EDF0F4; /* Bordures */ --border: #DFE4EA; --border-strong: #C4CDD7; /* Texte */ --text-primary: #171C22; --text-muted: #5A6472; --text-on-accent: #FFFFFF; /* Accents */ --accent: #17677F; --accent-hover: #125266; --accent-soft: rgba(23, 103, 127, 0.10); --accent-2: #24303D; /* Semantiques */ --ok: #1E7A46; --ok-soft: rgba(30, 122, 70, 0.10); --warn: #96660A; --warn-soft: rgba(150, 102, 10, 0.10); --error: #B03A2E; --error-soft: rgba(176, 58, 46, 0.10); /* Typographies */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-ui: "IBM Plex Sans", system-ui, sans-serif; --font-data: "IBM Plex Mono", ui-monospace, monospace; --fs-h1: 1.75rem; --fs-h2: 1.375rem; --fs-h3: 0.9375rem; --fs-body: 0.9375rem; --fs-small: 0.8125rem; --fs-caption: 0.6875rem; /* Geometrie */ --radius-lg: 6px; --radius-md: 4px; --radius-sm: 3px; --ratio-card: 63 / 88; /* Espacement (base 4) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* Elevation (hover uniquement) */ --shadow-hover: 0 2px 8px rgba(23, 28, 34, 0.08); /* Etats & mouvement */ --focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--accent); --transition-fast: 120ms linear; --transition-view: 100ms ease-out; --tap-min: 44px; color-scheme: light; } /* Mode nuit via data-theme sur . Bleu-noir desature, jamais #000. */ :root[data-theme="dark"] { --surface-base: #12161B; --surface-card: #1A2129; --surface-inset: #222A33; --border: #2B3540; --border-strong: #3A4653; --text-primary: #E8EDF2; --text-muted: #9AA5B2; --text-on-accent: #12161B; --accent: #64BFD9; --accent-hover: #85CFE4; --accent-soft: rgba(100, 191, 217, 0.12); --accent-2: #B9C6D4; --ok: #5BC386; --ok-soft: rgba(91, 195, 134, 0.14); --warn: #E2AC42; --warn-soft: rgba(226, 172, 66, 0.14); --error: #E4796C; --error-soft: rgba(228, 121, 108, 0.14); --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.35); --focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--accent); color-scheme: dark; } @media (min-width: 960px) { :root { --fs-h1: 2.125rem; --fs-h2: 1.5rem; } }