/* ============================================================ shared/theme.css — THE single source of truth for colour ============================================================ Every colour in StatBlocker resolves to one of the tokens below. Nothing else in the codebase should contain a raw hex or rgba() value (the only sanctioned exceptions are canvas / fog rendering in play.html, which needs real colour strings, and user-chosen colours stored in data). ── How to add a new theme ───────────────────────────────── 1. Copy the `[data-theme="fantasy"]` block below, rename the attribute value, and change the token values. You only need to override what actually differs — every token you leave out inherits the dark base. 2. Register it in shared/themes.js SB_THEMES with a label, description and `mode` ('dark' or 'light'). That's it. No per-page work, no selector patching, and the swatch on the profile page paints itself. Each theme is matched on `[data-theme="..."]` rather than `:root[...]` alone, so putting the attribute on ANY element themes that subtree — that's how the theme picker renders a live preview of a theme that isn't currently active. ── Which text token? ────────────────────────────────────── --text-strong bright text on a surface that is dark in every theme (button labels, map overlays) --text-title a page/card heading on the page surface — flips to the accent colour on a light theme --text body copy --text-muted secondary --text-dim captions --text-inverse dark text on a bright chip Getting this wrong is what makes a theme look broken, so pick by "what is this text sitting on", not by its colour. ── Token groups ─────────────────────────────────────────── 1. Channels raw "r,g,b" triplets so any token can be tinted 2. Surfaces page / panel / raised backgrounds 3. Text strong → dim text ramp 4. Accent the brand red ramp (buttons, links, focus) 5. Lines borders and dividers 6. Status ok / amber / info / magic ramps 7. Depth shadows, glows and scrims 8. Sheet the printed character-sheet & statblock palette 9. Spell tags spell-school / choice colours 10. Aliases legacy names kept so existing CSS keeps working ============================================================ */ :root, [data-theme="dark"] { /* ── 1. Channels ─────────────────────────────────────────── Raw triplets. Use as rgba(var(--accent-rgb), .25) whenever a colour needs transparency — that way a theme only has to restate the channel, not every tint. */ --accent-rgb: 220, 38, 38; --accent-deep-rgb: 127, 29, 29; --sheen-rgb: 255, 255, 255; /* highlights, hover washes */ --shade-rgb: 0, 0, 0; /* shadows, scrims */ --ok-rgb: 34, 197, 94; --ok-soft-rgb: 134, 239, 172; --ok-deep-rgb: 5, 120, 80; --amber-rgb: 252, 211, 77; --amber-deep-rgb: 202, 138, 4; --info-rgb: 96, 165, 250; --info-2-rgb: 59, 130, 246; --info-soft-rgb: 191, 219, 254; --info-deep-rgb: 29, 78, 216; --magic-rgb: 168, 85, 247; --magic-deep-rgb: 109, 40, 217; --trim-rgb: 212, 212, 218; /* heading / metal trim */ --text-dim-rgb: 113, 113, 122; --line-rgb: 42, 42, 48; --gold-metal-rgb: 212, 175, 90; /* translucent surfaces (frosted panels, map overlays, fog) */ --bg-page-rgb: 12, 12, 14; --bg-deep-rgb: 8, 8, 11; --bg-raised-rgb: 20, 20, 25; /* printed-sheet channels */ --sheet-line-rgb: 196, 169, 125; --sheet-accent-rgb: 88, 24, 13; --sheet-bg-deep-rgb: 224, 208, 180; /* ── 2. Surfaces ────────────────────────────────────────── Darkest → lightest. `page` is the body, `panel` is a card, `raised` sits on top of a panel, `hover` is the lift state. */ --bg-deep: #060608; --bg-page: #0C0C0E; --bg-inset: #0E0E11; --bg-panel: #131316; --bg-raised: #1A1A20; --bg-raised-2: #222228; --bg-hover: #252528; --bg-wash: rgba(var(--sheen-rgb), .05); /* hover tint */ --bg-wash-soft:rgba(var(--sheen-rgb), .03); --bg-sunken: rgba(var(--shade-rgb), .3); /* inset fields */ --surface-white: #fff; /* a genuinely white field/paper surface */ /* Controls that float ON TOP of user artwork — portrait cards, battlemap thumbnails, token overlays. The picture underneath can be any colour, so these keep a dark chip and light glyph in EVERY theme. Do not override them in a theme block; a light theme would make the chip vanish into whatever art is behind it. */ --media-scrim: rgba(8, 8, 10, .62); --media-scrim-strong: rgba(8, 8, 10, .85); --media-veil: rgba(8, 8, 10, .55); /* bottom fade on art */ --media-line: rgba(255, 255, 255, .65); --text-on-media: #fff; /* Text on a CRIMSON surface — primary buttons, toasts, active tabs, badges. `--crimson` is an ALIAS for each theme's accent, so it is only red in the red themes; it's brass in Ocarina and gold in Rowena. That means the right foreground is whatever the theme nominates for its accent, not a fixed white — white on brass measures 1.9, which is unreadable. This exists as its own name because the call sites say "crimson", and a token that mirrors the surface it describes is what stops the next person reaching for `--text-strong` (the heading colour, dark red in Fantasy) and reintroducing red-on-red. */ --text-on-crimson: var(--text-on-accent); /* ── 3. Text ──────────────────────────────────────────────*/ /* `text-strong` is bright text sitting on a DARK or accent surface (button labels, map overlays) — it stays light in every theme. `text-title` is a page/card heading sitting on the page surface, so a light theme flips it to the accent colour. */ --text-strong: #fff; --text-title: #fff; --text: #E8E8ED; /* body copy */ --text-heading: #D4D4DA; /* card titles, metal trim */ --text-muted: #9898A0; /* secondary copy */ --text-dim: #898991; /* captions, placeholders */ --text-faint: #555559; /* disabled */ --text-on-accent: #fff; --text-inverse: #1A1A20; /* dark text on a bright chip */ --text-field: #fff; /* value typed into a form field */ /* ── 4. Accent ────────────────────────────────────────────*/ --accent: #DC2626; --accent-hover: #EF4444; --accent-bright: #F87171; --accent-soft: #FCA5A5; /* accent text on dark */ --accent-strong: #991B1B; --accent-deep: #7F1D1D; --accent-glow: rgba(var(--accent-rgb), .25); /* ── 5. Lines ─────────────────────────────────────────────*/ --focus-ring: #FFFFFF; /* keyboard focus ring. It is drawn OUTSIDE the control, on the page behind it, so it only has to contrast with the background. */ --line: #2A2A30; --line-strong: #333338; --line-soft: rgba(var(--sheen-rgb), .08); /* Metal trim: the highlight colour on hovered borders, filled pips and toggle knobs. Deliberately the same value as the heading/caption text ramp — trim and titles share a colour in both themes — but named for the role so its use on a border reads as intentional. `--gold`/`--gold-dim` are the legacy spellings of these two. */ --trim: var(--text-heading); --trim-dim: var(--text-dim); /* ── 6. Status ──────────────────────────────────────────── Each ramp: base → bright → soft(text) → deep(fill). */ --ok: #22C55E; --ok-bright: #4ADE80; --ok-soft: #86EFAC; --ok-deep: #15803D; --amber: #FCD34D; --amber-bright:#FDE047; --amber-soft: #FDE68A; --amber-deep: #B45309; --info: #3B82F6; --info-bright: #60A5FA; --info-soft: #BFDBFE; --info-deep: #1D4ED8; /* Real metallic gold — the calendar pages use it for headings (`--text-heading: var(--gold-metal)`) and it shows up in trim. */ --gold-metal: #D4AF5A; --gold-metal-deep: #A89058; --magic: #A855F7; --magic-bright:#C4B5FD; --magic-soft: #DDD6FE; --magic-deep: #6D28D9; /* ── 7. Depth ─────────────────────────────────────────────*/ --shadow-soft: rgba(var(--shade-rgb), .3); --shadow: rgba(var(--shade-rgb), .6); --shadow-strong: rgba(var(--shade-rgb), .85); --scrim: rgba(var(--shade-rgb), .7); /* modal veil */ /* ── 8. Sheet ───────────────────────────────────────────── The printed character sheet and monster statblock are meant to look like paper in every theme, so these stay warm by default — but they're tokens, so a theme *can* restyle them. */ --sheet-bg: #FDF1DC; --sheet-bg-alt: #FEF6E4; --sheet-bg-deep: #F5E6C8; --sheet-fill: #EEEEEE; /* table header / filled cells */ --sheet-ink: #1C1008; --sheet-ink-mid: #6B3A1F; --sheet-accent: #58180D; /* the statblock header red */ --sheet-line: #C4A97D; --sheet-line-soft: #D4C4A8; --sheet-rule: #666666; /* printed hairlines */ --sheet-text: #000000; /* body text on paper */ --sheet-text-soft: #333333; --sheet-text-mid: #555555; --sheet-text-dim: #999999; /* ── 9. Spell tags ────────────────────────────────────────*/ --sc-cantrip: #93C5FD; --sc-spell: #A78BFA; --sc-ritual: #6EE7B7; --sc-choice: #FCD34D; /* ── 10. Legacy aliases ─────────────────────────────────── Older names used across the app. Kept as pointers so both spellings stay in sync; prefer the semantic names above in new code. */ --parchment: var(--bg-raised); --parchment-light: var(--bg-raised-2); --bark: var(--bg-panel); --bark-light: var(--bg-hover); --bark-dark: var(--bg-page); --bark-deep: var(--bg-deep); --ink: var(--text); --ink-mid: var(--text-muted); --ink-dim: var(--text-dim); --ink-faint: var(--text-faint); --gold: var(--text-heading); --gold-dim: var(--text-dim); --crimson: var(--accent); --crimson-hover: var(--accent-hover); --crimson-hi: var(--accent-hover); --crimson-glow: var(--accent-glow); --border: var(--line); --shadow: rgba(var(--shade-rgb), .6); --bg: var(--bg-page); --bg-dark: var(--bg-page); --bg-2: var(--bg-panel); --panel: var(--bg-panel); --panel-2: var(--bg-hover); /* ── 11. Form fields ─────────────────────────────────────── A field is identified by its own fill, which has to clear 3:1 against the panel behind it (WCAG 1.4.11). Themes whose raised surface already does that inherit it unchanged. */ --field-bg: var(--bg-raised-2); --field-placeholder: var(--text-dim); /* Accent used as TEXT on the page needs 4.5:1, which the button-background accent does not always reach. Kept apart so a theme can fix its text without moving its brand red. */ --accent-text: var(--accent); /* The ink weights are written in — an item's "35 lb" beside its name, a contents line, a carried total. Brown on parchment; on the dark themes a tan of the same family, because a dark brown cannot be read on a dark surface. Every value is checked at 4.5:1 or better against the theme's page, panel and raised surfaces (the ratio in each override is the worst of the three). */ --weight-ink: #D2A06E; /* 7.4:1 on the dark base */ /* ── 12. Primary button ──────────────────────────────────── Deliberately NOT the accent ramp. The lightest tone that can carry the label caps the top of this gradient, so the hover step has to be cut from below — moving --accent to do that would drag the whole brand colour down with it. */ --btn-accent-top: var(--accent-hover); --btn-accent-bottom: var(--accent); --btn-accent-top-hover: var(--accent-bright); --btn-accent-bottom-hover: var(--accent-hover); } /* ============================================================ DARK — overrides that must NOT cascade into other themes. The base block above is shared (:root is every theme's root), so anything true only of dark lives here, matched on the attribute itself plus the no-attribute default. ============================================================ */ :root:not([data-theme]), [data-theme="dark"] { /* Field fill: #222228 sat at 1.2:1 against the panel, so the input was invisible without its border. */ --field-bg: #616172; --field-placeholder: #DFDFE1; /* #DC2626 reaches only 4.05:1 as text on the page. */ --accent-text: #E03C3C; /* White label needs 4.5:1, which caps the red at ~#DC2828. Rest sits two steps below that so hover has room to lift. */ --btn-accent-top: #A51B1B; --btn-accent-bottom: #8A1616; --btn-accent-top-hover: #DC2828; --btn-accent-bottom-hover: #C11F1F; } /* ============================================================ FANTASY — warm parchment and aged leather (light mode) 60% parchment surfaces / 30% brown UI / 10% burgundy accent ============================================================ */ :root[data-theme="fantasy"], [data-theme="fantasy"] { /* 1. Channels — every tint in the app follows from these */ --accent-rgb: 139, 26, 26; --accent-deep-rgb: 88, 24, 13; --sheen-rgb: 120, 85, 45; /* "highlights" darken on paper */ --shade-rgb: 60, 40, 20; --trim-rgb: 107, 87, 68; --ok-rgb: 21, 128, 61; --ok-soft-rgb: 6, 95, 70; --ok-deep-rgb: 5, 90, 60; --amber-rgb: 161, 98, 7; --amber-deep-rgb: 113, 63, 18; --info-rgb: 12, 74, 110; --info-2-rgb: 14, 116, 144; --info-soft-rgb: 7, 89, 133; --info-deep-rgb: 8, 47, 73; --magic-rgb: 91, 33, 182; --magic-deep-rgb: 76, 29, 149; --text-dim-rgb: 139, 115, 85; --line-rgb: 184, 151, 106; --gold-metal-rgb: 138, 109, 31; --bg-page-rgb: 240, 229, 208; --bg-deep-rgb: 232, 213, 183; --bg-raised-rgb: 245, 230, 208; /* 2. Surfaces */ --bg-deep: #E8D5B7; --bg-page: #F0E5D0; --bg-inset: #EFE0C4; --bg-panel: #E8D5B7; --bg-raised: #F5E6D0; --bg-raised-2: #FDF1DC; --bg-hover: #F0E0C8; --bg-wash: rgba(var(--accent-rgb), .06); --bg-wash-soft:rgba(var(--accent-rgb), .04); --bg-sunken: rgba(var(--shade-rgb), .07); --surface-white: #FDF1DC; /* 3. Text — burgundy headings, dark-brown body. On parchment there is no such thing as readable white text, so `text-strong` flips to burgundy along with `text-title`. Text that sits ON a button keeps its own token (--text-on-accent) and stays cream, so this flip can't wash out a button label. */ --text-strong: #8B1A1A; --text-title: #8B1A1A; --text: #2C1810; --text-heading: #4A3728; --text-muted: #6B5744; --text-dim: #6E5A43; --weight-ink: #6B4423; /* weights: 5.9:1 on parchment */ --text-faint: #A89478; --text-on-accent: #FDF1DC; --text-inverse: #2C1810; --text-field: #2C1810; /* 4. Accent */ --accent: #8B1A1A; --accent-hover: #A52222; --accent-bright: #B33518; --accent-soft: #7A1212; --accent-strong: #6E1414; --accent-deep: #58180D; --accent-glow: rgba(var(--accent-rgb), .2); /* 5. Lines */ --focus-ring: #2C1810; /* fantasy is the one light theme */ --line: #A07D4C; --line-strong: #8B7355; --line-soft: rgba(var(--shade-rgb), .12); /* 6. Status — darkened so they read on parchment */ --ok: #15803D; --ok-bright: #16A34A; --ok-soft: #065F46; --ok-deep: #14532D; --amber: #A16207; --amber-bright:#CA8A04; --amber-soft: #854D0E; --amber-deep: #713F12; --info: #0C4A6E; --info-bright: #0E7490; --info-soft: #075985; --info-deep: #082F49; --gold-metal: #8A6D1F; --gold-metal-deep: #6B5416; --magic: #5B21B6; --magic-bright:#6D28D9; --magic-soft: #4C1D95; --magic-deep: #3B0764; /* 7. Depth */ --shadow-soft: rgba(var(--shade-rgb), .15); --shadow: rgba(var(--shade-rgb), .3); --shadow-strong: rgba(var(--shade-rgb), .45); --scrim: rgba(var(--shade-rgb), .45); /* 8. Sheet stays paper-coloured — no overrides needed. */ /* 9. Spell tags — darkened for light backgrounds */ --sc-cantrip: #1D4ED8; --sc-spell: #6D28D9; --sc-ritual: #047857; --sc-choice: #A16207; } /* ============================================================ OCARINA — moonlit forest and gilded brass (dark mode) ============================================================ Deep green twilight surfaces, warm brass as the accent, and cream text. The brand colour is gold rather than red here, so buttons carry dark-green text (--text-on-accent) instead of white. Sheet tokens are left alone — paper stays paper. ============================================================ */ [data-theme="ocarina"] { /* 1. Channels */ --accent-rgb: 200, 164, 74; --accent-deep-rgb: 110, 86, 32; --sheen-rgb: 245, 239, 220; /* warm cream highlights */ --shade-rgb: 3, 12, 8; /* green-black shadow */ --ok-rgb: 76, 183, 130; --ok-soft-rgb: 167, 231, 198; --ok-deep-rgb: 31, 107, 74; --amber-rgb: 232, 194, 90; --amber-deep-rgb: 168, 121, 30; --info-rgb: 79, 168, 216; --info-2-rgb: 59, 146, 196; --info-soft-rgb: 185, 225, 245; --info-deep-rgb: 31, 108, 149; --magic-rgb: 169, 139, 224; --magic-deep-rgb: 107, 79, 168; --trim-rgb: 200, 164, 74; --text-dim-rgb: 122, 142, 128; --line-rgb: 42, 74, 60; --gold-metal-rgb: 216, 180, 87; --bg-page-rgb: 14, 27, 22; --bg-deep-rgb: 10, 20, 16; --bg-raised-rgb: 24, 48, 40; /* 2. Surfaces */ --bg-deep: #0A1410; --bg-page: #0E1B16; --bg-inset: #0C1712; --bg-panel: #132720; --bg-raised: #183028; --bg-raised-2: #1E3A31; --bg-hover: #244539; --surface-white: #F7F2E2; /* 3. Text */ --text-strong: #F5EFDC; --text-title: #F5EFDC; --text: #E4E0CE; --text-heading: #C8A44A; /* gold trim doubles as headings */ --text-muted: #9FB0A2; --text-dim: #91A296; --text-faint: #5C6E62; --text-on-accent: #10241C; /* dark green on a brass button */ --text-inverse: #10241C; --text-field: #F5EFDC; /* 4. Accent — brass */ --accent: #C8A44A; --accent-hover: #DCBA5F; --accent-bright: #EBD07E; --accent-soft: #EFDCA0; --accent-strong: #9C7C2E; --accent-deep: #6E5620; --accent-glow: rgba(var(--accent-rgb), .3); /* 5. Lines */ --line: #3F6F5A; --line-strong: #457760; /* 6. Status */ --ok: #4CB782; --ok-bright: #6FD3A0; --ok-soft: #A7E7C6; --ok-deep: #1F6B4A; --amber: #E8C25A; --amber-bright:#F5D77C; --amber-soft: #F7E3AC; --amber-deep: #A8791E; --info: #4FA8D8; --info-bright: #7BC5EA; --info-soft: #B9E1F5; --info-deep: #1F6C95; --gold-metal: #D8B457; --gold-metal-deep: #A8873A; --magic: #A98BE0; --magic-bright:#C6B2ED; --magic-soft: #DED2F5; --magic-deep: #6B4FA8; /* 7. Depth, 8. Sheet — inherit the base. */ /* 9. Spell tags */ --sc-cantrip: #7BC5EA; --sc-spell: #C6B2ED; --sc-ritual: #6FD3A0; --sc-choice: #F5D77C; } /* ============================================================ HOTLINE — neon nightdrive (dark mode) ============================================================ An 80s-arcade palette: deep violet-black surfaces lit by hot magenta, electric cyan and acid yellow. Two things make neon read as neon rather than as "bright colours on grey": • The darks are heavily SATURATED violet, never neutral, so every glow has something to bloom against. • The highlight channel is the accent itself, not white — so hover washes and hairlines come up pink like light bleeding off a sign, instead of dusting everything grey. The accent is a light magenta, so button labels are near-black (--text-on-accent): white on hot pink only reaches 3.5:1, dark reaches 5.6:1. Sheet tokens are untouched — paper stays paper. ============================================================ */ [data-theme="hotline"] { /* 1. Channels — the glow colours */ --accent-rgb: 255, 46, 136; /* hot magenta */ --accent-deep-rgb: 154, 15, 78; --sheen-rgb: 255, 46, 136; /* highlights bleed pink */ --shade-rgb: 8, 2, 20; /* violet-black shadow */ --ok-rgb: 43, 224, 138; --ok-soft-rgb: 134, 255, 199; --ok-deep-rgb: 16, 138, 84; --amber-rgb: 255, 201, 60; --amber-deep-rgb: 201, 136, 12; --info-rgb: 34, 211, 238; --info-2-rgb: 42, 230, 214; --info-soft-rgb: 165, 243, 252; --info-deep-rgb: 14, 138, 160; --magic-rgb: 199, 125, 255; --magic-deep-rgb: 123, 47, 247; --trim-rgb: 42, 230, 214; /* cyan trim */ --text-dim-rgb: 138, 118, 173; --line-rgb: 58, 34, 96; --gold-metal-rgb: 255, 212, 71; --bg-page-rgb: 18, 10, 34; --bg-deep-rgb: 11, 7, 22; --bg-raised-rgb: 43, 26, 77; /* 2. Surfaces — violet night */ --bg-deep: #0B0716; --bg-page: #120A22; --bg-inset: #0E0819; --bg-panel: #1A0F2E; --bg-raised: #2B1A4D; --bg-raised-2: #352060; --bg-hover: #402873; --surface-white: #F2E9FF; /* 3. Text */ --text-strong: #FFFFFF; --text-title: #F2E9FF; --text: #EADCFF; --text-heading: #2AE6D6; /* cyan trim + card titles */ --text-muted: #B9A6D9; --text-dim: #9D8DBB; --field-bg: #724BC3; --field-placeholder: #E3DFEC; --text-faint: #63527F; --text-on-accent: #14071F; /* near-black on hot magenta */ --text-inverse: #14071F; --text-field: #FFFFFF; /* 4. Accent — hot magenta */ --accent: #FF2E88; --accent-hover: #FF5CA3; --accent-bright: #FF8FC0; --accent-soft: #FFB8D8; --accent-strong: #C71166; --accent-deep: #9A0F4E; --accent-glow: rgba(var(--accent-rgb), .4); /* 5. Lines */ --line: #3A2260; --line-strong: #4E2F80; --line-soft: rgba(var(--sheen-rgb), .18); /* 6. Status */ --ok: #2BE08A; --ok-bright: #5BF0AB; --ok-soft: #86FFC7; --ok-deep: #108A54; --amber: #FFC93C; --amber-bright:#FFDD70; --amber-soft: #FFEBA8; --amber-deep: #C9880C; --info: #22D3EE; --info-bright: #5EE7F7; --info-soft: #A5F3FC; --info-deep: #0E8AA0; --gold-metal: #FFD447; --gold-metal-deep: #C9A420; --magic: #C77DFF; --magic-bright:#DCA9FF; --magic-soft: #EBCEFF; --magic-deep: #7B2FF7; /* 7. Depth — shadows keep the violet cast so panels sit in neon haze rather than grey fog. */ --shadow-soft: rgba(var(--shade-rgb), .5); --shadow: rgba(var(--shade-rgb), .75); --shadow-strong: rgba(var(--shade-rgb), .92); --scrim: rgba(var(--shade-rgb), .8); /* 8. Sheet — inherits the base (paper stays paper). */ /* 9. Spell tags */ --sc-cantrip: #5EE7F7; --sc-spell: #DCA9FF; --sc-ritual: #5BF0AB; --sc-choice: #FFDD70; } /* ============================================================ GODRIC — blood red and gold (dark mode) ============================================================ Palette: #740001 #ae0001 #ecb939 #d3a625 #000000 Both reds from the palette do the work: #740001 is the page and #ae0001 is the raised card, so surfaces step through a real range instead of one flat tone. #ecb939 is the accent and heading gold, #d3a625 the border gold. Sheet tokens are untouched — paper stays paper. ============================================================ */ [data-theme="godric"] { /* 1. Channels */ --accent-rgb: 236, 185, 57; --accent-deep-rgb: 160, 125, 24; --sheen-rgb: 255, 240, 230; --shade-rgb: 20, 0, 0; --ok-rgb: 110, 224, 150; --ok-soft-rgb: 170, 240, 200; --ok-deep-rgb: 26, 122, 74; --amber-rgb: 236, 185, 57; --amber-deep-rgb: 160, 125, 24; --info-rgb: 140, 196, 244; --info-2-rgb: 104, 170, 224; --info-soft-rgb: 204, 228, 250; --info-deep-rgb: 44, 104, 154; --magic-rgb: 210, 172, 244; --magic-deep-rgb: 136, 96, 180; --trim-rgb: 236, 185, 57; --text-dim-rgb: 226, 170, 170; --line-rgb: 211, 166, 37; --gold-metal-rgb: 236, 185, 57; --bg-page-rgb: 116, 0, 1; --bg-deep-rgb: 82, 0, 1; --bg-raised-rgb: 174, 0, 1; /* 2. Surfaces — both base tones from the palette */ --bg-deep: #520001; --bg-page: #740001; --bg-inset: #630001; --bg-panel: #8E0001; --bg-raised: #AE0001; --bg-raised-2: #C00204; --bg-hover: #D01418; --surface-white: #FFF3EC; /* 3. Text */ --text-strong: #FFFFFF; --text-title: #FFFFFF; --text: #FFF0F0; --text-heading: #ECB939; --text-muted: #F0C4C4; --text-dim: #EFD2D2; --weight-ink: #F0D2B0; /* weights: 5.2:1 on the reds */ --text-faint: #B87878; --text-on-accent: #740001; --text-inverse: #740001; --text-field: #FFFFFF; /* 4. Accent */ --accent: #ECB939; --accent-hover: #F2C94F; --accent-bright: #F5D77C; --accent-soft: #F9E6AE; --accent-strong: #D3A625; --accent-deep: #A07D18; --accent-glow: rgba(var(--accent-rgb), .4); /* 5. Lines */ --line: #D3A625; --line-strong: #ECB939; /* 6. Status */ --ok: #6EE096; --ok-bright: #96EBB4; --ok-soft: #BCF4D2; --ok-deep: #1A7A4A; --amber: #ECB939; --amber-bright:#F5D77C; --amber-soft: #F9E6AE; --amber-deep: #A07D18; --info: #8CC4F4; --info-bright: #B4D9F8; --info-soft: #CCE4FA; --info-deep: #2C689A; --gold-metal: #ECB939; --gold-metal-deep: #D3A625; --magic: #D2ACF4; --magic-bright:#E2C9F8; --magic-soft: #EFE0FB; --magic-deep: #8860B4; /* 7. Depth, 8. Sheet — inherit the base. */ /* 9. Spell tags */ --sc-cantrip: #B4D9F8; --sc-spell: #E2C9F8; --sc-ritual: #96EBB4; --sc-choice: #F5D77C; } /* ============================================================ SALAZAR — bottle green and silver (dark mode) ============================================================ Palette: #1a472a #2a623d #5d5d5d #aaaaaa #000000 #1a472a is the page and #2a623d the raised card — two greens rather than one, which is what gives the panels depth. Both greys from the palette are used: #5d5d5d for borders, #aaaaaa for trim and accent. Sheet tokens are untouched — paper stays paper. ============================================================ */ [data-theme="salazar"] { /* 1. Channels */ --accent-rgb: 170, 170, 170; --accent-deep-rgb: 93, 93, 93; --sheen-rgb: 240, 246, 242; --shade-rgb: 4, 18, 10; --ok-rgb: 110, 232, 160; --ok-soft-rgb: 175, 245, 205; --ok-deep-rgb: 26, 122, 74; --amber-rgb: 236, 200, 96; --amber-deep-rgb: 154, 126, 32; --info-rgb: 140, 208, 236; --info-2-rgb: 104, 182, 214; --info-soft-rgb: 200, 234, 246; --info-deep-rgb: 38, 112, 142; --magic-rgb: 200, 170, 242; --magic-deep-rgb: 128, 92, 178; --trim-rgb: 200, 200, 200; --text-dim-rgb: 173, 198, 180; --line-rgb: 93, 93, 93; --gold-metal-rgb: 170, 170, 170; --bg-page-rgb: 26, 71, 42; --bg-deep-rgb: 16, 48, 28; --bg-raised-rgb: 42, 98, 61; /* 2. Surfaces — both base tones from the palette */ --bg-deep: #10301C; --bg-page: #1A472A; --bg-inset: #153A22; --bg-panel: #215533; --bg-raised: #2A623D; --bg-raised-2: #33734A; --bg-hover: #3D8657; --surface-white: #F2FAF4; /* 3. Text */ --text-strong: #FFFFFF; --text-title: #FFFFFF; --text: #EFF5F1; --text-heading: #C8C8C8; --text-muted: #C2D6C9; --text-dim: #DFE9E1; --weight-ink: #F0D2B0; /* weights: 5.0:1 on the greens */ --text-faint: #7E9887; --text-on-accent: #1A472A; --text-inverse: #1A472A; --text-field: #FFFFFF; /* 4. Accent */ --accent: #AAAAAA; --accent-hover: #C0C0C0; --accent-bright: #D6D6D6; --accent-soft: #E8E8E8; --accent-strong: #8A8A8A; --accent-deep: #5D5D5D; --accent-glow: rgba(var(--accent-rgb), .35); /* 5. Lines */ --line: #898989; --line-strong: #AAAAAA; /* 6. Status */ --ok: #6EE8A0; --ok-bright: #96F0BE; --ok-soft: #BCF7D6; --ok-deep: #1A7A4A; --amber: #ECC860; --amber-bright:#F2D986; --amber-soft: #F7E7B4; --amber-deep: #9A7E20; --info: #8CD0EC; --info-bright: #B0E2F4; --info-soft: #C8EAF6; --info-deep: #26708E; --gold-metal: #AAAAAA; --gold-metal-deep: #8A8A8A; --magic: #C8AAF2; --magic-bright:#DCC8F8; --magic-soft: #EBDEFB; --magic-deep: #805CB2; /* 7. Depth, 8. Sheet — inherit the base. */ /* 9. Spell tags */ --sc-cantrip: #B0E2F4; --sc-spell: #DCC8F8; --sc-ritual: #96F0BE; --sc-choice: #F2D986; } /* ============================================================ HELGA — dark earth and honey gold (dark mode) ============================================================ Palette: #ecb939 #f0c75e #726255 #372e29 #000000 The palette's own surfaces are the two browns — #372e29 for panels and #726255 for the lift state — with the two yellows as accent and hover. That makes this a DARK theme, not the yellow-page one it was: the yellow in the scarf is the stripe, and the browns are the cloth. Sheet tokens are untouched — paper stays paper. ============================================================ */ [data-theme="helga"] { /* 1. Channels */ --accent-rgb: 236, 185, 57; --accent-deep-rgb: 143, 109, 18; --sheen-rgb: 255, 246, 230; --shade-rgb: 16, 12, 8; --ok-rgb: 110, 216, 130; --ok-soft-rgb: 170, 236, 184; --ok-deep-rgb: 34, 116, 54; --amber-rgb: 240, 199, 94; --amber-deep-rgb: 160, 122, 20; --info-rgb: 132, 190, 232; --info-2-rgb: 96, 164, 210; --info-soft-rgb: 200, 226, 244; --info-deep-rgb: 40, 100, 146; --magic-rgb: 202, 168, 236; --magic-deep-rgb: 128, 92, 176; --trim-rgb: 236, 185, 57; --text-dim-rgb: 168, 150, 138; --line-rgb: 114, 98, 85; --gold-metal-rgb: 236, 185, 57; --bg-page-rgb: 36, 30, 26; --bg-deep-rgb: 26, 21, 18; --bg-raised-rgb: 74, 63, 56; /* 2. Surfaces — both base tones from the palette */ --bg-deep: #1A1512; --bg-page: #241E1A; --bg-inset: #1F1A16; --bg-panel: #372E29; --bg-raised: #4A3F38; --bg-raised-2: #5C4F46; --bg-hover: #726255; --surface-white: #FFF6E8; /* 3. Text */ --text-strong: #FFFFFF; --text-title: #FFFFFF; --text: #F5EFE8; --text-heading: #ECB939; --text-muted: #CFC0B0; --text-dim: #CDC3BC; --weight-ink: #DDB07F; /* weights: 5.1:1 on the browns */ --text-faint: #85756A; --text-on-accent: #372E29; --text-inverse: #372E29; --text-field: #FFFFFF; /* 4. Accent */ --accent: #ECB939; --accent-hover: #F0C75E; --accent-bright: #F5D782; --accent-soft: #F9E7B4; --accent-strong: #C89A20; --accent-deep: #8F6D12; --accent-glow: rgba(var(--accent-rgb), .4); /* 5. Lines */ --line: #776759; --line-strong: #8F7D6D; /* 6. Status */ --ok: #6ED882; --ok-bright: #96E5A6; --ok-soft: #BCF0C6; --ok-deep: #227436; --amber: #F0C75E; --amber-bright:#F5D782; --amber-soft: #F9E7B4; --amber-deep: #A07A14; --info: #84BEE8; --info-bright: #AAD4F0; --info-soft: #C8E2F4; --info-deep: #286492; --gold-metal: #ECB939; --gold-metal-deep: #C89A20; --magic: #CAA8EC; --magic-bright:#DEC6F4; --magic-soft: #EDDEF9; --magic-deep: #805CB0; /* 7. Depth, 8. Sheet — inherit the base. */ /* 9. Spell tags */ --sc-cantrip: #AAD4F0; --sc-spell: #DEC6F4; --sc-ritual: #96E5A6; --sc-choice: #F5D782; } /* ============================================================ ROWENA — midnight navy and bronze (dark mode) ============================================================ Palette: #0e1a40 #222f5b #946b2d #aaaaaa #000000 #0e1a40 is the page and #222f5b the raised card — two navies, which is what stops it going flat. Bronze (#946b2d) is the accent, brightened a step so it reads as text on the darker navy; silver (#aaaaaa) is the heading trim. Sheet tokens are untouched — paper stays paper. ============================================================ */ [data-theme="rowena"] { /* 1. Channels */ --accent-rgb: 186, 138, 66; --accent-deep-rgb: 110, 78, 30; --sheen-rgb: 240, 246, 252; --shade-rgb: 2, 6, 20; --ok-rgb: 110, 220, 171; --ok-soft-rgb: 170, 240, 205; --ok-deep-rgb: 22, 114, 80; --amber-rgb: 236, 196, 110; --amber-deep-rgb: 148, 107, 45; --info-rgb: 152, 205, 248; --info-2-rgb: 110, 182, 245; --info-soft-rgb: 200, 226, 250; --info-deep-rgb: 38, 92, 150; --magic-rgb: 203, 176, 242; --magic-deep-rgb: 124, 90, 176; --trim-rgb: 170, 170, 170; --text-dim-rgb: 147, 163, 192; --line-rgb: 148, 107, 45; --gold-metal-rgb: 186, 138, 66; --bg-page-rgb: 14, 26, 64; --bg-deep-rgb: 10, 19, 48; --bg-raised-rgb: 34, 47, 91; /* 2. Surfaces — both base tones from the palette */ --bg-deep: #0A1330; --bg-page: #0E1A40; --bg-inset: #0C1638; --bg-panel: #18244D; --bg-raised: #222F5B; --bg-raised-2: #2C3B6E; --bg-hover: #384A85; --surface-white: #F0F6FF; /* 3. Text */ --text-strong: #FFFFFF; --text-title: #FFFFFF; --text: #E8EDF8; --text-heading: #AAAAAA; --text-muted: #B8C4DC; --text-dim: #9BAAC5; --text-faint: #75839E; --text-on-accent: #0E1A40; --text-inverse: #0E1A40; --text-field: #FFFFFF; /* 4. Accent */ --accent: #BA8A42; --accent-hover: #CE9C52; --accent-bright: #DFB374; --accent-soft: #EDD0A4; --accent-strong: #946B2D; --accent-deep: #6E4E1E; --accent-glow: rgba(var(--accent-rgb), .35); /* 5. Lines */ --line: #946B2D; --line-strong: #BA8A42; /* 6. Status */ --ok: #6EDCAB; --ok-bright: #96E8C6; --ok-soft: #BAF2DA; --ok-deep: #167250; --amber: #ECC46E; --amber-bright:#F2D896; --amber-soft: #F7E7BE; --amber-deep: #946B2D; --info: #98CDF8; --info-bright: #BEDEFA; --info-soft: #D8EBFC; --info-deep: #265C96; --gold-metal: #BA8A42; --gold-metal-deep: #946B2D; --magic: #CBB0F2; --magic-bright:#DFCCF7; --magic-soft: #EEE2FB; --magic-deep: #7C5AB0; /* 7. Depth, 8. Sheet — inherit the base. */ /* 9. Spell tags */ --sc-cantrip: #BEDEFA; --sc-spell: #DFCCF7; --sc-ritual: #96E8C6; --sc-choice: #F2D896; } /* ============================================================ AZMUTH — deep forest and lime (dark mode) ============================================================ Palette: #071C17 #0D3133 #4EA234 #8CC623 #DEFF7A Two near-black greens carry the surfaces — #071C17 is the page and #0D3133 the raised card — which is what keeps it from going flat. Leaf green (#4EA234) is the accent, brightening through #8CC623 on hover, and #DEFF7A is the highlight: the heading trim, the accent-on-dark text colour, and the sheen that hover washes and hairlines are tinted with, so the whole theme catches a lime light rather than a grey one. The accent is a mid green, so button labels are the near-black page colour rather than white: dark reads 5.5 on the accent and 8.6 on the hover step, white only manages 3.6. Sheet tokens are untouched — paper stays paper. ============================================================ */ [data-theme="azmuth"] { /* 1. Channels */ --accent-rgb: 78, 162, 52; --accent-deep-rgb: 35, 82, 26; --sheen-rgb: 222, 255, 122; /* highlights bloom lime */ --shade-rgb: 3, 12, 10; --ok-rgb: 86, 217, 138; --ok-soft-rgb: 168, 240, 190; --ok-deep-rgb: 24, 110, 66; --amber-rgb: 232, 194, 90; --amber-deep-rgb: 150, 110, 30; --info-rgb: 127, 196, 232; --info-2-rgb: 96, 172, 214; --info-soft-rgb: 198, 228, 244; --info-deep-rgb: 28, 92, 128; --magic-rgb: 180, 155, 232; --magic-deep-rgb: 104, 82, 158; --trim-rgb: 222, 255, 122; --text-dim-rgb: 126, 154, 120; --line-rgb: 20, 64, 60; --gold-metal-rgb: 222, 255, 122; --bg-page-rgb: 7, 28, 23; --bg-deep-rgb: 4, 18, 15; --bg-raised-rgb: 13, 49, 51; /* 2. Surfaces — both base tones from the palette */ --bg-deep: #04120F; --bg-page: #071C17; --bg-inset: #06201D; --bg-panel: #0A2A28; --bg-raised: #0D3133; --bg-raised-2: #12403F; --bg-hover: #184F4B; --surface-white: #F2F8EC; /* 3. Text */ --text-strong: #FFFFFF; --text-title: #FFFFFF; --text: #E6F2DC; --text-heading: #DEFF7A; /* the highlight, doing the trim job */ --text-muted: #A8C49A; --text-dim: #92AA8D; --text-faint: #5C7358; --text-on-accent: #071C17; /* dark on leaf green — white is 3.6 */ --text-inverse: #071C17; --text-field: #FFFFFF; /* 4. Accent */ --accent: #4EA234; --accent-hover: #8CC623; --accent-bright: #B4E04A; --accent-soft: #DEFF7A; /* accent text on dark */ --accent-strong: #3A7A27; --accent-deep: #23521A; --accent-glow: rgba(var(--accent-rgb), .32); /* 5. Lines */ --line: #23716A; --line-strong: #2B7C6E; /* 6. Status */ --ok: #56D98A; --ok-bright: #7FE6A8; --ok-soft: #A8F0BE; --ok-deep: #186E42; --amber: #E8C25A; --amber-bright:#F2D688; --amber-soft: #F8E7B8; --amber-deep: #966E1E; --info: #7FC4E8; --info-bright: #A6D8F1; --info-soft: #CDEAF8; --info-deep: #1C5C80; --gold-metal: #DEFF7A; --gold-metal-deep: #A8C64A; --magic: #B49BE8; --magic-bright:#CBB8F1; --magic-soft: #E1D6F8; --magic-deep: #68529E; /* 7. Depth, 8. Sheet — inherit the base. */ /* 9. Spell tags */ --sc-cantrip: #9BD9F0; --sc-spell: #C9B6F2; --sc-ritual: #86E8A8; --sc-choice: #DEFF7A; } /* ============================================================ HERO — firelight and cold steel (dark mode) ============================================================ Palette: #1E0705 #3A130D #E0601C #F2A93B #BBD4EC Everything is one fire seen from inside a dark room: near-black red for the page, a deeper red for the cards, and orange through amber for anything that acts. The one cold thing in it is the heading colour — a silver-blue lifted straight off the lettering on the cover this came from, which is the only element there NOT made of flame, and is what stops the whole screen reading as a single warm smear. The sheen channel is warm rather than white, so hover washes and hairlines come up as firelight catching an edge instead of dusting everything grey. Same trick Hotline uses with its pink. The accent is a mid orange, so button labels are the near-black page colour: dark reads 5.4 on the accent and 7.3 on the hover step, white only manages 3.3. Sheet tokens are untouched — paper stays paper. ============================================================ */ [data-theme="hero"] { /* 1. Channels */ --accent-rgb: 224, 96, 28; --accent-deep-rgb: 110, 35, 11; --sheen-rgb: 255, 198, 128; /* highlights read as firelight */ --shade-rgb: 12, 2, 1; --ok-rgb: 140, 201, 110; --ok-soft-rgb: 190, 228, 168; --ok-deep-rgb: 58, 110, 42; --amber-rgb: 242, 169, 59; --amber-deep-rgb: 158, 96, 18; --info-rgb: 159, 198, 232; --info-2-rgb: 130, 176, 216; --info-soft-rgb: 206, 226, 244; --info-deep-rgb: 58, 96, 138; --magic-rgb: 199, 155, 232; --magic-deep-rgb: 118, 78, 158; --trim-rgb: 187, 212, 236; --text-dim-rgb: 168, 131, 108; --line-rgb: 90, 34, 20; --gold-metal-rgb: 242, 169, 59; --bg-page-rgb: 30, 7, 5; --bg-deep-rgb: 20, 5, 3; --bg-raised-rgb: 58, 19, 13; /* 2. Surfaces — embers, darkest first */ --bg-deep: #140503; --bg-page: #1E0705; --bg-inset: #240907; --bg-panel: #2E0D09; --bg-raised: #3A130D; --bg-raised-2: #4A1A11; --bg-hover: #5C2315; --surface-white: #FDF3E7; /* 3. Text */ --text-strong: #FFFFFF; --text-title: #FFFFFF; --text: #F7E4D2; --text-heading: #BBD4EC; /* the cold one — trim and card titles */ --text-muted: #D2B29A; --text-dim: #AC8973; --field-bg: #B13E29; --field-placeholder: #EAE2DC; --text-faint: #7A5A48; --text-on-accent: #1E0705; /* dark on orange — white is 3.3:1 */ --text-inverse: #1E0705; --text-field: #FFFFFF; /* 4. Accent */ --accent: #E0601C; --accent-hover: #F0812C; --accent-bright: #F9A648; --accent-soft: #FFD08A; /* accent text on dark */ --accent-strong: #A83A12; --accent-deep: #6E230B; --accent-glow: rgba(var(--accent-rgb), .38); /* 5. Lines */ --line: #4A1A11; --line-strong: #7A2E18; /* 6. Status */ --ok: #8CC96E; --ok-bright: #A9D890; --ok-soft: #C8E8B4; --ok-deep: #3A6E2A; --amber: #F2A93B; --amber-bright:#F8C46E; --amber-soft: #FBDCA6; --amber-deep: #9E6012; --info: #9FC6E8; --info-bright: #BFDBF2; --info-soft: #DCEBF8; --info-deep: #3A608A; --gold-metal: #F2A93B; --gold-metal-deep: #B87C22; --magic: #C79BE8; --magic-bright:#DBBAF2; --magic-soft: #EBDCF8; --magic-deep: #764E9E; /* 7. Depth, 8. Sheet — inherit the base. */ /* 9. Spell tags */ --sc-cantrip: #BFDBF2; --sc-spell: #DBBAF2; --sc-ritual: #A9D890; --sc-choice: #F8C46E; } /* ── The accent outline ────────────────────────────────────────── Every accent-coloured rule and border in the app resolves through the `--crimson` alias, so pointing that ONE alias at a warm gold turns all of them — the header rule, panel outlines, active tabs, focus rings — without naming a single selector. It used to PULSE, and the pulse is gone because it cost too much. Animating a colour that every border on the page reads means re-resolving it and repainting all of them on every frame, forever, whether or not anything is happening. On a page with a grid of cards that is a real, felt cost, and it is being spent on something nobody is looking at. The highlight glow on the option cards carries the same idea where it earns its keep — on the one thing the user is actually pointing at, and only while they point at it. The bloom below is likewise a fixed value now rather than an animated one. */ [data-theme="hero"] { --crimson: #E8A02C; } /* The bloom, on the chrome that draws the signature accent rule. */ [data-theme="hero"] .sb-topbar, [data-theme="hero"] .app-header, [data-theme="hero"] .page-header { box-shadow: 0 3px 22px rgba(255, 200, 80, .20), 0 2px 12px rgba(var(--shade-rgb), .5); } /* Anything that FILLS with the accent rather than outlining with it opts out: a primary button in gold reads as a different button, not as firelight on an edge. Setting the alias locally overrides the inherited value for that subtree — the cascade does the excluding, so no rule is rewritten. */ [data-theme="hero"] .btn-primary, [data-theme="hero"] .btn-save, [data-theme="hero"] #toast { --crimson: #E0601C; } /* The fire itself. Two radial gradients, no artwork: a hot bloom in the middle over a red-to-black vignette that darkens into all four corners. It holds still while the page scrolls over it — a bloom that slides around reads as a bug rather than as light in a room. On its own fixed LAYER rather than `background-attachment: fixed` on the body. The two look identical and cost wildly different amounts: a fixed-attachment background has to be re-rasterised against the content on every scroll frame, which is one of the classic sources of scroll jank, whereas a fixed-position element is painted once and then just composited. Same picture, none of the bill. */ [data-theme="hero"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(ellipse 44% 32% at 50% 50%, rgba(255, 196, 104, .34) 0%, rgba(232, 104, 30, .20) 40%, rgba(150, 44, 14, 0) 76%), radial-gradient(ellipse 104% 84% at 50% 50%, #8A280F 0%, #55150A 22%, #300B06 46%, #190604 70%, #0C0201 100%); background-repeat: no-repeat; } /* ============================================================ Gold rim-light on a highlighted option — `sb-trim-glow` ============================================================ The light that says "this is the one". It lands on every option-style surface in the app: the role and create cards, the character creator's option cards, the library cards and the theme swatches. `sb-trim-glow` is here too so anything else can opt in by name without this list having to grow. ONLY IN THEMES THAT ASK FOR IT. The whole rule hangs off `html.sb-glow`, which shared/themes.js puts there for any theme whose registry entry says `glow: true`. So a new theme opts in or out by one word on its own entry — nothing here has to learn its name, and nobody has to remember this file exists. It is a HIGHLIGHT, not decoration. At rest the card is left completely alone; the glow exists only while it is hovered, keyboard-focused, or marked as the chosen one. A card that glows constantly is not telling anyone anything — the point of a highlight is that only one thing has it. NOT ANIMATED, deliberately. It pulsed at first, and a pulse means re-resolving a colour and repainting a shadow on every frame for every card on screen — with a grid of them that is a real cost, and it was felt. It fades in and out instead, on the transitions these cards already carry, so it costs something only while the pointer is actually moving between them. The colour is mixed from the theme's own `--gold-metal` and `--accent` rather than written down, so Fantasy lights up in its brass, Rowena in its bronze and Hero in its firelight — one rule, no per-theme variants. The `.sb-glow` prefix also settles a specificity argument that used to need a hack. theme.css loads before each page's own