/* SBEOS owner-facing theme system. Themes + palettes adapted from the platai design system. Server-rendered: the base template stamps data-theme on and sets --primary* inline (accent). Legacy var names used across existing templates (--bg/--ink/--line/--card/--accent/--muted) are ALIASED to the theme tokens, so every owner page becomes theme-aware without edits. */ :root { /* default = Dark (owner UI defaults to dark; personalize on the Appearance page) */ --background: #0a0a0a; --foreground: #ededed; --surface: #171717; --surface-hover: #262626; --border: #404040; --card: #171717; --muted: #a1a1aa; --primary: #2563eb; --primary-hover: #1d4ed8; --primary-light: #3b82f6; --primary-dark: #1e40af; --ok: #34d399; --ok-bg: rgba(16,185,129,.14); --ok-border: rgba(16,185,129,.3); --warn: #fbbf24; --warn-bg: rgba(245,158,11,.14); --warn-border: rgba(245,158,11,.3); --bad: #f87171; --bad-bg: rgba(239,68,68,.14); --bad-border: rgba(239,68,68,.3); color-scheme: dark; /* legacy aliases (existing templates reference these) */ --bg: var(--background); --ink: var(--foreground); --line: var(--border); --accent: var(--primary); --chip-bg: var(--surface); --nav-bg: var(--card); } [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { --background: #ffffff; --foreground: #1a1a1a; --surface: #f5f5f5; --surface-hover: #e5e5e5; --border: #d4d4d8; --card: #ffffff; --muted: #636369; --ok: #1a7f4b; --ok-bg: #e4f2e9; --ok-border: #bcdcc8; --warn: #b3541e; --warn-bg: #fbeee0; --warn-border: #f0d8bf; --bad: #b02a37; --bad-bg: #f9e7e9; --bad-border: #ecc3c8; color-scheme: light; } [data-theme="midnight"] { --background: #0b1120; --foreground: #e2e8f0; --surface: #131c31; --surface-hover: #1a2744; --border: #1e3050; --card: #131c31; --muted: #8896b3; --ok: #34d399; --ok-bg: rgba(16,185,129,.14); --ok-border: rgba(16,185,129,.3); --warn: #fbbf24; --warn-bg: rgba(245,158,11,.14); --warn-border: rgba(245,158,11,.3); --bad: #f87171; --bad-bg: rgba(239,68,68,.14); --bad-border: rgba(239,68,68,.3); color-scheme: dark; } [data-theme="nord"] { --background: #2e3440; --foreground: #eceff4; --surface: #3b4252; --surface-hover: #434c5e; --border: #4c566a; --card: #3b4252; --muted: #a0aec0; --ok: #a3be8c; --ok-bg: rgba(163,190,140,.16); --ok-border: rgba(163,190,140,.32); --warn: #ebcb8b; --warn-bg: rgba(235,203,139,.16); --warn-border: rgba(235,203,139,.32); --bad: #bf616a; --bad-bg: rgba(191,97,106,.16); --bad-border: rgba(191,97,106,.32); color-scheme: dark; } [data-theme="copper"] { --background: #12100e; --foreground: #ede8e3; --surface: #1c1916; --surface-hover: #2a2520; --border: #3d352d; --card: #1c1916; --muted: #a89e93; --ok: #7bb98f; --ok-bg: rgba(123,185,143,.16); --ok-border: rgba(123,185,143,.3); --warn: #f59e0b; --warn-bg: rgba(245,158,11,.16); --warn-border: rgba(245,158,11,.3); --bad: #e0777f; --bad-bg: rgba(224,119,127,.16); --bad-border: rgba(224,119,127,.3); color-scheme: dark; } [data-theme="emerald"] { --background: #0a100e; --foreground: #e6ede9; --surface: #121d18; --surface-hover: #1a2d24; --border: #243d31; --card: #121d18; --muted: #87a696; --ok: #34d399; --ok-bg: rgba(16,185,129,.16); --ok-border: rgba(16,185,129,.3); --warn: #fbbf24; --warn-bg: rgba(245,158,11,.16); --warn-border: rgba(245,158,11,.3); --bad: #f87171; --bad-bg: rgba(239,68,68,.16); --bad-border: rgba(239,68,68,.3); color-scheme: dark; } [data-theme="sandstone"] { --background: #faf8f5; --foreground: #2c2825; --surface: #f0ece7; --surface-hover: #e6e0d9; --border: #d5cec5; --card: #f0ece7; --muted: #6b6359; color-scheme: light; } [data-theme="arctic"] { --background: #f5f8fc; --foreground: #1e293b; --surface: #e8eef6; --surface-hover: #dce4f0; --border: #c7d2e0; --card: #e8eef6; --muted: #536179; color-scheme: light; } /* Aliases are declared once on :root as var() references; because a data-theme selector redefines the underlying tokens on the SAME :root element, the aliases re-resolve to the active theme's values automatically (custom properties compute per element). */ /* SBEOS product wordmark — two fonts: "SBE" heavy sans, "OS" mono accent. */ .brand-sbe { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 800; letter-spacing: -.02em; } .brand-os { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 500; letter-spacing: 0; color: var(--primary, #4a90d9); }