/* SLOT tokens. The first file anyone opens to fill in this template: the palette, the four font roles and the type scale live below as CSS variables, read by everything else in assets/ so nothing downstream needs an edit. The SLOT note further down covers the palette itself; the space, radius and z-index scales are layout infrastructure the template already tuned, not part of dressing up a mod, so leave them alone unless something is visibly broken. Theme resolved by color-scheme + light-dark(): by default `color-scheme: light dark` follows prefers-color-scheme (auto); the theme button (core/site-theme.js) forces `color-scheme: light` or `dark` through [data-theme] on , and every light-dark() below flips at once, without duplicating the palette or depending on a media query. SLOT. This file is the one place a new mod's identity lives. Write the direction in one or two sentences here (what the palette is meant to feel like, which token carries the dominant colour, which one is the rare accent), then replace the values below. Everything else in assets/ reads these tokens and needs no edit. light-dark(, ) order: light value first, dark value second. Check every text-on-surface pair for contrast before keeping it. Direction here: the twenty minutes before a tornado. Everything sits in the cold blue slate a storm base puts over a landscape, and the one colour that rises out of it is the sick green a hail-laden sky turns, which is why --fill-primary carries it. The rare accent is --fill-accent, the ochre of lifted dirt: it belongs to the ground being carried, so it appears only where the page is talking about what the storm has already taken. */ :root { color-scheme: light dark; /* SLOT: the four faces. Replace, then update the Google Fonts in every page of both lang/ trees, and font-src in _headers if the host changes. */ --font-display: "Archivo Black", sans-serif; --font-body: "IBM Plex Sans", sans-serif; --font-mono: "IBM Plex Mono", monospace; /* A distinct role for --font-stamp: the rougher, hand-struck typewriter face, reserved for the ledger and the wiki table-of-contents keys, so that its texture stays a rare accent rather than the general monospace surface (--font-mono) that labels, chart data and param tables already use. */ --font-stamp: "Cutive Mono", monospace; --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; /* Trois courbes, trois rôles. Une seule courbe partout est ce qui donne à un site sa cadence uniforme, reconnaissable avant même d'être nommée. */ --ease-soft: cubic-bezier(0.33, 0.8, 0.4, 1); /* apparitions de contenu */ --ease-snap: cubic-bezier(0.2, 0.9, 0.25, 1.06); /* réactions à un clic, léger dépassement */ --ease-glide: cubic-bezier(0.5, 0, 0.2, 1); /* déplacements longs, panneaux, portes */ /* 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; /* --- palette thémée (clair, sombre) --- */ --bg: light-dark(oklch(0.89 0.012 244), oklch(0.135 0.019 258)); --surface: light-dark(oklch(0.845 0.014 246), oklch(0.185 0.022 259)); --ink: light-dark(oklch(0.21 0.021 252), oklch(0.935 0.011 240)); --muted: light-dark(oklch(0.435 0.021 250), oklch(0.655 0.019 245)); --border: light-dark(oklch(0.675 0.017 247), oklch(0.315 0.023 259)); --primary-text: light-dark(oklch(0.455 0.128 152), oklch(0.795 0.135 150)); --accent-text: light-dark(oklch(0.455 0.115 62), oklch(0.755 0.118 70)); --fill-primary: light-dark(oklch(0.475 0.13 152), oklch(0.695 0.145 151)); --fill-accent: light-dark(oklch(0.445 0.12 62), oklch(0.55 0.13 66)); /* --on-fill inverts: in dark mode the green is light (L 0.695) → dark ink on top; in light mode the green is dark (L 0.475) → light ink. */ --on-fill: light-dark(oklch(0.975 0.008 150), oklch(0.155 0.024 152)); /* light-dark() only accepts COLOURS, not box-shadow lists (their commas would break parsing). So the shadow/glow colours are themed, and the box-shadow itself is composed statically on top of them. */ --shadow-c1: light-dark(rgba(20, 27, 40, 0.07), rgba(0, 0, 0, 0.55)); --shadow-c2: light-dark(rgba(20, 27, 40, 0.09), rgba(0, 0, 0, 0.42)); --shadow-elevated: 0 1px 2px var(--shadow-c1), 0 10px 26px var(--shadow-c2); --glow-sky-ring: light-dark(oklch(0.475 0.13 152 / 0.4), oklch(0.695 0.145 151 / 0.5)); --glow-sky-c: light-dark(oklch(0.475 0.13 152 / 0.16), oklch(0.74 0.15 151 / 0.3)); --glow-sky: 0 0 0 1px var(--glow-sky-ring), 0 0 24px var(--glow-sky-c); --glow-dust-c: light-dark(oklch(0.445 0.12 62 / 0.2), oklch(0.6 0.13 66 / 0.32)); --glow-dust: 0 0 19px var(--glow-dust-c); /* Radial glow at the top of the page (body): a themed colour, so it follows the theme override without a media query. */ } /* The theme button forces the scheme; light-dark() follows. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }