/* ============================================================================ rv-theme.css — Rogue Vikings shared color token system ---------------------------------------------------------------------------- One palette for every RV surface: RV-HUB launcher, RV-LIVE, marketing web. RULES: solid colors only — no gradients, ever. The app background is always pure black (#000000). Elevation is expressed with solid neutral surface steps + crisp 1px solid borders, never shadows-as-color. Accent themes: set data-rv-theme="red|green|purple|blue" on . Only the accent ramp changes per theme; black base, neutrals, text and semantic colors are identical everywhere. ============================================================================ */ :root { /* ----- Base ------------------------------------------------------------ */ --rv-bg: #000000; /* the one true background, all themes */ /* ----- Neutral surface ramp (solid elevation steps on black) ----------- */ --rv-surface-1: #17171e; /* chrome: top bar, left menu, wells */ --rv-surface-2: #24242e; /* cards, posts, panels — a clear dark grey that pops on pure black */ --rv-surface-3: #30303c; /* nested cards, inputs on cards, hover */ --rv-elev: #3a3a47; /* topmost solids: popovers, menus, toasts */ /* ----- Borders (crisp 1px, do the work shadows would) ------------------ */ --rv-hairline: #1a1a1f; /* subtle in-card separators */ --rv-border-1: #26262c; /* default card/panel edge */ --rv-border-2: #3a3a42; /* emphasized edge: hover, active, popovers */ /* ----- Text ------------------------------------------------------------ */ --rv-text-strong: #f4f4f6; /* headings, primary values */ --rv-text: #cfcfd6; /* body copy */ --rv-text-dim: #9a9aa4; /* secondary, meta, labels */ --rv-text-faint: #5c5c66; /* placeholders, disabled, timestamps */ --rv-text-on-accent:#ffffff; /* text/icons sitting on --rv-accent */ /* ----- Accent ramp (default: RV Red) ------------------------------------ press < accent < hover < contrast. -weak is a SOLID dark-tinted chip background (not translucent), -line is its matching solid border. */ --rv-accent: #dd2a32; /* RV red, tuned down from the pure logo red so it's easy on the eyes as text on black */ --rv-accent-hover: #f23a42; --rv-accent-press: #b01f26; --rv-accent-weak: #2a0809; /* solid chip/badge/selected-row bg */ --rv-accent-line: #6e161a; /* solid chip border / active outlines */ --rv-accent-contrast: #ff6167; /* accent-colored text/icons on black */ /* ----- Semantic (theme-stable — identical under every accent) ---------- */ --rv-success: #34b567; --rv-success-weak: #0c2114; --rv-warning: #e8a51c; --rv-warning-weak: #241a07; --rv-danger: #e5484d; --rv-danger-weak: #2a0e10; --rv-info: #4c9df0; --rv-info-weak: #0d1b2c; /* ----- Utility ---------------------------------------------------------- */ --rv-focus: var(--rv-accent-contrast); /* follows the theme */ --rv-radius: 10px; --rv-radius-sm: 6px; } /* ============================================================================ ACCENT THEMES — override ONLY the accent ramp (+ text-on-accent where the accent is bright enough to demand dark text). Everything else is inherited. ============================================================================ */ /* Each theme's accent is hue-faithful to the matching Rogue Vikings logo set. Red-White (default) · Red-Gold · Green-White · Purple-White · Blue-White. */ /* Red — Red-White logo. Accent tuned down from the pure logo red (#fa0113) so red text reads comfortably on black (the logo images keep the vivid red). White text on the accent. */ :root[data-rv-theme="red"] { --rv-accent: #dd2a32; --rv-accent-hover: #f23a42; --rv-accent-press: #b01f26; --rv-accent-weak: #2a0809; --rv-accent-line: #6e161a; --rv-accent-contrast: #ff6167; --rv-text-on-accent: #ffffff; } /* Gold — Red-Gold logo (accent #e3b72c); luminous → near-black text */ :root[data-rv-theme="gold"] { --rv-accent: #e3b72c; --rv-accent-hover: #f2c94a; --rv-accent-press: #bf9a1f; --rv-accent-weak: #221b06; --rv-accent-line: #6e5717; --rv-accent-contrast: #f0c948; --rv-text-on-accent: #12100a; } /* Green — Green-White logo (accent #95e919); luminous → near-black text */ :root[data-rv-theme="green"] { --rv-accent: #95e919; --rv-accent-hover: #a8f23c; --rv-accent-press: #79c112; --rv-accent-weak: #101f04; --rv-accent-line: #3d6910; --rv-accent-contrast: #a3ef2f; --rv-text-on-accent: #0c1206; } /* Purple — Purple-White logo (accent #8225e9), white text */ :root[data-rv-theme="purple"] { --rv-accent: #8225e9; --rv-accent-hover: #9743f0; --rv-accent-press: #6a19c4; --rv-accent-weak: #180a2c; --rv-accent-line: #431a7d; --rv-accent-contrast: #a982ff; --rv-text-on-accent: #ffffff; } /* Blue — Blue-White logo (accent #076bfc), white text */ :root[data-rv-theme="blue"] { --rv-accent: #076bfc; --rv-accent-hover: #3585ff; --rv-accent-press: #0556cc; --rv-accent-weak: #06152e; --rv-accent-line: #124a91; --rv-accent-contrast: #5e9bff; --rv-text-on-accent: #ffffff; } /* ============================================================================ CLASSIC — the original 2025 "gold on warm brown" RV look, restored verbatim from the pre-overhaul palette (git aaeea12^). UNLIKE the accent-only themes above, Classic overrides the FULL surface + border + text ramp (warm browns + cream + gold) so nostalgic users can bring back the old identity exactly. Values are the literal old --bg/--bg2/--bg3/--bg4, --line/--line2, --ink/ --dim/--mute, --gold, and the epic warm card browns. ============================================================================ */ :root[data-rv-theme="classic"] { /* warm surface ramp (old --bg / --bg2 / --bg3 / --bg4) */ --rv-bg: #0d0b0a; --rv-surface-1: #15110d; --rv-surface-2: #1c1610; --rv-surface-3: #241d14; --rv-elev: #2a2117; /* gold-tinted hairlines (old --line-soft / --line / --line2) */ --rv-hairline: rgba(230,192,104,.10); --rv-border-1: rgba(230,192,104,.16); --rv-border-2: rgba(230,192,104,.30); /* warm cream text (old --cream / --ink / --dim / --mute) */ --rv-text-strong: #efe7d4; --rv-text: #e9e0cd; --rv-text-dim: #9c9384; --rv-text-faint: #7a7161; --rv-text-on-accent:#1a1410; /* gold accent (old --gold / --gold-dim) */ --rv-accent: #e6c068; --rv-accent-hover: #f0d089; --rv-accent-press: #c8962f; --rv-accent-weak: #201806; --rv-accent-line: #6e5717; --rv-accent-contrast: #e6c068; --rv-focus: #e6c068; } /* Accent as raw "r,g,b" so surfaces that need a themed glow/tint can do rgba(var(--rv-accent-rgb), .NN) and still follow the theme. */ :root, :root[data-rv-theme="red"] { --rv-accent-rgb: 221,42,50; } :root[data-rv-theme="gold"] { --rv-accent-rgb: 227,183,44; } :root[data-rv-theme="green"] { --rv-accent-rgb: 149,233,25; } :root[data-rv-theme="purple"] { --rv-accent-rgb: 130,37,233; } :root[data-rv-theme="blue"] { --rv-accent-rgb: 7,107,252; } :root[data-rv-theme="classic"]{ --rv-accent-rgb: 230,192,104; } /* ============================================================================ HELPERS — built strictly from tokens. Solid backgrounds + 1px borders only. ============================================================================ */ /* Card: the standard raised surface on black */ .rv-card { background: var(--rv-surface-2); border: 1px solid var(--rv-border-1); border-radius: var(--rv-radius); color: var(--rv-text); } /* Card level 2: nested inside .rv-card, or a stronger standalone panel */ .rv-card-2 { background: var(--rv-surface-3); border: 1px solid var(--rv-border-2); border-radius: var(--rv-radius); color: var(--rv-text); } /* Chip / badge / tag: solid tinted well + matching line + accent text */ .rv-chip { display: inline-flex; align-items: center; gap: 0.4em; background: var(--rv-accent-weak); border: 1px solid var(--rv-accent-line); border-radius: var(--rv-radius-sm); color: var(--rv-accent-contrast); padding: 0.25em 0.7em; font-weight: 600; } /* Primary button */ .rv-btn { background: var(--rv-accent); color: var(--rv-text-on-accent); border: 1px solid var(--rv-accent); border-radius: var(--rv-radius-sm); padding: 0.55em 1.1em; font-weight: 600; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; } .rv-btn:hover { background: var(--rv-accent-hover); border-color: var(--rv-accent-hover); } .rv-btn:active { background: var(--rv-accent-press); border-color: var(--rv-accent-press); } /* Ghost button: quiet until engaged */ .rv-btn-ghost { background: transparent; color: var(--rv-text); border: 1px solid var(--rv-border-1); border-radius: var(--rv-radius-sm); padding: 0.55em 1.1em; font-weight: 600; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .rv-btn-ghost:hover { border-color: var(--rv-accent); color: var(--rv-text-strong); } .rv-btn-ghost:active { border-color: var(--rv-accent-press); } /* Divider: one crisp hairline */ .rv-divider { border: none; border-top: 1px solid var(--rv-hairline); height: 0; margin: 0; } /* Keyboard focus: visible ring in the theme accent, offset off the edge */ .rv-btn:focus-visible, .rv-btn-ghost:focus-visible, .rv-chip:focus-visible, .rv-card:focus-visible, .rv-card-2:focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; } /* ============================================================================ THEME PICKER — the swatch selector used in RV-HUB Settings › Themes and RV-LIVE Settings › Theme. Rendered by rv-theme.js RVTheme.renderPicker(). ============================================================================ */ .rv-theme-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; } .rv-theme-opt { position:relative; text-align:left; cursor:pointer; background:var(--rv-surface-2); border:1px solid var(--rv-border-1); border-radius:var(--rv-radius); padding:14px 14px 12px; color:var(--rv-text); transition:border-color 120ms ease, background-color 120ms ease; } .rv-theme-opt:hover { border-color:var(--rv-border-2); background:var(--rv-surface-3); } .rv-theme-opt.on { border-color:var(--rv-swatch); } .rv-theme-opt .rv-theme-swatch { width:100%; height:54px; border-radius:var(--rv-radius-sm); background:var(--rv-swatch); border:1px solid rgba(255,255,255,.10); display:flex; align-items:flex-end; justify-content:flex-end; padding:7px; } .rv-theme-opt .rv-theme-dot { width:14px; height:14px; border-radius:50%; background:#000; border:2px solid rgba(255,255,255,.55); } .rv-theme-opt .rv-theme-name { margin-top:10px; font-weight:700; font-size:14px; color:var(--rv-text-strong); } .rv-theme-opt .rv-theme-tag { font-size:12px; color:var(--rv-text-dim); } .rv-theme-opt .rv-theme-check { position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--rv-swatch); color:#fff; display:none; align-items:center; justify-content:center; font-size:13px; font-weight:900; } .rv-theme-opt.on .rv-theme-check { display:flex; }