/* ----------------------------------------------------------------------------- * Project: Kirby Castle * Owner: Joshua H. Kirby * Copyright: Copyright (c) 2026 Joshua H. Kirby. All rights reserved. * Last Modified: 2026-07-10 * --------------------------------------------------------------------------- */ :root { --gold: #d6a949; --gold-light: #f3d27a; --gold-dark: #8c6420; /* Peak color for the pending-label shine (see pending_label.css) -- lighter than --gold-light itself, so the flash/glide reads as a distinct highlight rather than just re-painting the same color. */ --gold-shine: #fff3c8; --glass: rgba(8, 13, 18, 0.72); --glass-soft: rgba(15, 20, 26, 0.58); --text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75); /* Shared by any live-validated field (register, and later /throne — see plans/ACCESS_DISTRIBUTION.md §7, both forms use the same red/green rule). */ --valid: #6fbf73; --invalid: #d9645c; /* Primary/secondary, formalized per plans/ACCESS_DISTRIBUTION.md §13.3 so a future settings page can let the user recustomize either without every component needing rework. Primary defaults to the existing gold family (left untouched at its own --gold-* names for this pass, to avoid a codebase-wide rename); secondary defaults to red. */ --primary: var(--gold); --primary-light: var(--gold-light); --primary-dark: var(--gold-dark); --secondary: #c0392b; --secondary-light: #e0574a; --secondary-dark: #7a2018; /* Tertiary: a third accent distinct from primary (gold) and secondary (red), for actions that need to stand out from both without reading as "destructive" -- first used on the Logout confirmation button, an experimental starting point the user asked to just try and iterate on live rather than one that was pre-specified. A cool blue reads as calm/neutral against the app's gold+red palette. */ --tertiary: #3a6ea5; --tertiary-light: #5b90c7; --tertiary-dark: #274a70; /* ── BACKGROUND THEME (Day/Night) ────────────────────────────────── Internal-page-only (library.html/access_distribution.html) surface tokens -- the castle-background pages (outside.html/register.html) never read these, so they stay night-locked regardless of a user's saved background_theme. Night's values below are exactly the literals every internal-page stylesheet already hardcoded before this pass (see the [data-theme="day"] override further down for the Day-mode counterparts) -- introducing these tokens changes no rendered color by itself, only what future edits point at. Semantic tiers, darkest to lightest surface: --bg-page page/body base --bg-panel solid raised panel (popups, dropdown menus, toast) --bg-surface translucent control surface (inputs, buttons, chips, the toolbar/column-picker family) --bg-surface-strong / --bg-surface-soft alpha variants of --bg-surface for specific one-off components that need a slightly stronger/weaker wash --bg-gradient-top / --bg-gradient-bottom the two stops of the "elevated card" gradient (library rows/cards, invite cards, etc.) --bg-backdrop-dim modal/popup scrim -- deliberately NOT swapped by Day mode (see the override block below): a translucent black scrim reads correctly dimming content behind it regardless of the page's own theme, same as most UI conventions. --scrollbar-track scrollbar track/thumb-border color */ --bg-page: #060a0f; --bg-panel: #0b1015; --bg-surface: rgba(10, 15, 18, 0.9); --bg-surface-strong: rgba(10, 15, 18, 0.92); --bg-surface-soft: rgba(10, 15, 18, 0.6); --bg-gradient-top: rgba(10, 15, 18, 0.9); --bg-gradient-bottom: rgba(5, 8, 11, 0.88); --bg-backdrop-dim: rgba(2, 3, 5, 0.7); --scrollbar-track: #0a0d11; /* Body text base color -- internal-page-only (library.css/ access_distribution.css's own `body { color: ... }`; every castle-background page keeps its existing text colors untouched). Night defaults to var(--gold-light) itself -- these two pages already render body text in gold-light today, so aliasing rather than a flat literal here preserves that look exactly AND keeps body text Theme-Color-driven, same as every other gold-light accent in the app. Day overrides this to a fixed dark neutral below instead of also aliasing --gold-light: an arbitrary user-picked accent color sitting directly on a near-white Day background can't be trusted to stay readable, so Day intentionally trades "body text follows Theme Color" for "body text stays legible" -- accents/labels/headings elsewhere still read var(--gold-light) directly and so still follow Theme Color in both themes; only this one base-text tier is exempted. */ --text-primary: var(--gold-light); } /* ::selection's own colors (Night default + Day override) live directly in base.css, NOT as --selection-bg/--selection-text tokens here -- deliberately, after an earlier version of exactly that tripped over two different kinds of override at once. A token declared once at :root as `var(--gold-light)` gets ITS OWN computed value resolved (and frozen) against :root's default --gold-light right there; a user's live Theme Color is an inline --gold/--gold-light override on (theme_color_picker.js) one level further down, which a :root-frozen alias never sees (same root cause as --primary -- see command_bar.css's .command-bar-icon and toolbar.css's checkbox for the identical note). Stacking Day's own body[data-theme="day"] override on TOP of that already-frozen alias compounds the problem a second way (see base.css's own comment). var(--gold)/var(--gold-light)/var(--gold-dark) used directly at the selector that actually needs them -- with Day handled by a plain body[data-theme="day"] ::selection override, the same selector-based pattern this file's own Day block already uses for every *other* token -- sidesteps both issues at once. */ /* Day mode -- internal pages only. Applied via data-theme="day" on (see library.html/access_distribution.html), set server-side from the signed-in user's saved background_theme (no flash of the wrong theme on load) and live by navbar.js/access_distribution.js's Day/Night toggle. Warm off-whites rather than pure #fff, so the gold accent (--gold/--gold-light, themeable separately -- see Theme Color) still reads as a deliberate warm palette instead of clashing with a stark white. */ body[data-theme="day"] { --bg-page: #f4efe4; --bg-panel: #fffdf8; --bg-surface: rgba(255, 255, 255, 0.9); --bg-surface-strong: rgba(255, 255, 255, 0.94); --bg-surface-soft: rgba(255, 255, 255, 0.65); --bg-gradient-top: rgba(255, 255, 255, 0.92); --bg-gradient-bottom: rgba(238, 231, 214, 0.9); --scrollbar-track: #e7e0cf; --text-primary: #1a1204; }