/* ===================================================================================== COTERIE PALETTES - the ONE file that holds colour values (tasks 2774, 2776, 2815) ===================================================================================== Every colour the app uses is a CSS custom property set here, per LOOK x MODE x LAYER: the chrome, the five game boards, and the correctness themes' inks. Components consume the tokens below and never a literal. The few literals that deliberately live elsewhere are listed at the end of this header. Fonts and shapes of each look are in css/looks.css. ── THE THREE AXES ─────────────────────────────────────────────────────────────────── LOOK (task 2815). The account's personal look (GlobalProfile.Look, Coterie.Shared LookCatalog). Set by the inline script at the top of index.html BEFORE Blazor boots: the look cached in localStorage["coterie-look"] while signed in, else the default (Fernhouse). Signed-out pages always get the default. After sign-in Services/LookService applies the server's value. The colours are copied verbatim from docs/design/theme-directions-r3.html (see THE LOOKS below). MODE . Set by the same script, also before Blazor boots: the user's saved sun/moon choice in localStorage["coterie-theme-mode"], else the default: the device's light/dark setting (prefers-color-scheme: light = day; dark or none = night), or NIGHT for everyone if index.html's data-theme-follow-os switch is set to "false". No attribute at all counts as night. The same script mirrors the mode onto so stock Bootstrap components follow it too. Every screen, game boards included, follows the mode (task 2776). LAYER data-layer="welcome|home|group" on the layout root (MainLayout .page, PublicLayout .public-layout). Decided in ONE place: Services/ThemeLayer.cs ThemeLayerResolver. welcome = signed out (each look's "welcome" palette) home = signed in, not inside a group (each look's "home" palette) group = /group/{id} and /{game}/{groupId}/{groupGameId}; the look's home palette on the frame; the group's personality only on its own content area (see "GROUP PERSONALITY" below, css/personality.css) ── THE SEMANTIC TOKEN SET ─────────────────────────────────────────────────────────── The design page's names -> the names the app uses: bg ......... --bg-color bg2 (hero wash) ...... --bg2 surface .... --surface-color raise ................ --surface-hover line ....... --border-color inputLine ............ --input-line (3:1 on the card) ink ........ --text-primary ink2 ................. --text-secondary accent ..... --accent-primary onAccent ............. --text-on-accent (+ -rgb) accentSoft . --accent-soft link (accent TEXT) ... --link focus ...... --focus-ring inks.grid..domain .... --game-* (--badge-* alias these) inks.easy/med/hard/expert ..... --tier-{easy,medium,hard,expert} inks.pop/onPop ................ --pop / --on-pop (streaks, waiting badges) --link is the token for accent-coloured TEXT (links, quiet buttons, active nav items). It is NOT the accent: Marigold's accent is a fill that needs dark text (white on marigold is about 2:1), so its links and focus ring are the deep ochre instead. Mode-level tokens that are not a look's: success/warn/danger/info .. --color-{success,warning,error,info}{,-soft,-text} translucent layers ....... --glass-{bg,border,border-bright,input-bg,input-focus} overlays ................. --scrim-bg (modal/win backdrop), --modal-bg, --win-card-bg launchpad tile states .... --status-{new,live,groupwin,done,none} ranks / win / lose ....... --rank-*, --win-title-*, --lose-title-* Every game/tier/rank colour is used as TEXT somewhere (Home's game cards, ServedTierBadge, the launchpad rows), so each mode's values clear WCAG AA 4.5:1 on that mode's --bg-color AND --surface-color - checked in real Chromium by ThemeLayerModeTests.PaletteTextTokens_* and, per look, by LookContrastTests. --text-on-accent is text ON an --accent-primary fill (buttons, Play pills, the ENTER key, chat bubbles, avatars). In a look it is the design page's onAccent (white on Fernhouse's and Afterglow's day accents, a dark ink of the accent's own hue everywhere else) - the same polarity Coterie.Shared AccentInk.TextOnAccent picks. A group personality brings its own accent and ink (PersonalityPalette, css/personality.css). ThemeLayerModeTests.TextOnAccent_* checks every layer and mode against the rule. --accent-hover-bg is the hover fill of an accent button: the accent moved 0.08 HSL lightness AWAY from its ink (AccentInk.AccentHover), so hovering only ever raises the contrast. --on-error-ink is the same idea for text on a --color-error fill. ── BOARD THEMES (task 2816) ───────────────────────────────────────────────────────── The game boards are LOCKED (memory coterie-theme-direction-decision-2026-10): a board wears the player's look and the board theme they picked (ThemeCatalog: Tiles, Outline, Marks, Pressed Leaf, Seed Stamp, Lantern, Sticker; no pick = the look's default), in every layer; a group's personality stops at the board's frame. Two blocks below carry that: BOARD ROOT on every board root ([data-wf-effect]): the look's HOME ink, secondary ink, hover/raise, focus and accent as --b-ink/--b-ink2/--b-raise/--b-focus/ --b-accent/--b-on-accent (from --lh-*, never the layer), and the games' own board tokens re-pointed at the board theme: Grid --grid-line, --grid-block-line, --cell-bg, --cell-text (entries), --cell-text-locked (givens), --cell-text-error Span --island-bg, --island-text, --island-border, --bridge-line Lex --wf-cell-bg, --wf-cell-border, --wf-cell-active-border, --wf-text, --wf-key-bg Lattice --ws-cell-bg, --ws-cell-border, --ws-text, --ws-word-text BOARD THEMES GENERATED from the design page's VARIANTS[look].boards, per look x mode x theme, on the element carrying the wf-theme-* class: --b-cell, --b-rule, --b-block, --b-hit/--b-on-hit/--b-hit-edge (correct), --b-near/--b-on-near/ --b-near-edge (present), --b-miss/--b-on-miss (absent), --b-near-soft, --b-entry (Grid entries), --b-err (error digits / islands). Every pair the design page checks (letter on fill 4.5:1, correct vs present fill 3:1, edges 3:1 off the cell) holds; night correct tiles get a light rim (--b-hit-edge) so they stand off the dark ground. Change a value on the design page and regenerate; Coterie.Client.Tests BoardPaletteFidelityTests fails on drift. The structure (fills vs rings, the cues) is css/themes.css. Lex's spectral meter keeps --meter-lightness; --ink-rgb is the board foreground as r, g, b for its track. Domain ....... --domain-mark-* (the region SKINS are categorical data: see below) ── GROUP PERSONALITY (task 2817) ─────────────────────────────────────────────────── Room themes are gone. A group's personality (Coterie.Shared PersonalityPalette, the r3 rule) is painted ONLY on the group's own content area (.gx: the dashboard, a launchpad card), never on the layout root, so the top bar and navigation always keep the member's look. css/ personality.css maps the inline --gpd-* / --gpn-* properties PersonalityStyles writes onto the semantic tokens below, for the active mode. [data-layer="group"] here is the frame of a group page and reads the look exactly like [data-layer="home"]. ── SELECTOR SHAPE (specificity is load-bearing) ───────────────────────────────────── 1. THE LOOKS set only SOURCE properties (--lw-*, --lh-*, the inks) on : night: :root (default) | html[data-look="x"] (0,1,0)/(0,1,1) day: html[data-mode="day"] (default) | html[data-look="x"][data-mode="day"] Every look block sets the same property set, and the more specific look-and-mode selector always wins, so a look never leaks into another. 2. LAYER -> SEMANTIC TOKENS re-reads the sources on every layer root (:root, [data-layer], then [data-layer="home"/"group"]), all (0,1,0), so source order decides: later wins. 3. The NIGHT / DAY mode blocks (:root | html:not([data-mode="day"]) [data-layer], and the day equivalent, (0,2,1)) hold the mode-level tokens. They must never declare a token the layer block declares: they would out-rank it. A var() resolves on the element where the property is DECLARED, which is why both the layer block and the mode blocks declare on the layer root rather than only on :root: a token that reads another token (--wf-text reads --text-primary) has to be declared on the layer root to see that root's colours. A group's content area (.gx) carries data-layer="group" for the same reason: the derived tokens re-resolve there against the personality (css/personality.css). ── LITERALS THAT DELIBERATELY LIVE ELSEWHERE ─────────────────────────────────────── * Shadows: rgba(0, 0, 0, a) in box-shadow/drop-shadow. A shadow is black at some alpha in either mode; it is not a palette choice. * Domain region SKINS (Pages/DomainGame.razor.css, --domain-region-*): categorical palettes validated for colour-vision deficiency, identical in both modes (the board is its own surface; the mark is a dark glyph with a white halo on every fill). * Avatar identity colours (Components/AvatarImage.razor) and the user/peer avatar gradients: a person's colour does not change with the time of day; white initials on each fill. * index.html's boot splash: each var() carries a literal Fernhouse-night fallback for when this file fails to load. * The personality editor's colour pickers (PersonalityEditor.razor): user input defaults. Non-colour tokens (fonts, radii, shapes) are in css/looks.css; blur and layout sizes in app.css. ===================================================================================== */ /* ───────────────────────────────────────────────────────────────────────────────────── BOTH MODES - literal values that are the same by day and by night (see SELECTOR SHAPE: nothing here may read another token). ───────────────────────────────────────────────────────────────────────────────────── */ :root { /* User/peer avatar fills (identity colours) and their white initials. */ --avatar-text: #ffffff; --wf-enter-bg: linear-gradient(135deg, #3b82f6, #1d4ed8); --wf-enter-disabled-bg: linear-gradient(135deg, #6b7280, #374151); /* Domain's crown / X: a dark glyph with a white halo is legible on EVERY region fill of every skin (DomainGame.razor.css), independent of the mode. */ --domain-mark-ink: #141414; --domain-mark-ink-soft: #2a2a2a; --domain-mark-halo: #ffffff; /* Medal dots (app.css .status-*): the metals, not a palette. */ --medal-gold: #ffd700; --medal-gold-edge: #b8860b; --medal-silver: #c0c0c0; --medal-silver-edge: #808080; --medal-bronze: #cd7f32; --medal-bronze-edge: #a0522d; /* The leaderboard toggle's knob. */ --toggle-knob: #ffffff; /* The offline banner (app.css): white on burnt orange, 5.1:1, readable on either page. */ --offline-bg: #b45309; --offline-text: #ffffff; } /* ───────────────────────────────────────────────────────────────────────────────────── THE LOOKS (task 2815) - Fernhouse, Marigold, Afterglow, each by night and by day. Every literal below is copied verbatim from the VARIANTS token block of the signed-off design page docs/design/theme-directions-r3.html (welcome -> --lw-*, home -> --lh-*, inks -> --game-* / --tier-* / --pop / --on-pop). Do not hand-tune a value here: change the design page and re-copy. Coterie.Client.Tests LookPaletteFidelityTests fails on any drift, and the E2E LookFidelityTests read the design page at test time and compare the rendered colours. The two computed values per block are --look-accent-hover (AccentInk.AccentHover of the accent) and --look-on-accent-rgb (the ink as r, g, b). The six exceptions (day Domain and Easy inks, nudged to AA on the hover row) are listed with their reasons in docs/design/look-deviations.json, which both fidelity suites read. Fernhouse is also the default: :root / html[data-mode="day"] carry it when has no data-look. [data-look-preview="x"] lets an element (the Account look picker) wear a look other than the page's; it must also carry data-layer so the layer block re-reads the sources on it. ───────────────────────────────────────────────────────────────────────────────────── */ /* Fernhouse (groveA) - NIGHT */ :root, html[data-look="fernhouse"], [data-look-preview="fernhouse"] { --lw-bg: #17261A; --lw-bg2: #1C3723; --lw-surface: #213124; --lw-raise: #2C3D2F; --lw-line: #394A3C; --lw-input-line: #697F6D; --lw-ink: #EEF6EF; --lw-ink2: #A5BFA9; --lw-on-accent: #10241A; --lw-accent: #89D298; --lw-accent-soft: #27452D; --lw-link: #8CD19A; --lw-focus: #89D298; --lh-bg: #1F2821; --lh-bg2: #232F26; --lh-surface: #29332C; --lh-raise: #343F37; --lh-line: #414C44; --lh-input-line: #728075; --lh-ink: #EEF6EF; --lh-ink2: #ACBCB0; --lh-on-accent: #10241A; --lh-accent: #89D298; --lh-accent-soft: #2B4931; --lh-link: #8CD19A; --lh-focus: #89D298; --look-accent-hover: #a7ddb2; --look-on-accent-rgb: 16, 36, 26; --game-grid: #C4A4FD; --game-lex: #91B7FE; --game-lattice: #E4AB6C; --game-span: #FF968A; --game-domain: #86CA94; --tier-easy: #83CB96; --tier-medium: #DEAE69; --tier-hard: #FF958E; --tier-expert: #C9A3F5; --pop: #FABB41; --on-pop: #1F1401; } /* Fernhouse (groveA) - DAY */ html[data-mode="day"], html[data-look="fernhouse"][data-mode="day"], html[data-mode="day"] [data-look-preview="fernhouse"] { --lw-bg: #ECF7E0; --lw-bg2: #DEE9B8; --lw-surface: #FAFEF6; --lw-raise: #E1EFD3; --lw-line: #D0DEC1; --lw-input-line: #849473; --lw-ink: #1D2512; --lw-ink2: #5B684C; --lw-on-accent: #FFFFFF; --lw-accent: #267543; --lw-accent-soft: #D4EEDA; --lw-link: #237240; --lw-focus: #267543; --lh-bg: #EFF6ED; --lh-bg2: #E3EDE0; --lh-surface: #FBFEFB; --lh-raise: #E5EDE3; --lh-line: #D3DCD2; --lh-input-line: #889286; --lh-ink: #1A2518; --lh-ink2: #5D6C5A; --lh-on-accent: #FFFFFF; --lh-accent: #267543; --lh-accent-soft: #D4EEDA; --lh-link: #257341; --lh-focus: #267543; --look-accent-hover: #1c5631; --look-on-accent-rgb: 255, 255, 255; --game-grid: #794DB6; --game-lex: #3664BE; --game-lattice: #935A00; --game-span: #B6322D; --game-domain: #1C793C; --tier-easy: #12793F; --tier-medium: #8D5E05; --tier-hard: #B63132; --tier-expert: #7D4DAD; --pop: #F5AF20; --on-pop: #201301; } /* Marigold (groveB) - NIGHT */ html[data-look="marigold"], [data-look-preview="marigold"] { --lw-bg: #272416; --lw-bg2: #3F3017; --lw-surface: #322F20; --lw-raise: #3E3B2A; --lw-line: #4B4837; --lw-input-line: #807C66; --lw-ink: #F5F4EB; --lw-ink2: #BCB89F; --lw-on-accent: #241A06; --lw-accent: #F0B135; --lw-accent-soft: #533B0A; --lw-link: #F1BA55; --lw-focus: #F0B135; --lh-bg: #28271E; --lh-bg2: #2F2D21; --lh-surface: #333228; --lh-raise: #3F3D33; --lh-line: #4C4B40; --lh-input-line: #807E70; --lh-ink: #F5F4EB; --lh-ink2: #BAB8A8; --lh-on-accent: #241A06; --lh-accent: #F0B135; --lh-accent-soft: #563E0E; --lh-link: #F1BA55; --lh-focus: #F0B135; --look-accent-hover: #f3c05b; --look-on-accent-rgb: 36, 26, 6; --game-grid: #C4A4FD; --game-lex: #91B7FE; --game-lattice: #E4AB6C; --game-span: #FF968A; --game-domain: #86CA94; --tier-easy: #83CB96; --tier-medium: #DEAE69; --tier-hard: #FF958E; --tier-expert: #C9A3F5; --pop: #FC937F; --on-pop: #250E0A; } /* Marigold (groveB) - DAY */ html[data-look="marigold"][data-mode="day"], html[data-mode="day"] [data-look-preview="marigold"] { --lw-bg: #F2F5DB; --lw-bg2: #F7DFAD; --lw-surface: #FDFEF4; --lw-raise: #E9EDCC; --lw-line: #D8DCBA; --lw-input-line: #8F926F; --lw-ink: #22230F; --lw-ink2: #626447; --lw-on-accent: #241A06; --lw-accent: #EFA810; --lw-accent-soft: #FBE2BE; --lw-link: #8E5300; --lw-focus: #8E5300; --lh-bg: #F4F4E8; --lh-bg2: #EBEBDA; --lh-surface: #FDFDF9; --lh-raise: #EBEBDC; --lh-line: #DADACB; --lh-input-line: #90907E; --lh-ink: #23230F; --lh-ink2: #69694F; --lh-on-accent: #241A06; --lh-accent: #EFA810; --lh-accent-soft: #FBE2BE; --lh-link: #8E5300; --lh-focus: #8E5300; --look-accent-hover: #f2b636; --look-on-accent-rgb: 36, 26, 6; --game-grid: #794DB6; --game-lex: #3664BE; --game-lattice: #935A00; --game-span: #B6322D; --game-domain: #1C793C; --tier-easy: #12793F; --tier-medium: #8D5E05; --tier-hard: #B63132; --tier-expert: #7D4DAD; --pop: #FE8770; --on-pop: #250E0A; } /* Afterglow (duskA) - NIGHT */ html[data-look="afterglow"], [data-look-preview="afterglow"] { --lw-bg: #2C2337; --lw-bg2: #4B2A40; --lw-surface: #382D44; --lw-raise: #443951; --lw-line: #51465F; --lw-input-line: #877899; --lw-ink: #F5F2FA; --lw-ink2: #BFB0D2; --lw-on-accent: #2A1520; --lw-accent: #F7B385; --lw-accent-soft: #593C29; --lw-link: #F5B488; --lw-focus: #F7B385; --lh-bg: #302938; --lh-bg2: #362F3F; --lh-surface: #3B3444; --lh-raise: #474051; --lh-line: #554D5F; --lh-input-line: #8A7F97; --lh-ink: #F5F2FA; --lh-ink2: #BDB2CC; --lh-on-accent: #2A1520; --lh-accent: #F7B385; --lh-accent-soft: #5E422E; --lh-link: #F5B488; --lh-focus: #F7B385; --look-accent-hover: #facbab; --look-on-accent-rgb: 42, 21, 32; --game-grid: #C4A4FD; --game-lex: #91B7FE; --game-lattice: #E4AB6C; --game-span: #FF968A; --game-domain: #86CA94; --tier-easy: #83CB96; --tier-medium: #DEAE69; --tier-hard: #FF958E; --tier-expert: #C9A3F5; --pop: #DCA0D6; --on-pop: #200F1F; } /* Afterglow (duskA) - DAY */ html[data-look="afterglow"][data-mode="day"], html[data-mode="day"] [data-look-preview="afterglow"] { --lw-bg: #FAEBFE; --lw-bg2: #FED2E9; --lw-surface: #FEFCFF; --lw-raise: #F5DFFB; --lw-line: #E4CEEB; --lw-input-line: #9E88A5; --lw-ink: #291C2D; --lw-ink2: #6C5A72; --lw-on-accent: #FFFFFF; --lw-accent: #70306C; --lw-accent-soft: #F7DDF4; --lw-link: #70306C; --lw-focus: #70306C; --lh-bg: #F7F0F6; --lh-bg2: #F1E4EF; --lh-surface: #FEFCFE; --lh-raise: #EFE6EE; --lh-line: #DED5DD; --lh-input-line: #978C95; --lh-ink: #291D28; --lh-ink2: #726170; --lh-on-accent: #FFFFFF; --lh-accent: #70306C; --lh-accent-soft: #F7DDF4; --lh-link: #70306C; --lh-focus: #70306C; --look-accent-hover: #532450; --look-on-accent-rgb: 255, 255, 255; --game-grid: #794DB6; --game-lex: #3664BE; --game-lattice: #935A00; --game-span: #B6322D; --game-domain: #1B753A; --tier-easy: #12743C; --tier-medium: #8D5E05; --tier-hard: #B63132; --tier-expert: #7D4DAD; --pop: #F9A870; --on-pop: #241104; } /* ───────────────────────────────────────────────────────────────────────────────────── LAYER -> SEMANTIC TOKENS. The look blocks above only set SOURCE properties (--lw-* for the welcome layer, --lh-* for home), which inherit down from . Each layer root re-reads them here into the names every component uses, so a var() resolves on the layer root with that root's own layer. itself (and so html/body and the boot splash) is WELCOME: that is what a signed-out visitor sees first, and every signed-in screen paints its own layer over it. ───────────────────────────────────────────────────────────────────────────────────── */ :root, [data-layer] { --bg-color: var(--lw-bg); --bg2: var(--lw-bg2); --surface-color: var(--lw-surface); --surface-hover: var(--lw-raise); --border-color: var(--lw-line); --input-line: var(--lw-input-line); --text-primary: var(--lw-ink); --text-secondary: var(--lw-ink2); --accent-primary: var(--lw-accent); --text-on-accent: var(--lw-on-accent); --text-on-accent-rgb: var(--look-on-accent-rgb); --accent-hover-bg: var(--look-accent-hover); --accent-soft: var(--lw-accent-soft); --link: var(--lw-link); --focus-ring: var(--lw-focus); /* Derived chrome tints: each follows the active tokens (and so the look, the mode and, in the a group's content area, the personality), instead of the fixed blue/brown rgba literals they used to be. */ --accent-glow: color-mix(in srgb, var(--accent-primary) 35%, transparent); --focus-shadow: color-mix(in srgb, var(--focus-ring) 28%, transparent); --accent-halo: color-mix(in srgb, var(--accent-primary) 12%, transparent); --accent-halo-strong: color-mix(in srgb, var(--accent-primary) 30%, transparent); --brand-text: var(--text-primary); --nav-hover-bg: var(--surface-hover); --nav-active-bg: var(--accent-soft); --nav-badge-bg: var(--accent-soft); --nav-highlight-bg: color-mix(in srgb, var(--accent-primary) 6%, transparent); --nav-highlight-border: color-mix(in srgb, var(--accent-primary) 30%, transparent); --nav-highlight-ring: color-mix(in srgb, var(--accent-primary) 12%, transparent); /* The r3 side nav and phone top bar: the card colour leaned 35% toward the page. */ --header-glass-bg: color-mix(in srgb, var(--surface-color) 65%, var(--bg-color)); --inset-bg: color-mix(in srgb, var(--text-primary) 6%, transparent); --selected-bg: color-mix(in srgb, var(--text-primary) 5%, transparent); --tier-badge-bg: color-mix(in srgb, var(--text-primary) 4%, transparent); --chip-bg: var(--surface-hover); --chip-text: var(--text-primary); --outline-ink: var(--text-primary); --outline-ink-hover-text: var(--bg-color); --hero-ink-from: var(--text-primary); --hero-ink-to: var(--link); /* Wordmarks and display titles (boot splash, UnderConstruction) are the link ink: AA as text on the page, the card and the hero wash in every look and mode. */ --wordmark-from: var(--link); --wordmark-to: var(--link); --title-ink-from: var(--link); --title-ink-to: var(--link); --promo-gradient: linear-gradient(90deg, var(--accent-soft), var(--accent-soft)); --promo-border: transparent; --hero-glow-a: color-mix(in srgb, var(--accent-primary) 10%, transparent); --hero-glow-b: color-mix(in srgb, var(--pop) 10%, transparent); --hairline: color-mix(in srgb, var(--text-primary) 20%, transparent); --hairline-soft: color-mix(in srgb, var(--text-primary) 12%, transparent); --hairline-fill: color-mix(in srgb, var(--text-primary) 6%, transparent); --spinner-track: color-mix(in srgb, var(--accent-primary) 22%, transparent); --glass-bg: color-mix(in srgb, var(--text-primary) 3%, transparent); --glass-border: color-mix(in srgb, var(--text-primary) 12%, transparent); --glass-border-bright: color-mix(in srgb, var(--text-primary) 20%, transparent); --glass-input-bg: color-mix(in srgb, var(--text-primary) 4%, transparent); --glass-input-focus: color-mix(in srgb, var(--accent-primary) 10%, transparent); /* Bootstrap's own link colour (.btn-link) is the look's link token; plain reads --link directly (app.css). */ --bs-link-color: var(--link); --bs-link-hover-color: var(--link); } /* Signed in: the look's home palette. The frame of a group page ([data-layer="group"] on the layout root) is the look too; a group's personality is painted only on its own content area (css/personality.css, task 2817). */ [data-layer="home"], [data-layer="group"] { --bg-color: var(--lh-bg); --bg2: var(--lh-bg2); --surface-color: var(--lh-surface); --surface-hover: var(--lh-raise); --border-color: var(--lh-line); --input-line: var(--lh-input-line); --text-primary: var(--lh-ink); --text-secondary: var(--lh-ink2); --accent-primary: var(--lh-accent); --text-on-accent: var(--lh-on-accent); --text-on-accent-rgb: var(--look-on-accent-rgb); --accent-hover-bg: var(--look-accent-hover); --accent-soft: var(--lh-accent-soft); --link: var(--lh-link); --focus-ring: var(--lh-focus); } /* ───────────────────────────────────────────────────────────────────────────────────── BOARD ROOT (task 2816). Every board root (it carries data-wf-effect: Lex's .wf-board-container and its toolbar key, Grid's, Span's and Domain's .board-section, Lattice's .ws-board-container) wears the look's HOME palette for what the design page paints from the look (empty-tile and given ink, key fill, focus ring, the ENTER key): read from the look's --lh-* sources, never from the layer, so a group's personality stops at the board's frame (games are LOCKED). The board theme's own colours are the --b-* blocks below. The games' older board tokens are re-pointed at them here, so the scoped *Game.razor.css rules that read those names follow the board theme. ───────────────────────────────────────────────────────────────────────────────────── */ [data-wf-effect] { --b-ink: var(--lh-ink); --b-ink2: var(--lh-ink2); --b-raise: var(--lh-raise); --b-focus: var(--lh-focus); --b-accent: var(--lh-accent); --b-on-accent: var(--lh-on-accent); /* Lex */ --wf-cell-bg: var(--b-cell); --wf-cell-border: var(--b-rule); --wf-cell-active-border: var(--b-focus); --wf-text: var(--b-ink); --wf-key-bg: var(--b-raise); /* Grid */ --grid-line: var(--b-rule); --grid-block-line: var(--b-block); --cell-bg: var(--b-cell); --cell-text: var(--b-entry); --cell-text-locked: var(--b-ink); --cell-text-error: var(--b-err); /* Lattice */ --ws-cell-bg: var(--b-cell); --ws-cell-border: var(--b-rule); --ws-text: var(--b-ink); --ws-word-text: var(--b-ink2); /* Span */ --island-bg: var(--b-cell); --island-text: var(--b-ink); --island-border: var(--b-block); --bridge-line: var(--b-block); } /* The board's own focusable controls - the Lex keys, the only ones (Grid's number pad is outside the board root; cells, islands and letters are not focusable) - ring in the LOOK's focus colour, drawn on the board's cell colour (.wf-keyboard is opaque --b-cell), where it is 3:1 or more in every look and mode (BoardThemeTests.ABoardKeysFocusRing_*). Chrome that happens to sit inside a board root (Lex's "Return to my board", Lattice's "Try again") stands on the page, so it keeps the layer's ring. */ [data-wf-effect] .wf-keyboard { --focus-ring: var(--b-focus); } /* ───────────────────────────────────────────────────────────────────────────────────── BOARD THEMES (task 2816) - GENERATED, do not hand-edit. Each look x mode x board theme, copied verbatim from VARIANTS[look].boards in docs/design/theme-directions-r3.html. Board themes that share a value set in a look and mode share a block. Set on the board root (the element carrying the wf-theme-* class), same selector shape as THE LOOKS above. ───────────────────────────────────────────────────────────────────────────────────── */ /* Fernhouse (groveA) - NIGHT - tiles / leaf / stamp / sticker */ .wf-theme-tiles, html[data-look="fernhouse"] .wf-theme-tiles, .wf-theme-leaf, html[data-look="fernhouse"] .wf-theme-leaf, .wf-theme-stamp, html[data-look="fernhouse"] .wf-theme-stamp, .wf-theme-sticker, html[data-look="fernhouse"] .wf-theme-sticker { --b-cell: #29332C; --b-rule: #414C44; --b-block: #78847A; --b-hit: #397949; --b-on-hit: #FFFFFF; --b-hit-edge: #6FB07D; --b-near: #FFC75A; --b-on-near: #3A2B0D; --b-near-edge: #FFC75A; --b-miss: #4A504B; --b-on-miss: #D5E2D8; --b-near-soft: #4E422B; --b-entry: #83D494; --b-err: #FE958D; } /* Fernhouse (groveA) - NIGHT - outline */ .wf-theme-outline, html[data-look="fernhouse"] .wf-theme-outline { --b-cell: #29332C; --b-rule: #414C44; --b-block: #78847A; --b-hit: #7CCD8E; --b-on-hit: #7CCD8E; --b-near: #FEB16A; --b-on-near: #FEB16A; --b-miss: #343F37; --b-on-miss: #ACBCB0; --b-near-soft: #344A38; --b-entry: #83D494; --b-err: #FF978F; } /* Fernhouse (groveA) - NIGHT - marks */ .wf-theme-marks, html[data-look="fernhouse"] .wf-theme-marks { --b-cell: #29332C; --b-rule: #414C44; --b-block: #78847A; --b-hit: #EEF6EF; --b-on-hit: #29332C; --b-near: #EEF6EF; --b-on-near: #EEF6EF; --b-miss: #343F37; --b-on-miss: #ACBCB0; --b-near-soft: #344A38; --b-entry: #83D494; --b-err: #FF978F; } /* Fernhouse (groveA) - NIGHT - lantern */ .wf-theme-lantern, html[data-look="fernhouse"] .wf-theme-lantern { --b-cell: #29332C; --b-rule: #414C44; --b-block: #78847A; --b-hit: #115629; --b-on-hit: #F9DAA1; --b-hit-edge: #6FB07D; --b-near: #FFC75A; --b-on-near: #3A2B0D; --b-near-edge: #FFC75A; --b-miss: #4A504B; --b-on-miss: #D5E2D8; --b-near-soft: #4E422B; --b-entry: #83D494; --b-err: #FE958D; } /* Fernhouse (groveA) - DAY - tiles / leaf / stamp / sticker */ html[data-mode="day"] .wf-theme-tiles, html[data-look="fernhouse"][data-mode="day"] .wf-theme-tiles, html[data-mode="day"] .wf-theme-leaf, html[data-look="fernhouse"][data-mode="day"] .wf-theme-leaf, html[data-mode="day"] .wf-theme-stamp, html[data-look="fernhouse"][data-mode="day"] .wf-theme-stamp, html[data-mode="day"] .wf-theme-sticker, html[data-look="fernhouse"][data-mode="day"] .wf-theme-sticker { --b-cell: #FBFEFB; --b-rule: #D3DCD2; --b-block: #7A8378; --b-hit: #337344; --b-on-hit: #FFFFFF; --b-hit-edge: #337344; --b-near: #FBC044; --b-on-near: #3A2B0D; --b-near-edge: #BB8800; --b-miss: #C1C6C0; --b-on-miss: #353D33; --b-near-soft: #F7E6C7; --b-entry: #1A763F; --b-err: #B02A2D; } /* Fernhouse (groveA) - DAY - outline */ html[data-mode="day"] .wf-theme-outline, html[data-look="fernhouse"][data-mode="day"] .wf-theme-outline { --b-cell: #FBFEFB; --b-rule: #D3DCD2; --b-block: #7A8378; --b-hit: #21763C; --b-on-hit: #21763C; --b-near: #9B5804; --b-on-near: #9B5804; --b-miss: #E5EDE3; --b-on-miss: #5D6C5A; --b-near-soft: #D3F1D9; --b-entry: #1A763F; --b-err: #B02A2D; } /* Fernhouse (groveA) - DAY - marks */ html[data-mode="day"] .wf-theme-marks, html[data-look="fernhouse"][data-mode="day"] .wf-theme-marks { --b-cell: #FBFEFB; --b-rule: #D3DCD2; --b-block: #7A8378; --b-hit: #1A2518; --b-on-hit: #FBFEFB; --b-near: #1A2518; --b-on-near: #1A2518; --b-miss: #E5EDE3; --b-on-miss: #5D6C5A; --b-near-soft: #D3F1D9; --b-entry: #1A763F; --b-err: #B02A2D; } /* Fernhouse (groveA) - DAY - lantern */ html[data-mode="day"] .wf-theme-lantern, html[data-look="fernhouse"][data-mode="day"] .wf-theme-lantern { --b-cell: #FBFEFB; --b-rule: #D3DCD2; --b-block: #7A8378; --b-hit: #115629; --b-on-hit: #F9DAA1; --b-hit-edge: #115629; --b-near: #FBC044; --b-on-near: #3A2B0D; --b-near-edge: #BB8800; --b-miss: #C1C6C0; --b-on-miss: #353D33; --b-near-soft: #F7E6C7; --b-entry: #1A763F; --b-err: #B02A2D; } /* Marigold (groveB) - NIGHT - tiles / leaf / stamp / sticker */ html[data-look="marigold"] .wf-theme-tiles, html[data-look="marigold"] .wf-theme-leaf, html[data-look="marigold"] .wf-theme-stamp, html[data-look="marigold"] .wf-theme-sticker { --b-cell: #333228; --b-rule: #4C4B40; --b-block: #838173; --b-hit: #7E5690; --b-on-hit: #FFFFFF; --b-hit-edge: #B68BC9; --b-near: #FACA4B; --b-on-near: #382C0C; --b-near-edge: #FACA4B; --b-miss: #515049; --b-on-miss: #E1DFD0; --b-near-soft: #4E442C; --b-entry: #E6B55D; --b-err: #FF978F; } /* Marigold (groveB) - NIGHT - outline */ html[data-look="marigold"] .wf-theme-outline { --b-cell: #333228; --b-rule: #4C4B40; --b-block: #838173; --b-hit: #D4A0EC; --b-on-hit: #D4A0EC; --b-near: #FFB06E; --b-on-near: #FFB06E; --b-miss: #3F3D33; --b-on-miss: #BAB8A8; --b-near-soft: #50432C; --b-entry: #E6B55D; --b-err: #FF978F; } /* Marigold (groveB) - NIGHT - marks */ html[data-look="marigold"] .wf-theme-marks { --b-cell: #333228; --b-rule: #4C4B40; --b-block: #838173; --b-hit: #F5F4EB; --b-on-hit: #333228; --b-near: #F5F4EB; --b-on-near: #F5F4EB; --b-miss: #3F3D33; --b-on-miss: #BAB8A8; --b-near-soft: #50432C; --b-entry: #E6B55D; --b-err: #FF978F; } /* Marigold (groveB) - NIGHT - lantern */ html[data-look="marigold"] .wf-theme-lantern { --b-cell: #333228; --b-rule: #4C4B40; --b-block: #838173; --b-hit: #5C356C; --b-on-hit: #F4DCA1; --b-hit-edge: #B68BC9; --b-near: #FACA4B; --b-on-near: #382C0C; --b-near-edge: #FACA4B; --b-miss: #515049; --b-on-miss: #E1DFD0; --b-near-soft: #4E442C; --b-entry: #E6B55D; --b-err: #FF978F; } /* Marigold (groveB) - DAY - tiles / leaf / stamp / sticker */ html[data-look="marigold"][data-mode="day"] .wf-theme-tiles, html[data-look="marigold"][data-mode="day"] .wf-theme-leaf, html[data-look="marigold"][data-mode="day"] .wf-theme-stamp, html[data-look="marigold"][data-mode="day"] .wf-theme-sticker { --b-cell: #FDFDF9; --b-rule: #DADACB; --b-block: #818174; --b-hit: #79508A; --b-on-hit: #FFFFFF; --b-hit-edge: #79508A; --b-near: #F3C443; --b-on-near: #382C0C; --b-near-edge: #B38B00; --b-miss: #C4C5BD; --b-on-miss: #3B3B2F; --b-near-soft: #F4E7C6; --b-entry: #835A01; --b-err: #B02A2D; } /* Marigold (groveB) - DAY - outline */ html[data-look="marigold"][data-mode="day"] .wf-theme-outline { --b-cell: #FDFDF9; --b-rule: #DADACB; --b-block: #818174; --b-hit: #7D4B92; --b-on-hit: #7D4B92; --b-near: #9C5602; --b-on-near: #9C5602; --b-miss: #EBEBDC; --b-on-miss: #69694F; --b-near-soft: #F9E5C7; --b-entry: #835A01; --b-err: #B02A2D; } /* Marigold (groveB) - DAY - marks */ html[data-look="marigold"][data-mode="day"] .wf-theme-marks { --b-cell: #FDFDF9; --b-rule: #DADACB; --b-block: #818174; --b-hit: #23230F; --b-on-hit: #FDFDF9; --b-near: #23230F; --b-on-near: #23230F; --b-miss: #EBEBDC; --b-on-miss: #69694F; --b-near-soft: #F9E5C7; --b-entry: #835A01; --b-err: #B02A2D; } /* Marigold (groveB) - DAY - lantern */ html[data-look="marigold"][data-mode="day"] .wf-theme-lantern { --b-cell: #FDFDF9; --b-rule: #DADACB; --b-block: #818174; --b-hit: #5C356C; --b-on-hit: #F4DCA1; --b-hit-edge: #5C356C; --b-near: #F3C443; --b-on-near: #382C0C; --b-near-edge: #B38B00; --b-miss: #C4C5BD; --b-on-miss: #3B3B2F; --b-near-soft: #F4E7C6; --b-entry: #835A01; --b-err: #B02A2D; } /* Afterglow (duskA) - NIGHT - tiles / leaf / stamp / sticker */ html[data-look="afterglow"] .wf-theme-tiles, html[data-look="afterglow"] .wf-theme-leaf, html[data-look="afterglow"] .wf-theme-stamp, html[data-look="afterglow"] .wf-theme-sticker { --b-cell: #3B3444; --b-rule: #554D5F; --b-block: #88828F; --b-hit: #695BA9; --b-on-hit: #FFFFFF; --b-hit-edge: #9E91E4; --b-near: #FFC29A; --b-on-near: #412714; --b-near-edge: #FFC29A; --b-miss: #58555C; --b-on-miss: #E1DBE9; --b-near-soft: #5D4637; --b-entry: #FBAA71; --b-err: #FEA69E; } /* Afterglow (duskA) - NIGHT - outline */ html[data-look="afterglow"] .wf-theme-outline { --b-cell: #3B3444; --b-rule: #554D5F; --b-block: #88828F; --b-hit: #DC9BEB; --b-on-hit: #DC9BEB; --b-near: #FFAE81; --b-on-near: #FFAE81; --b-miss: #474051; --b-on-miss: #BDB2CC; --b-near-soft: #5D4637; --b-entry: #FBAA71; --b-err: #FEA69E; } /* Afterglow (duskA) - NIGHT - marks */ html[data-look="afterglow"] .wf-theme-marks { --b-cell: #3B3444; --b-rule: #554D5F; --b-block: #88828F; --b-hit: #F5F2FA; --b-on-hit: #3B3444; --b-near: #F5F2FA; --b-on-near: #F5F2FA; --b-miss: #474051; --b-on-miss: #BDB2CC; --b-near-soft: #5D4637; --b-entry: #FBAA71; --b-err: #FEA69E; } /* Afterglow (duskA) - NIGHT - lantern */ html[data-look="afterglow"] .wf-theme-lantern { --b-cell: #3B3444; --b-rule: #554D5F; --b-block: #88828F; --b-hit: #493883; --b-on-hit: #FED4B9; --b-hit-edge: #9E91E4; --b-near: #FFC29A; --b-on-near: #412714; --b-near-edge: #FFC29A; --b-miss: #58555C; --b-on-miss: #E1DBE9; --b-near-soft: #5D4637; --b-entry: #FBAA71; --b-err: #FEA69E; } /* Afterglow (duskA) - DAY - tiles / leaf / stamp / sticker */ html[data-look="afterglow"][data-mode="day"] .wf-theme-tiles, html[data-look="afterglow"][data-mode="day"] .wf-theme-leaf, html[data-look="afterglow"][data-mode="day"] .wf-theme-stamp, html[data-look="afterglow"][data-mode="day"] .wf-theme-sticker { --b-cell: #FEFCFE; --b-rule: #DED5DD; --b-block: #877C86; --b-hit: #6355A2; --b-on-hit: #FFFFFF; --b-hit-edge: #6355A2; --b-near: #FFB98A; --b-on-near: #412714; --b-near-edge: #C7804E; --b-miss: #C8C2C7; --b-on-miss: #413740; --b-near-soft: #FFE1CF; --b-entry: #884783; --b-err: #B02A2D; } /* Afterglow (duskA) - DAY - outline */ html[data-look="afterglow"][data-mode="day"] .wf-theme-outline { --b-cell: #FEFCFE; --b-rule: #DED5DD; --b-block: #877C86; --b-hit: #834791; --b-on-hit: #834791; --b-near: #9F521F; --b-on-near: #9F521F; --b-miss: #EFE6EE; --b-on-miss: #726170; --b-near-soft: #FADEF6; --b-entry: #884783; --b-err: #B02A2D; } /* Afterglow (duskA) - DAY - marks */ html[data-look="afterglow"][data-mode="day"] .wf-theme-marks { --b-cell: #FEFCFE; --b-rule: #DED5DD; --b-block: #877C86; --b-hit: #291D28; --b-on-hit: #FEFCFE; --b-near: #291D28; --b-on-near: #291D28; --b-miss: #EFE6EE; --b-on-miss: #726170; --b-near-soft: #FADEF6; --b-entry: #884783; --b-err: #B02A2D; } /* Afterglow (duskA) - DAY - lantern */ html[data-look="afterglow"][data-mode="day"] .wf-theme-lantern { --b-cell: #FEFCFE; --b-rule: #DED5DD; --b-block: #877C86; --b-hit: #493883; --b-on-hit: #FED4B9; --b-hit-edge: #493883; --b-near: #FFB98A; --b-on-near: #412714; --b-near-edge: #C7804E; --b-miss: #C8C2C7; --b-on-miss: #413740; --b-near-soft: #FFE1CF; --b-entry: #884783; --b-err: #B02A2D; } /* ───────────────────────────────────────────────────────────────────────────────────── NIGHT - the mode-level tokens that are NOT a look's: status/feedback colours, scrims, win/lose titles, launchpad states, ranks and every game-board token (boards are theme build stage 2; their values are unchanged by task 2815). The chrome colours (page, card, ink, accent, link, focus, game and tier inks) come from the LOOK blocks above. ───────────────────────────────────────────────────────────────────────────────────── */ :root, html:not([data-mode="day"]) [data-layer] { color-scheme: dark; --theme-mode: night; --on-accent-chip-bg: rgba(255, 255, 255, 0.3); /* Text on a --color-error fill (badges, the error bar): white on #ef4444 is 3.76:1. */ --on-error-ink: #0e0e16; --color-error-border: rgba(239, 68, 68, 0.3); /* .btn-close-themed: Bootstrap's dark X, inverted only where the palette is dark. */ --close-icon-filter: invert(1) grayscale(100%) brightness(200%); /* Modal cards: night keeps the old translucent glass over the dark scrim; by day the card must be opaque or dark text sits on the scrim. */ --modal-bg: var(--glass-bg); --scrim-bg: rgba(0, 0, 0, 0.7); --scrim-soft-bg: rgba(0, 0, 0, 0.5); --waking-scrim-bg: rgba(0, 0, 0, 0.85); --drawer-scrim-bg: rgba(2, 6, 23, 0.6); /* The win card had no background of its own at night (text straight on the scrim). */ --win-card-bg: transparent; --color-success: #22c55e; --color-success-soft: rgba(34, 197, 94, 0.12); --color-success-text: #86efac; --color-error: #ef4444; --color-error-soft: rgba(239, 68, 68, 0.10); --color-error-text: #fca5a5; --color-info: #3b82f6; --color-info-soft: rgba(59, 130, 246, 0.12); --color-info-text: #93c5fd; --color-warning: #f59e0b; --color-warning-soft: rgba(245, 158, 11, 0.12); --color-warning-text: #fcd34d; --color-warning-border: rgba(255, 193, 7, 0.45); --color-warning-tint: rgba(255, 193, 7, 0.12); --warning-icon: #ffc107; --win-title-color: #fbbf24; --win-title-gradient: linear-gradient(to right, #fbbf24, #f59e0b); --lose-title-color: #ef4444; --lose-title-gradient: linear-gradient(to right, #ef4444, #fca5a5); /* --game-* and --tier-* are the look's inks (LOOK blocks above). */ --status-new: var(--game-lex); --status-live: var(--game-grid); --status-groupwin: var(--game-lattice); /* "Done" is dimmed on purpose: the look's secondary ink, AA on every look's page, card and hover row (task 2815; the old #8a96a8 was 3.3:1 on Afterglow's night hover row). */ --status-done: var(--text-secondary); --status-none: #475569; --badge-lex: var(--game-lex); --badge-grid: var(--game-grid); --badge-span: var(--game-span); --badge-lattice: var(--game-lattice); --badge-default: #fbbf24; /* Task 2815: lifted (same hues) to 4.6:1 on every look's night page, card and hover row, and on each rank's own chip tint over them - the looks' night grounds are lighter than the old near-black, so the old values fell to 2.7-3.6:1 on Afterglow's hover row. */ --rank-gold: #facb7c; --rank-silver: #c9cdd3; --rank-bronze: #fab05a; --rank-positive: #13df9b; --rank-neutral: #f8bd59; --rank-negative: #fba6a6; --rank-gold-bg: rgba(255, 215, 0, 0.15); --rank-silver-bg: rgba(192, 192, 192, 0.15); --rank-bronze-bg: rgba(205, 127, 50, 0.12); --rank-positive-bg: rgba(16, 185, 129, 0.15); --rank-neutral-bg: rgba(245, 158, 11, 0.15); --rank-negative-bg: rgba(239, 68, 68, 0.15); --promo-tint: rgba(168, 85, 247, 0.1); /* The few hues still drawn outside the board themes (task 2816 retired the rest with the correctness themes): orange (group dashboard warnings), red (Lex's failed-peer mark, Domain's conflict shake), amber (Span's candidate neighbour), gold (the win card and gold medal). */ --ink-rgb: 255, 255, 255; --hue-orange: #fb923c; --hue-orange-rgb: 251, 146, 60; --hue-red: #ef4444; --hue-red-rgb: 239, 68, 68; --hue-amber: #fbbf24; --hue-amber-rgb: 251, 191, 36; --hue-gold: #ffd700; --hue-gold-rgb: 255, 215, 0; /* Grid's erase key (number-pad chrome, outside the board): the error ink on the error-soft key, which sits on the LOOK's card (task 2815). The board's own error digit is the board theme's --b-err (task 2816). */ --erase-key-ink: #f6a4a4; /* Lex chrome around the board (the board's own colours are the board theme's). */ --wf-key-border: #1a1a1a; --meter-lightness: 60%; } /* ───────────────────────────────────────────────────────────────────────────────────── DAY - the mode-level tokens that are not a look's (see NIGHT above). The day boards (task 2776) are measured per game by tests/Coterie.E2E.Tests/GameBoardModeContrastTests.cs. ───────────────────────────────────────────────────────────────────────────────────── */ html[data-mode="day"], html[data-mode="day"] [data-layer] { color-scheme: light; --theme-mode: day; --on-accent-chip-bg: rgba(0, 0, 0, 0.28); --on-error-ink: #ffffff; --color-error-border: rgba(179, 38, 30, 0.35); --close-icon-filter: none; --modal-bg: var(--surface-color); --scrim-bg: rgba(43, 36, 32, 0.55); --scrim-soft-bg: rgba(43, 36, 32, 0.35); --waking-scrim-bg: rgba(43, 36, 32, 0.7); --drawer-scrim-bg: rgba(43, 36, 32, 0.4); --win-card-bg: var(--surface-color); --color-success: #2e7d4f; --color-success-soft: rgba(46, 125, 79, 0.12); --color-success-text: #24663f; --color-error: #b3261e; --color-error-soft: rgba(179, 38, 30, 0.10); --color-error-text: #9f2019; --color-info: #2f62a3; --color-info-soft: rgba(47, 98, 163, 0.10); --color-info-text: #2a5791; --color-warning: #a5620c; --color-warning-soft: rgba(165, 98, 12, 0.12); --color-warning-text: #8a5209; --color-warning-border: rgba(165, 98, 12, 0.4); --color-warning-tint: rgba(165, 98, 12, 0.1); --warning-icon: #a5620c; /* Both stops of each title gradient clear 4.5:1 on the day surface (task 2776: the old light ends #b07a10 / #d9534a were 3.6 / 3.7:1 on the win card). */ /* #8a5d00 (was #8f6000): 4.6:1 on every look's day surfaces (task 2815). */ --win-title-color: #8a5d00; --win-title-gradient: linear-gradient(to right, #8a5d00, #6f4a00); --lose-title-color: #b3261e; --lose-title-gradient: linear-gradient(to right, #b3261e, #8c1d17); /* --game-* and --tier-* are the look's inks (LOOK blocks above). */ --status-new: var(--game-lex); --status-live: var(--game-grid); --status-groupwin: var(--game-lattice); --status-done: var(--text-secondary); --status-none: #7b8190; --badge-lex: var(--game-lex); --badge-grid: var(--game-grid); --badge-span: var(--game-span); --badge-lattice: var(--game-lattice); --badge-default: #8a5a00; /* Deep enough to read on their OWN chip tint (the --rank-*-bg below) over the hover surface: the leaderboard's difficulty chips and assist marks were 3.7-4.3:1 (task 2774 review). */ --rank-gold: #7a5000; --rank-silver: #4f5560; --rank-bronze: #80400a; --rank-positive: #0b6143; --rank-neutral: #6e4700; --rank-negative: #a12626; --rank-gold-bg: rgba(184, 134, 11, 0.14); --rank-silver-bg: rgba(95, 102, 114, 0.12); --rank-bronze-bg: rgba(154, 74, 11, 0.12); --rank-positive-bg: rgba(15, 122, 85, 0.12); --rank-neutral-bg: rgba(138, 90, 0, 0.12); --rank-negative-bg: rgba(197, 48, 48, 0.12); --promo-tint: rgba(126, 63, 209, 0.08); /* The hues still drawn outside the board themes (see NIGHT): deep inks by day. */ --ink-rgb: 43, 36, 32; --hue-orange: #9a3412; --hue-orange-rgb: 253, 186, 116; --hue-red: #b91c1c; --hue-red-rgb: 252, 165, 165; --hue-amber: #92400e; --hue-amber-rgb: 252, 211, 77; --hue-gold: #8f6000; --hue-gold-rgb: 184, 134, 11; /* Grid's erase key (see NIGHT). */ --erase-key-ink: #b3261e; /* Lex chrome around the board (the board's own colours are the board theme's). */ --wf-key-border: var(--surface-color); --meter-lightness: 38%; }