/* ═══════════════════════════════════════════════════════════════════════════ KRONOS DESIGN TOKENS — single source of truth for all pages Light values are the :root default; pages apply data-brand/data-theme on to switch brand palette and color mode. Token map: --bg page background --bg2 slightly elevated background (sidebars, alt rows) --surface card / panel face --surface2 inset / nested surface --surface3 deepest inset (gauge tracks, hover states) --border standard rule --border2 bolder / inner rule --text primary body text --text2 secondary / muted text --text3 disabled / placeholder text --heading heading text --accent primary interactive color (blue light, amber dark) --accent-bg tinted background for accent elements --accent-contrast text/icon color on top of accent --link normal link color --link-hover hover link color --amber warm highlight (same in light; primary accent in dark) --amber2 darker amber --amber-glow ambient amber glow --amber-dim very subtle amber tint --green / --green-bg success palette --red / --red-bg error / risk palette --blue / --blue-bg info palette --purple / --purple-bg secondary accent --orange / --orange-bg attention / marketplace accent --locked-bg overlay for locked/blurred sections --font-sans / --font-mono / --font-serif type stacks --radius base border radius ═══════════════════════════════════════════════════════════════════════════ */ /* ── Kronos Light (default) ─────────────────────────────────────────────── */ :root, [data-theme="light"], [data-brand="kronos"][data-theme="light"], [data-brand="kronos"][data-theme="system"] { --bg: #ffffff; --bg2: #f6f8fa; --surface: #f0f2f5; --surface2: #e8eaed; --surface3: #dde0e5; --border: #e5e8ec; --border2: #cdd3da; --text: #20242c; --text2: #657080; --text3: #9aa0b4; --heading: var(--text); --accent: #0f5f8f; --accent-bg: rgba(15, 95, 143, 0.08); --accent-contrast: #ffffff; --link: var(--accent); --link-hover: var(--accent); --amber: #c4841a; --amber2: #a06010; --amber-glow: rgba(196, 132, 26, 0.15); --amber-dim: rgba(196, 132, 26, 0.06); --green: #16a34a; --green-bg: rgba(22, 163, 74, 0.08); --red: #dc2626; --red-bg: rgba(220, 38, 38, 0.08); --blue: #2563eb; --blue-bg: rgba(37, 99, 235, 0.08); --purple: #7c3aed; --purple-bg: rgba(124, 58, 237, 0.08); --orange: #ea580c; --orange-bg: rgba(234, 88, 12, 0.08); --locked-bg: rgba(255, 255, 255, 0.82); /* Aliases for light-theme templates that used --ink/--muted/--line/--soft */ --ink: var(--text); --muted: var(--text2); --line: var(--border); --soft: var(--bg2); --font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-serif: 'Instrument Serif', Georgia, serif; --radius: 6px; --shell-h: 52px; /* height of .kronos-shell-header (primary nav only) */ } /* ── Kronos Dark ────────────────────────────────────────────────────────── */ [data-theme="dark"], [data-brand="kronos"][data-theme="dark"] { --bg: #0e0f12; --bg2: #13151a; --surface: #181b22; --surface2: #1e2229; --surface3: #252b35; --border: #262c38; --border2: #303846; --text: #e4e8f0; --text2: #9aa0b4; --text3: #5a6178; --heading: var(--text); --accent: #e8a93a; --accent-bg: rgba(232, 169, 58, 0.08); --accent-contrast: #0e0f12; --link: var(--accent); --link-hover: var(--accent); --amber: #e8a93a; --amber2: #c4841a; --amber-glow: rgba(232, 169, 58, 0.15); --amber-dim: rgba(232, 169, 58, 0.06); --green: #34c47a; --green-bg: rgba(52, 196, 122, 0.08); --red: #e85555; --red-bg: rgba(232, 85, 85, 0.08); --blue: #5b8dee; --blue-bg: rgba(91, 141, 238, 0.08); --purple: #9b7de8; --purple-bg: rgba(155, 125, 232, 0.08); --orange: #e8832a; --orange-bg: rgba(232, 131, 42, 0.10); --locked-bg: rgba(14, 15, 18, 0.70); --ink: var(--text); --muted: var(--text2); --line: var(--border); --soft: var(--surface2); } /* ── Korra Astra WordPress palette ─────────────────────────────────────── */ [data-theme="astra"], [data-brand="korra"][data-theme="astra"] { --bg: #161b28; --bg2: #3a476a; --surface: #1d2333; --surface2: #25304a; --surface3: #303d5e; --border: #1d2333; --border2: #364f6b; --text: #dbe1ec; --text2: #b7c0d0; --text3: #8c98ad; --heading: #ffffff; --accent: #f5793b; --accent-bg: rgba(245, 121, 59, 0.14); --accent-contrast: #161b28; --link: #9fb8d4; --link-hover: #f79a6b; --amber: #f5793b; --amber2: #c95f2c; --amber-glow: rgba(245, 121, 59, 0.18); --amber-dim: rgba(245, 121, 59, 0.08); --green: #78c6a3; --green-bg: rgba(120, 198, 163, 0.11); --red: #ff6b6b; --red-bg: rgba(255, 107, 107, 0.10); --blue: #6f8fb0; --blue-bg: rgba(111, 143, 176, 0.13); --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.11); --orange: #f79a6b; --orange-bg: rgba(247, 154, 107, 0.11); --locked-bg: rgba(22, 27, 40, 0.76); --ink: var(--heading); --muted: var(--text2); --line: var(--border); --soft: var(--surface2); } /* ── Kubo Sea Green WordPress palette ──────────────────────────────────── */ [data-theme="kubo-sea-green"], [data-brand="kubo"][data-theme="kubo-sea-green"] { --bg: #0a3042; --bg2: #11506e; --surface: #0f3b51; --surface2: #154d67; --surface3: #1b637f; --border: #0f3b51; --border2: #11506e; --text: #e8fff0; --text2: #b8d8cf; --text3: #82afa9; --heading: #ffffff; --accent: #64ee85; --accent-bg: rgba(100, 238, 133, 0.14); --accent-contrast: #0a3042; --link: #64ee85; --link-hover: #36e961; --amber: #e8d833; --amber2: #c8b925; --amber-glow: rgba(232, 216, 51, 0.18); --amber-dim: rgba(232, 216, 51, 0.08); --green: #64ee85; --green-bg: rgba(100, 238, 133, 0.12); --red: #ff6b6b; --red-bg: rgba(255, 107, 107, 0.10); --blue: #7acdee; --blue-bg: rgba(122, 205, 238, 0.12); --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.11); --orange: #f59e0b; --orange-bg: rgba(245, 158, 11, 0.10); --locked-bg: rgba(10, 48, 66, 0.76); --ink: var(--heading); --muted: var(--text2); --line: var(--border); --soft: var(--surface2); } /* ── Greyborne Robin's Egg Blue WordPress palette ──────────────────────── */ [data-theme="greyborne-robin-egg"], [data-brand="greyborne"][data-theme="greyborne-robin-egg"] { --bg: #1a1f24; --bg2: #303841; --surface: #2a2f34; --surface2: #303841; --surface3: #46515e; --border: #2a2f34; --border2: #46515e; --text: #f0f2f5; --text2: #c5d0d8; --text3: #aab8c2; --heading: #ffffff; --accent: #00cfc8; --accent-bg: rgba(0, 207, 200, 0.13); --accent-contrast: #1a1f24; --link: #00deda; --link-hover: #03fff6; --amber: #e8d833; --amber2: #c8b925; --amber-glow: rgba(232, 216, 51, 0.18); --amber-dim: rgba(232, 216, 51, 0.08); --green: #67a671; --green-bg: rgba(103, 166, 113, 0.11); --red: #ff6b6b; --red-bg: rgba(255, 107, 107, 0.10); --blue: #7acdee; --blue-bg: rgba(122, 205, 238, 0.11); --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.10); --orange: #f59e0b; --orange-bg: rgba(245, 158, 11, 0.10); --locked-bg: rgba(26, 31, 36, 0.76); --ink: var(--heading); --muted: var(--text2); --line: var(--border); --soft: var(--surface2); } /* ── Mindtonic Bittersweet WordPress palette ───────────────────────────── */ [data-theme="mindtonic-bittersweet"], [data-brand="mindtonic"][data-theme="mindtonic-bittersweet"] { --bg: #1f0a0d; --bg2: #45171d; --surface: #2b1216; --surface2: #45171d; --surface3: #6b242d; --border: #2b1216; --border2: #6b242d; --text: #ffcdc9; --text2: #d7aaa7; --text3: #a17d7b; --heading: #ffffff; --accent: #ff847c; --accent-bg: rgba(255, 132, 124, 0.14); --accent-contrast: #1f0a0d; --link: #ff9b94; --link-hover: #ffb4af; --amber: #e8d833; --amber2: #c8b925; --amber-glow: rgba(232, 216, 51, 0.18); --amber-dim: rgba(232, 216, 51, 0.08); --green: #67a671; --green-bg: rgba(103, 166, 113, 0.11); --red: #ff847c; --red-bg: rgba(255, 132, 124, 0.10); --blue: #7acdee; --blue-bg: rgba(122, 205, 238, 0.10); --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.11); --orange: #ffb4af; --orange-bg: rgba(255, 180, 175, 0.10); --locked-bg: rgba(31, 10, 13, 0.76); --ink: var(--heading); --muted: var(--text2); --line: var(--border); --soft: var(--surface2); } /* ── Korra brand accents ───────────────────────────────────────────────── */ [data-brand="korra"][data-theme="light"], [data-brand="korra"][data-theme="system"] { --accent: #184f7a; --accent-bg: rgba(24, 79, 122, 0.08); --blue: #184f7a; --blue-bg: rgba(24, 79, 122, 0.08); --purple: #6d4fb3; --purple-bg: rgba(109, 79, 179, 0.08); } [data-brand="korra"][data-theme="dark"] { --accent: #d6a24b; --accent-bg: rgba(214, 162, 75, 0.10); --amber: #d6a24b; --amber2: #b77e24; --amber-glow: rgba(214, 162, 75, 0.16); --amber-dim: rgba(214, 162, 75, 0.07); --blue: #7ca7e8; --blue-bg: rgba(124, 167, 232, 0.09); } /* ── Kyra brand accents ────────────────────────────────────────────────── */ [data-brand="kyra"][data-theme="light"], [data-brand="kyra"][data-theme="system"] { --accent: #2f6f5f; --accent-bg: rgba(47, 111, 95, 0.09); --green: #17865a; --green-bg: rgba(23, 134, 90, 0.09); --orange: #c85f2c; --orange-bg: rgba(200, 95, 44, 0.09); } [data-brand="kyra"][data-theme="dark"] { --accent: #78c6a3; --accent-bg: rgba(120, 198, 163, 0.10); --green: #78c6a3; --green-bg: rgba(120, 198, 163, 0.10); --orange: #e59a62; --orange-bg: rgba(229, 154, 98, 0.10); } /* ── Kubo brand accents ────────────────────────────────────────────────── */ [data-brand="kubo"][data-theme="light"], [data-brand="kubo"][data-theme="system"] { --accent: #0f7a3a; --accent-bg: rgba(15, 122, 58, 0.08); --green: #0f7a3a; --green-bg: rgba(15, 122, 58, 0.08); --blue: #11506e; --blue-bg: rgba(17, 80, 110, 0.08); } [data-brand="kubo"][data-theme="dark"] { --accent: #64ee85; --accent-bg: rgba(100, 238, 133, 0.10); --green: #64ee85; --green-bg: rgba(100, 238, 133, 0.10); --blue: #7acdee; --blue-bg: rgba(122, 205, 238, 0.10); } /* ── Mindtonic brand accents ───────────────────────────────────────────── */ [data-brand="mindtonic"][data-theme="light"], [data-brand="mindtonic"][data-theme="system"] { --accent: #a94a48; --accent-bg: rgba(169, 74, 72, 0.08); --red: #a94a48; --red-bg: rgba(169, 74, 72, 0.08); --orange: #b95d55; --orange-bg: rgba(185, 93, 85, 0.08); } [data-brand="mindtonic"][data-theme="dark"] { --accent: #ff847c; --accent-bg: rgba(255, 132, 124, 0.10); --red: #ff847c; --red-bg: rgba(255, 132, 124, 0.10); --orange: #ffb4af; --orange-bg: rgba(255, 180, 175, 0.10); } /* ── Greyborne brand accents ───────────────────────────────────────────── */ [data-brand="greyborne"][data-theme="light"], [data-brand="greyborne"][data-theme="system"] { --accent: #008f8a; --accent-bg: rgba(0, 143, 138, 0.08); --blue: #0f766e; --blue-bg: rgba(15, 118, 110, 0.08); } [data-brand="greyborne"][data-theme="dark"] { --accent: #00cfc8; --accent-bg: rgba(0, 207, 200, 0.10); --blue: #7acdee; --blue-bg: rgba(122, 205, 238, 0.10); } /* ── Reserve and Ketra aliases until their surfaces are fully migrated ─── */ [data-brand="reserve"][data-theme="light"], [data-brand="reserve"][data-theme="system"] { --accent: #8a5f1e; --accent-bg: rgba(138, 95, 30, 0.08); } [data-brand="reserve"][data-theme="dark"] { --accent: #e8c66e; --accent-bg: rgba(232, 198, 110, 0.10); --amber: #e8c66e; --amber2: #c4841a; } [data-brand="ketra"][data-theme="light"], [data-brand="ketra"][data-theme="system"] { --accent: #b45309; --accent-bg: rgba(180, 83, 9, 0.08); --orange: #b45309; } [data-brand="ketra"][data-theme="dark"] { --accent: #f59e0b; --accent-bg: rgba(245, 158, 11, 0.10); --orange: #f59e0b; } @media (prefers-color-scheme: dark) { [data-theme="system"] { --bg: #0e0f12; --bg2: #13151a; --surface: #181b22; --surface2: #1e2229; --surface3: #252b35; --border: #262c38; --border2: #303846; --text: #e4e8f0; --text2: #9aa0b4; --text3: #5a6178; --heading: var(--text); --accent: #e8a93a; --accent-bg: rgba(232, 169, 58, 0.08); --accent-contrast: #0e0f12; --link: var(--accent); --link-hover: var(--accent); --amber: #e8a93a; --amber2: #c4841a; --amber-glow: rgba(232, 169, 58, 0.15); --amber-dim: rgba(232, 169, 58, 0.06); --green: #34c47a; --green-bg: rgba(52, 196, 122, 0.08); --red: #e85555; --red-bg: rgba(232, 85, 85, 0.08); --blue: #5b8dee; --blue-bg: rgba(91, 141, 238, 0.08); --purple: #9b7de8; --purple-bg: rgba(155, 125, 232, 0.08); --orange: #e8832a; --orange-bg: rgba(232, 131, 42, 0.10); --locked-bg: rgba(14, 15, 18, 0.70); --ink: var(--text); --muted: var(--text2); --line: var(--border); --soft: var(--surface2); } [data-brand="korra"][data-theme="system"] { --accent: #d6a24b; --accent-bg: rgba(214, 162, 75, 0.10); --amber: #d6a24b; --amber2: #b77e24; --blue: #7ca7e8; --blue-bg: rgba(124, 167, 232, 0.09); } [data-brand="kyra"][data-theme="system"] { --accent: #78c6a3; --accent-bg: rgba(120, 198, 163, 0.10); --green: #78c6a3; --green-bg: rgba(120, 198, 163, 0.10); --orange: #e59a62; --orange-bg: rgba(229, 154, 98, 0.10); } } /* ── Base resets shared across all pages ────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; scroll-behavior: smooth; } body { font-family: var(--font-sans); line-height: 1.5; color: var(--text); background: var(--bg); } h1, h2, h3, h4, h5, h6 { color: var(--heading); } a { color: var(--link); text-decoration: none; font-weight: 700; } a:hover { color: var(--link-hover); text-decoration: underline; }