/* =========================================================================== Design tokens --------------------------------------------------------------------------- Direction: a chronicle, not a game UI. The site is primarily a place people read, and the weekly cadence makes it a record being kept rather than a dashboard being checked. THE ACCENT IS PURPLE BECAUSE THE CORPUS SAYS SO. This is not a preference. Purple is already the colour of congruence across seven pages, written years before there was a stylesheet: - Wayat'ujan's wall carries "purple-leafed vines that the Vas'n adepts have shaped to drink ambient congruence" (vastek, national-technologies) - The healing fruit grows "at the largest congruence hot spot on the continent" and is "dark purple", with "glowing purple veins" and "a faint purple hue to the shadow the plant casts" (medicinal-plants) - Zingare's bedrock "has a purple hue. Exactly why that is, is still a matter of speculation" (zingare) - The Blighted Lands, where congruence cannot be reached at all, are tinted with it too (blighted-lands) So the accent is congruence made visible, and the neutrals are biased toward it — a paper with a faint violet cast rather than the green one it used to carry for verdigris. The palette is still ink on COLD paper. That coldness is what keeps it away from the warm cream and terracotta every fantasy-adjacent site defaults to, and it survives the hue change unchanged. Verdigris was the previous accent and is kept, demoted, with one job: the production layer. Purple is the world; green is the writing team. See --secondary. Type is Literata for the body — designed specifically for long-form reading on screens, which is exactly the brief when you are asking someone to read 120,000 words on a phone. Fraunces carries the display voice. Archivo handles labels and data. Everything here is meant to be overridden. If you want a different look, the whole visual identity lives in this one file. Contrast was computed rather than eyeballed: every pairing below that carries text meets WCAG AA, in both themes. If you change a value, recompute — do not assume. Watch out — --ink-faint is a TEXT colour, not a decoration. It carries .label, .facts__label and .account__heading, all of which are 12px, which is nowhere near WCAG's large-text threshold and therefore needs the full 4.5:1. It sat at 3.30:1 for the life of the green palette and nobody caught it, because a contrast bug on an uppercase label reads as "quiet" rather than as broken. ======================================================================== */ :root { /* --- Colour ------------------------------------------------------------ */ --paper: #EDEBF1; /* pale, a faint violet cast — still cold, not cream */ --paper-raised: #F7F6FA; --paper-sunken: #E3E0EA; --ink: #1A1720; /* near-black, cool, biased toward the accent */ --ink-soft: #4E4959; --ink-faint: #6B6577; /* 4.73:1 — labels are 12px, so they need AA like any text */ --amethyst: #5B3E9E; /* the accent — congruence made visible */ --amethyst-deep: #43296F; /* text weight: 9.94:1 on paper */ --amethyst-wash: #E3DDF0; --verdigris: #1D5749; /* demoted to secondary: the production layer */ --verdigris-wash: #DCE8E4; --madder: #8E2F3D; /* warnings, destructive actions, urgency */ --madder-wash: #F2E0E2; --gold-leaf: #B08A3E; /* rare and precious. Use almost never. */ --rule: #CFCBD6; --rule-strong: #ABA5B6; /* Semantic aliases — reference these in components, not the raw names */ --bg: var(--paper); --bg-raised: var(--paper-raised); --fg: var(--ink); --fg-muted: var(--ink-soft); --fg-faint: var(--ink-faint); --accent: var(--amethyst); --accent-strong: var(--amethyst-deep); --accent-wash: var(--amethyst-wash); --secondary: var(--verdigris); /* writer notes, gated pages, staff affordances */ --secondary-wash: var(--verdigris-wash); --danger: var(--madder); --danger-wash: var(--madder-wash); --border: var(--rule); /* --- Type -------------------------------------------------------------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Literata', Georgia, 'Times New Roman', serif; --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace; /* Fluid scale. Minimums are sized for a 390px phone, maximums for desktop. Body sits at 17px on mobile — larger than the usual 16px because this site asks people to read for a long time. */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); --text-lg: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); --text-xl: clamp(1.375rem, 1.25rem + 0.7vw, 1.75rem); --text-2xl: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem); --text-3xl: clamp(2rem, 1.6rem + 1.8vw, 3rem); --leading-tight: 1.15; --leading-snug: 1.35; --leading-body: 1.7; /* generous — also stops tooltip hit areas colliding */ --leading-loose: 1.85; --tracking-tight: -0.015em; --tracking-wide: 0.06em; /* --- Space ------------------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5rem; /* --- Layout ------------------------------------------------------------ */ --measure: 66ch; /* reading column — do not exceed for body text */ --measure-wide: 88ch; --page-max: 72rem; --gutter: clamp(1rem, 4vw, 2.5rem); /* --- Interaction ------------------------------------------------------- */ --tap-min: 44px; /* minimum comfortable touch target */ --radius-sm: 3px; --radius: 6px; --radius-lg: 12px; --radius-sheet: 16px; --shadow-sm: 0 1px 2px rgb(26 23 32 / 0.06); --shadow: 0 4px 14px rgb(26 23 32 / 0.10); --shadow-lg: 0 -8px 32px rgb(26 23 32 / 0.18); --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --z-header: 100; --z-drawer: 200; --z-tooltip: 300; --z-sheet: 400; /* --- Ornament ---------------------------------------------------------- Congruence reads as a glow in the corpus — "glowing purple veins", "a faint purple hue to the shadow the plant casts". These are the two ways that is expressed as surface, and both are generated rather than downloaded: no bytes, no HTTP request, no provenance to record, and they re-tint with the theme because they are built from the tokens above. --veil a soft off-centre bloom, for a surface that should feel lit --grain a fine tooth, so a large flat panel reads as paper rather than as a filled rectangle. 0.035 alpha is the point where it registers without becoming visible texture. */ --veil: radial-gradient( 120% 90% at 15% 0%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 62%); /* The lozenge, as a mask so it can take any colour. The same shape is drawn as inline SVG by Icon.razor for the header sigil — one motif, two deliveries. */ --lozenge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 20 12l-8 10L4 12Z' fill='%23000'/%3E%3C/svg%3E"); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } /* --- Dark ---------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --paper: #141218; --paper-raised: #1E1B24; --paper-sunken: #0F0D12; --ink: #E5E2EA; --ink-soft: #ABA5B6; --ink-faint: #8D8799; --amethyst: #A78BE0; /* 6.56:1 on paper */ --amethyst-deep: #C4B0F0; /* 9.58:1 — links carry this one */ --amethyst-wash: #2A2140; --verdigris: #5FB8A2; --verdigris-wash: #1B3630; --madder: #D97583; --madder-wash: #3A1D22; --gold-leaf: #D4AE64; --rule: #322D3A; --rule-strong: #4C4557; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow: 0 4px 14px rgb(0 0 0 / 0.5); --shadow-lg: 0 -8px 32px rgb(0 0 0 / 0.6); /* The bloom carries further on a dark ground before it reads as a smudge. */ --veil: radial-gradient( 120% 90% at 15% 0%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 68%); } }