/* Design tokens — OKLCH, contrast-verified. Thème résolu par color-scheme + light-dark() : par défaut `color-scheme: light dark` suit prefers-color-scheme (auto) ; le bouton de thème (components.js) force `color-scheme: light` ou `dark` via [data-theme] sur , et tous les light-dark() ci-dessous basculent d'un coup — sans dupliquer la palette ni dépendre d'une media query. Direction : dossier de confinement — labo de quarantaine + apocalypse. Ambre d'alerte dominant (primary) ; rouge sang/rouille en second accent, réservé aux marqueurs critiques et aux zones de redaction — jamais décoratif. Ordre light-dark(, ) : clair = "jour blafard post-apo" (ciel cendré, jamais un blanc pur), sombre = facility quasi-noire à sous-ton vert-gris froid. */ :root { color-scheme: light dark; --font-display: "Anton", sans-serif; --font-body: "Public Sans", sans-serif; --font-mono: "Courier Prime", monospace; /* Rôle distinct de --font-mono : réservé aux tampons de classification, à l'indice de confinement et aux séparateurs de séquence — jamais au code ni aux tables de config, pour que son grain de machine à écrire reste un accent rare plutôt qu'une texture générale. */ --font-stamp: "Special Elite", monospace; --text-hero: clamp(2.75rem, 6.5vw + 1rem, 5.75rem); --text-h1: clamp(2rem, 3vw + 1rem, 3.25rem); --text-h2: clamp(1.5rem, 1.5vw + 1rem, 2.25rem); --text-h3: clamp(1.15rem, 0.6vw + 1rem, 1.5rem); --text-body: 1rem; --text-small: 0.875rem; --text-mono: 0.9rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --space-7: 6rem; --radius-sm: 2px; --radius-md: 3px; --z-sticky-nav: 10; --z-grain: 40; /* Au-dessus du grain (40) : les éclats de déclassification (.redact-spark) doivent passer par-dessus la texture. */ --z-modal: 50; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Third-party platform brand colors (CurseForge, Modrinth) — fixed, NOT derived from the site's own theme tokens. */ --brand-curseforge: #f16436; --brand-curseforge-ink: #ffffff; --brand-modrinth: #1bd96a; --brand-modrinth-ink: #0b2016; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* --- palette thémée (clair, sombre) --- */ --bg: light-dark(oklch(0.90 0.014 85), oklch(0.12 0.014 152)); --surface: light-dark(oklch(0.85 0.016 82), oklch(0.17 0.018 150)); --surface-raised: light-dark(oklch(0.80 0.018 78), oklch(0.21 0.022 148)); --ink: light-dark(oklch(0.22 0.02 70), oklch(0.92 0.02 85)); --muted: light-dark(oklch(0.42 0.02 70), oklch(0.63 0.025 85)); --border: light-dark(oklch(0.65 0.02 75), oklch(0.30 0.02 140)); --primary-text: light-dark(oklch(0.48 0.15 60), oklch(0.74 0.15 65)); --accent-text: light-dark(oklch(0.40 0.16 28), oklch(0.58 0.17 30)); --fill-primary: light-dark(oklch(0.50 0.16 58), oklch(0.66 0.16 60)); --fill-accent: light-dark(oklch(0.42 0.16 28), oklch(0.42 0.15 28)); /* --on-fill s'inverse : en sombre l'ambre est clair (L 0.66) → encre foncée par-dessus ; en clair l'ambre est foncé (L 0.50) → encre claire. */ --on-fill: light-dark(oklch(0.97 0.01 70), oklch(0.15 0.02 60)); /* light-dark() n'accepte que des COULEURS — pas des listes box-shadow (leurs virgules casseraient le parsing). On thème donc les couleurs des ombres/ halos, et on compose la box-shadow de façon statique par-dessus. */ --shadow-c1: light-dark(rgba(35, 30, 12, 0.06), rgba(0, 0, 0, 0.5)); --shadow-c2: light-dark(rgba(35, 30, 12, 0.08), rgba(0, 0, 0, 0.45)); --shadow-elevated: 0 1px 2px var(--shadow-c1), 0 10px 26px var(--shadow-c2); --glow-amber-ring: light-dark(oklch(0.50 0.16 58 / 0.4), oklch(0.66 0.16 60 / 0.5)); --glow-amber-c: light-dark(oklch(0.50 0.16 58 / 0.16), oklch(0.70 0.17 62 / 0.32)); --glow-amber: 0 0 0 1px var(--glow-amber-ring), 0 0 24px var(--glow-amber-c); --glow-bio-c: light-dark(oklch(0.42 0.16 28 / 0.18), oklch(0.50 0.17 28 / 0.30)); --glow-bio: 0 0 19px var(--glow-bio-c); /* Halo radial en haut de page (body) — couleur thémée pour suivre l'override de thème sans media query. */ --page-radial: light-dark(oklch(0.80 0.03 80 / 0.5), oklch(0.30 0.05 60 / 0.35)); } /* Le bouton de thème force le schéma ; light-dark() suit. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }