/* * The design tokens, and the single place they are defined. * * Ported from WarhammerDraft's design-tester.html, using that file's locked-in * defaults: dark theme, obsidian dark palette, parchment light palette, bronze * accent, rubric sub-accent. Raw variable names are kept identical to the tester * so the two files can be diffed against each other. * * Deliberately NOT part of the Vue bundle, and that is the whole point. Two pages * need these values: the app, and the server-rendered login page, which is * Thymeleaf and never loads the bundle. The bundle's own CSS is unusable there — * its filename carries a content hash that changes every build. Living in * public/ means this file keeps its name, so both pages can link it and neither * has to keep a copy. It is also small enough to cost nothing. * * Being readable before login follows from that, and is harmless: it is a list of * colours. SecurityConfig permits it alongside the favicon. * * The values sit in ordinary :root rules rather than inside Tailwind's @theme, * which is what lets the data-theme attribute on reassign them at runtime. * main.css maps them into Tailwind with `@theme inline`, which emits * var(--bg-deep) rather than a copied value — so flipping the attribute restyles * the page with no rebuild, and these definitions stay authoritative. */ :root, :root[data-theme="dark"] { --bg-deep: #0a0807; --bg-surface: #131110; --bg-elev: #1c1917; --line: #2a2725; --line-strong: #423d39; --text: #d8d4d0; --text-mute: #8a8480; --text-faint: #5a5450; --metal: #b07a3e; --metal-bright: #d4965a; --metal-dim: #74502a; --kw-bg: rgba(176, 122, 62, 0.1); --sub: #b53030; --sub-bright: #cf4848; --pattern: rgba(255, 255, 255, 0.04); --card-shadow: rgba(0, 0, 0, 0.3); } :root[data-theme="light"] { --bg-deep: #f3ead4; --bg-surface: #fbf3df; --bg-elev: #ebdfba; --line: #c9b785; --line-strong: #a08e58; --text: #2a1d12; --text-mute: #5e4a32; --text-faint: #8e7958; --metal: #7a5224; --metal-bright: #9a6e36; --metal-dim: #a07a4a; --kw-bg: rgba(122, 82, 36, 0.12); --sub: #8e1414; --sub-bright: #aa1f1f; --pattern: rgba(0, 0, 0, 0.05); /* A black drop shadow on parchment reads as grime rather than depth. */ --card-shadow: rgba(90, 70, 40, 0.18); } /* * The one component both pages render. Everything else the login page draws is * its own bespoke layout, and everything else the app draws comes from the * bundle; this is the only rule that would otherwise have to exist twice. */ .brand { font-family: "Cinzel Decorative", serif; font-weight: 900; letter-spacing: 0.16em; color: var(--metal); text-transform: uppercase; font-size: 18px; } .brand::before { content: "✠"; color: var(--metal-dim); margin-right: 0.4em; }