/* ========================================================================= Saga player design tokens ========================================================================= Single source of truth for the player-facing visual identity. Edit values here and refresh — no build step required. Theming model: - Dark is the default theme (declared on :root). - Light mode is opt-in via the `saga-theme-light` class on , set by the theme preference machinery (window.sagaTheme / ThemePreferenceService). - `.saga-force-dark` / `.saga-force-light` re-declare the token set for a subtree regardless of the page theme (used by the styleguide previews, and later for per-profile theme scoping). Prefix: --sg- (saga). Player components consume only these variables; never hardcode colors in components.css or page CSS. ========================================================================= */ :root, .saga-force-dark { color-scheme: dark; /* native controls/scrollbars follow theme */ /* ---- Surfaces ------------------------------------------------------- */ --sg-bg: #020617; /* page backdrop (deep space) */ --sg-bg-glow: rgb(34 211 238 / 0.12);/* radial accent glow on backdrop */ --sg-surface: #0f172a; /* cards, panels */ --sg-surface-raised: #1e293b; /* nested/raised areas, table heads */ --sg-surface-hover: #1e293b; /* row + interactive surface hover */ --sg-surface-sunken: #020617; /* inset wells */ /* ---- Ink (text) ------------------------------------------------------ */ --sg-ink: #e2e8f0; /* body text */ --sg-ink-strong: #f8fafc; /* headings, emphasized values */ --sg-ink-muted: #94a3b8; /* secondary text, labels */ --sg-ink-faint: #64748b; /* placeholders, disabled, dividers */ /* ---- Edges ----------------------------------------------------------- */ --sg-edge: #334155; /* default borders */ --sg-edge-strong: #475569; /* hovered/focused borders */ --sg-edge-faint: #1e293b; /* hairlines inside surfaces */ /* ---- Accent (primary interactive color) ------------------------------ */ --sg-accent: #22d3ee; /* cyan — primary actions */ --sg-accent-strong: #67e8f9; /* links, hovered accents */ --sg-accent-ink: #083344; /* text on accent fills */ --sg-accent-soft: rgb(34 211 238 / 0.12); /* tinted backgrounds */ --sg-link: #67e8f9; --sg-focus: rgb(34 211 238 / 0.45); /* focus ring */ /* ---- Gold (secondary identity color — "rune gold") ------------------- */ --sg-gold: #ffe34d; --sg-gold-deep: #f59e0b; --sg-gold-ink: #422006; /* text on gold fills */ --sg-gold-soft: rgb(255 227 77 / 0.12); /* ---- Brand gradient (sidebar / hero accents) ------------------------- */ --sg-brand-from: #1e3a8a; /* blue-900 */ --sg-brand-to: #581c87; /* purple-900 */ /* ---- Status ----------------------------------------------------------- */ --sg-success: #4ade80; --sg-success-soft: rgb(74 222 128 / 0.14); --sg-danger: #fb7185; --sg-danger-soft: rgb(251 113 133 / 0.14); --sg-warning: #fbbf24; --sg-warning-soft: rgb(251 191 36 / 0.14); --sg-info: #4fa3ff; --sg-info-soft: rgb(79 163 255 / 0.14); --sg-neutral-soft: rgb(148 163 184 / 0.16); /* ---- In-game element colors (shared with manual tags) ---------------- */ --sg-el-fire: #ff5a3c; --sg-el-water: #4fa3ff; --sg-el-wind: #6ee07a; --sg-el-earth: #c08457; --sg-el-poison: #c084fc; --sg-el-holy: #fde68a; --sg-el-shadow: #a78bfa; --sg-el-ghost: #cbd5e1; --sg-el-neutral: #9aa7b4; /* ---- Typography ------------------------------------------------------- */ --sg-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sg-font-display: var(--sg-font-body); /* designer hook: swap for a display face */ --sg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- Shape & depth ---------------------------------------------------- */ --sg-radius-sm: 0.375rem; --sg-radius-md: 0.5rem; --sg-radius-lg: 0.75rem; --sg-radius-xl: 1rem; --sg-radius-pill: 9999px; --sg-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.35); --sg-shadow-2: 0 8px 24px -8px rgb(0 0 0 / 0.5); /* ---- Motion ----------------------------------------------------------- */ --sg-transition: 150ms ease-out; } /* ========================================================================= Light theme — opt-in via `saga-theme-light` on . Mirrors the light idiom used elsewhere on the site (white cards on gray). ========================================================================= */ :root.saga-theme-light, .saga-force-light { color-scheme: light; --sg-bg: #f8fafc; --sg-bg-glow: rgb(8 145 178 / 0.06); --sg-surface: #ffffff; --sg-surface-raised: #f8fafc; --sg-surface-hover: #f1f5f9; --sg-surface-sunken: #f1f5f9; --sg-ink: #334155; --sg-ink-strong: #0f172a; --sg-ink-muted: #64748b; --sg-ink-faint: #94a3b8; --sg-edge: #e2e8f0; --sg-edge-strong: #cbd5e1; --sg-edge-faint: #f1f5f9; --sg-accent: #0891b2; --sg-accent-strong: #0e7490; --sg-accent-ink: #ffffff; --sg-accent-soft: rgb(8 145 178 / 0.1); --sg-link: #0891b2; --sg-focus: rgb(8 145 178 / 0.35); --sg-gold: #d97706; --sg-gold-deep: #b45309; --sg-gold-ink: #ffffff; --sg-gold-soft: rgb(217 119 6 / 0.12); --sg-success: #059669; --sg-success-soft: rgb(5 150 105 / 0.1); --sg-danger: #e11d48; --sg-danger-soft: rgb(225 29 72 / 0.1); --sg-warning: #b45309; --sg-warning-soft: rgb(180 83 9 / 0.12); --sg-info: #2563eb; --sg-info-soft: rgb(37 99 235 / 0.1); --sg-neutral-soft: rgb(100 116 139 / 0.12); --sg-el-fire: #dc2626; --sg-el-water: #2563eb; --sg-el-wind: #16a34a; --sg-el-earth: #92400e; --sg-el-poison: #9333ea; --sg-el-holy: #ca8a04; --sg-el-shadow: #7c3aed; --sg-el-ghost: #64748b; --sg-el-neutral: #64748b; --sg-shadow-1: 0 1px 2px 0 rgb(15 23 42 / 0.06); --sg-shadow-2: 0 8px 24px -12px rgb(15 23 42 / 0.18); }