/* ═══════════════════════════════════════════════════════════════ ARCANIST'S GUIDEBOOK — THEME TOKENS All visual decisions live here. Nothing else in the codebase should contain a hardcoded colour or font-family value. To swap themes: change [data-theme="x"] attribute on To swap fonts: JS → document.documentElement.style.setProperty(...) SURFACE SYSTEM Each surface is a matched pair: background + its text colours. Elements declare which surface they sit on. Text is always readable because the bg and text tokens come from the same pair. Surfaces: nav — the icon rail, flyout, topbar (always dark) content — the main reading area card — inset panels on the content area panel — deliberate dark callout boxes within content overlay — modals, toasts, floating UI ═══════════════════════════════════════════════════════════════ */ /* ── DEFAULT THEME: Arcane (deep indigo, gold) ────────────── */ :root { /* Fonts */ --font-heading: 'Cinzel', Georgia, serif; --font-decorative: 'Cinzel Decorative', Georgia, serif; --font-body: 'IM Fell English', Georgia, serif; --font-ui: 'Cinzel', sans-serif; --font-size-base: 16px; /* ── Surface: NAV (topbar, icon rail, flyout) ── */ --nav-bg: #0f1225; --nav-bg-deep: #0a0c16; --nav-bg-raised: #13172b; --nav-text: #e8dfc8; --nav-text-muted: #9e8f72; --nav-accent: #c9a84c; --nav-accent-bright: #e8c97a; --nav-border: rgba(201,168,76,0.25); --nav-border-bright: rgba(201,168,76,0.6); --nav-hover: rgba(201,168,76,0.08); --nav-active: rgba(201,168,76,0.14); /* ── Surface: CONTENT (main reading area) ── */ --content-bg: #13172b; --content-text: #e8dfc8; --content-text-muted: #9e8f72; --content-accent: #c9a84c; --content-accent-bright: #e8c97a; --content-border: rgba(201,168,76,0.25); --content-heading: #e8c97a; /* ── Surface: CARD (inset panels within content) ── */ --card-bg: #1a1f38; --card-text: #e8dfc8; --card-text-muted: #9e8f72; --card-border: rgba(201,168,76,0.22); --card-hover: rgba(201,168,76,0.06); /* ── Surface: PANEL (dark callout boxes, vibration sections) ── */ --panel-bg: #0f1225; --panel-text: #e8dfc8; --panel-text-muted: rgba(232,223,200,0.6); --panel-accent: #c9a84c; --panel-border: rgba(201,168,76,0.3); /* ── Semantic colours (suit colours, status) ── */ --color-wands: #c0622a; --color-cups: #3a6ab0; --color-swords: #8a9aaa; --color-pentacles: #4a9a5a; --color-major: #8a5ab5; --color-crimson: #8b2020; --color-success: #4a9a5a; --color-success-light: #b0e8b8; --color-danger: #8b2020; --color-danger-light: #f0a0a0; /* ── Layout ── */ --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --topbar-height: 48px; --rail-width: 52px; --flyout-width: 220px; /* ── Legacy aliases (keep JS that uses old names working) ── */ --gold: var(--nav-accent); --gold-light: var(--nav-accent-bright); --gold-dim: var(--nav-text-muted); --ink: var(--nav-bg-deep); --deep: var(--nav-bg); --panel: var(--card-bg); --panel2: var(--panel-bg); --border: var(--content-border); --border-bright: var(--nav-border-bright); --text: var(--content-text); --text-muted: var(--content-text-muted); --wands: var(--color-wands); --cups: var(--color-cups); --swords: var(--color-swords); --pentacles: var(--color-pentacles); --major: var(--color-major); } /* ══════════════════════════════════════════════════════════════ THEME: PARCHMENT (warm manuscript, light mode) Apply with: ══════════════════════════════════════════════════════════════ */ [data-theme="parchment"] { /* ── Surface: NAV stays dark (walnut wood) — warm readable tones ── */ --nav-bg: #3a2c1e; --nav-bg-deep: #2a1e12; --nav-bg-raised: #4a3828; --nav-text: #f8f0e0; --nav-text-muted: #c8a878; --nav-accent: #c9a84c; --nav-accent-bright: #e8c97a; --nav-border: rgba(200,160,80,0.28); --nav-border-bright: rgba(200,160,80,0.6); --nav-hover: rgba(200,160,80,0.14); --nav-active: rgba(200,160,80,0.22); /* ── Surface: CONTENT becomes parchment ── */ --content-bg: #f2e8d0; --content-text: #3a2810; --content-text-muted: rgba(58,40,16,0.6); --content-accent: #8b5e1a; --content-accent-bright: #5a3c10; --content-border: rgba(90,60,20,0.22); --content-heading: #2a1a08; /* ── Surface: CARD (white-ish panels on parchment) ── */ --card-bg: rgba(255,240,210,0.6); --card-text: #3a2810; --card-text-muted: rgba(58,40,16,0.5); --card-border: rgba(90,60,20,0.14); --card-hover: rgba(255,255,255,0.75); /* ── Surface: PANEL stays dark (callouts, vibrations) ── */ --panel-bg: #3a2614; --panel-text: #f0e8d0; --panel-text-muted: rgba(240,232,208,0.65); --panel-accent: #c9a84c; --panel-border: rgba(180,120,50,0.3); /* Semantic */ --color-crimson: #8b2020; /* Legacy aliases update for parchment context */ --gold: #c9a84c; --gold-light: #e8c97a; --gold-dim: rgba(58,40,16,0.45); --ink: #1a120a; --deep: #241810; --panel: rgba(255,255,255,0.55); --panel2: #3a2614; --border: rgba(90,60,20,0.18); --border-bright: rgba(90,60,20,0.4); --text: #3a2810; --text-muted: rgba(58,40,16,0.55); } /* ══════════════════════════════════════════════════════════════ THEME: MIDNIGHT (deeper dark, more contrast) Apply with: ══════════════════════════════════════════════════════════════ */ [data-theme="midnight"] { --nav-bg: #050508; --nav-bg-deep: #020204; --nav-bg-raised: #0a0a12; --nav-text: #f0ead8; --nav-accent: #d4a843; --nav-accent-bright: #f0c860; --nav-border: rgba(212,168,67,0.3); --content-bg: #0a0a12; --content-text: #e8e0c8; --content-text-muted: #786850; --content-heading: #f0c860; --content-border: rgba(212,168,67,0.2); --card-bg: #10101e; --card-text: #e8e0c8; --card-border: rgba(212,168,67,0.18); --panel-bg: #050508; --panel-text: #e8e0c8; --panel-border: rgba(212,168,67,0.28); /* Legacy */ --gold: #d4a843; --gold-light: #f0c860; --gold-dim: #786850; --ink: #020204; --deep: #050508; --panel: #10101e; --panel2: #050508; --border: rgba(212,168,67,0.2); --text: #e8e0c8; --text-muted: #786850; } /* ══════════════════════════════════════════════════════════════ THEME: BLOOD MOON (deep crimson dark) Apply with: ══════════════════════════════════════════════════════════════ */ [data-theme="bloodmoon"] { --nav-bg: #1a0808; --nav-bg-deep: #0f0404; --nav-bg-raised: #2a1010; --nav-text: #f0d0c0; --nav-text-muted: #c07858; --nav-accent: #c03030; --nav-accent-bright: #e05050; --nav-border: rgba(192,48,48,0.3); --nav-border-bright: rgba(192,48,48,0.65); --nav-hover: rgba(192,48,48,0.1); --nav-active: rgba(192,48,48,0.18); --content-bg: #120808; --content-text: #f0d0c0; --content-text-muted: #a06040; --content-accent: #c03030; --content-accent-bright: #e05050; --content-border: rgba(192,48,48,0.25); --content-heading: #f0b0a0; --card-bg: #1e0c0c; --card-text: #f0d0c0; --card-text-muted: #a06040; --card-border: rgba(192,48,48,0.2); --card-hover: rgba(192,48,48,0.08); --panel-bg: #0f0404; --panel-text: #f0d0c0; --panel-text-muted: rgba(240,208,192,0.6); --panel-accent: #c03030; --panel-border: rgba(192,48,48,0.35); --gold: #c03030; --gold-light: #e05050; --gold-dim: #a06040; --ink: #0f0404; --deep: #1a0808; --panel: #1e0c0c; --panel2: #0f0404; --border: rgba(192,48,48,0.25); --border-bright: rgba(192,48,48,0.6); --text: #f0d0c0; --text-muted: #a06040; } /* ══════════════════════════════════════════════════════════════ THEME: VOID (pure black, electric teal) Apply with: ══════════════════════════════════════════════════════════════ */ [data-theme="void"] { --nav-bg: #050505; --nav-bg-deep: #000000; --nav-bg-raised: #0e0e0e; --nav-text: #d0f0f0; --nav-text-muted: #408888; --nav-accent: #00d4c8; --nav-accent-bright: #40f0e8; --nav-border: rgba(0,212,200,0.22); --nav-border-bright: rgba(0,212,200,0.55); --nav-hover: rgba(0,212,200,0.07); --nav-active: rgba(0,212,200,0.14); --content-bg: #080808; --content-text: #d0f0f0; --content-text-muted: #408888; --content-accent: #00d4c8; --content-accent-bright: #40f0e8; --content-border: rgba(0,212,200,0.18); --content-heading: #40f0e8; --card-bg: #101010; --card-text: #d0f0f0; --card-text-muted: #408888; --card-border: rgba(0,212,200,0.15); --card-hover: rgba(0,212,200,0.06); --panel-bg: #050505; --panel-text: #d0f0f0; --panel-text-muted: rgba(208,240,240,0.55); --panel-accent: #00d4c8; --panel-border: rgba(0,212,200,0.28); --gold: #00d4c8; --gold-light: #40f0e8; --gold-dim: #408888; --ink: #000000; --deep: #050505; --panel: #101010; --panel2: #050505; --border: rgba(0,212,200,0.18); --border-bright: rgba(0,212,200,0.5); --text: #d0f0f0; --text-muted: #408888; } /* ══════════════════════════════════════════════════════════════ FONT PRESETS These can be applied independently of colour themes. JS: setFont('serif') / setFont('sans') / setFont('cursive') ══════════════════════════════════════════════════════════════ */ /* Default: Arcane — Cinzel headings, IM Fell body */ [data-font="serif"] { --font-heading: 'Cinzel', Georgia, serif; --font-decorative: 'Cinzel Decorative', Georgia, serif; --font-body: 'IM Fell English', Georgia, serif; --font-ui: 'Cinzel', sans-serif; } /* Scholar — Cinzel headings, clean Garamond-style body */ [data-font="scholar"] { --font-heading: 'Cinzel', Georgia, serif; --font-decorative: 'Cinzel', Georgia, serif; --font-body: Georgia, 'Times New Roman', serif; --font-ui: 'Cinzel', sans-serif; } /* Manuscript — pure serif throughout, old book feel */ [data-font="manuscript"] { --font-heading: Georgia, 'Palatino Linotype', serif; --font-decorative: Georgia, 'Palatino Linotype', serif; --font-body: 'Palatino Linotype', Palatino, Georgia, serif; --font-ui: Georgia, serif; } /* Modern — clean system sans-serif throughout */ [data-font="modern"] { --font-heading: 'Trebuchet MS', Helvetica, sans-serif; --font-decorative: 'Trebuchet MS', Helvetica, sans-serif; --font-body: 'Trebuchet MS', Arial, sans-serif; --font-ui: 'Trebuchet MS', Arial, sans-serif; } /* Typewriter — monospace, like a grimoire typed on an old machine */ [data-font="typewriter"] { --font-heading: 'Courier New', Courier, monospace; --font-decorative: 'Courier New', Courier, monospace; --font-body: 'Courier New', Courier, monospace; --font-ui: 'Courier New', Courier, monospace; } /* Runic — system fantasy/symbol fonts, angular and harsh */ [data-font="runic"] { --font-heading: 'Papyrus', 'Segoe UI Historic', fantasy; --font-decorative: 'Papyrus', 'Segoe UI Historic', fantasy; --font-body: 'Palatino Linotype', Palatino, Georgia, serif; --font-ui: 'Papyrus', fantasy; } /* Grimoire — ultra-condensed impact for headings, narrow body */ [data-font="grimoire"] { --font-heading: Impact, 'Arial Narrow', 'Arial Black', sans-serif; --font-decorative: Impact, 'Arial Narrow', 'Arial Black', sans-serif; --font-body: 'Arial Narrow', Arial, sans-serif; --font-ui: Impact, 'Arial Narrow', sans-serif; } /* ══════════════════════════════════════════════════════════════ ACCENT COLOUR SYSTEM --accent-* tokens control all gold/highlight colours. Swap the three values to change the entire accent colour. Each preset redefines: accent, accent-bright, accent-dim, accent-rgb (for rgba() usage in borders/glows) ══════════════════════════════════════════════════════════════ */ :root { /* Default: Gold */ --accent: #c9a84c; --accent-bright: #e8c97a; --accent-dim: rgba(201,168,76,0.45); --accent-muted: rgba(201,168,76,0.18); --accent-border: rgba(201,168,76,0.28); --accent-glow: rgba(201,168,76,0.15); --accent-rgb: 201, 168, 76; /* Background pattern token — default is subtle arcane ambient */ --bg-pattern: radial-gradient(ellipse at 20% 20%, rgba(138,90,181,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(var(--accent-rgb),0.06) 0%, transparent 50%); --bg-overlay: none; } /* ── Pattern: None / Clean ── */ [data-bg="none"] { --bg-pattern: none; --bg-overlay: none; } /* ── Accent: Silver / Moon ── */ [data-accent="silver"] { --accent: #c8ccd8; --accent-bright: #e8eaf2; --accent-dim: rgba(200,204,216,0.45); --accent-muted: rgba(200,204,216,0.14); --accent-border: rgba(200,204,216,0.28); --accent-glow: rgba(200,204,216,0.12); --accent-rgb: 200, 204, 216; } /* ── Accent: Crimson ── */ [data-accent="crimson"] { --accent: #c04040; --accent-bright: #e06060; --accent-dim: rgba(192,64,64,0.45); --accent-muted: rgba(192,64,64,0.14); --accent-border: rgba(192,64,64,0.3); --accent-glow: rgba(192,64,64,0.15); --accent-rgb: 192, 64, 64; } /* ── Accent: Sapphire ── */ [data-accent="sapphire"] { --accent: #4878c8; --accent-bright: #78a8f0; --accent-dim: rgba(72,120,200,0.45); --accent-muted: rgba(72,120,200,0.14); --accent-border: rgba(72,120,200,0.3); --accent-glow: rgba(72,120,200,0.15); --accent-rgb: 72, 120, 200; } /* ── Accent: Emerald ── */ [data-accent="emerald"] { --accent: #48a870; --accent-bright: #78d0a0; --accent-dim: rgba(72,168,112,0.45); --accent-muted: rgba(72,168,112,0.14); --accent-border: rgba(72,168,112,0.3); --accent-glow: rgba(72,168,112,0.15); --accent-rgb: 72, 168, 112; } /* ── Accent: Amethyst ── */ [data-accent="amethyst"] { --accent: #9868c8; --accent-bright: #c098f0; --accent-dim: rgba(152,104,200,0.45); --accent-muted: rgba(152,104,200,0.14); --accent-border: rgba(152,104,200,0.3); --accent-glow: rgba(152,104,200,0.15); --accent-rgb: 152, 104, 200; } /* ── Accent: Copper ── */ [data-accent="copper"] { --accent: #c87840; --accent-bright: #e8a870; --accent-dim: rgba(200,120,64,0.45); --accent-muted: rgba(200,120,64,0.14); --accent-border: rgba(200,120,64,0.3); --accent-glow: rgba(200,120,64,0.15); --accent-rgb: 200, 120, 64; } /* ── Accent: Ivory ── */ [data-accent="ivory"] { --accent: #e8e0cc; --accent-bright: #f8f4ec; --accent-dim: rgba(232,224,204,0.4); --accent-muted: rgba(232,224,204,0.12); --accent-border: rgba(232,224,204,0.25); --accent-glow: rgba(232,224,204,0.1); --accent-rgb: 232, 224, 204; } /* ── Wire accent tokens into existing var names ── */ /* This bridges the accent system into all existing CSS that uses --gold etc. */ :root, [data-accent] { --gold: var(--accent); --gold-light: var(--accent-bright); --gold-dim: var(--accent-dim); --border: var(--accent-border); --border-bright: rgba(var(--accent-rgb), 0.65); --nav-accent: var(--accent); --nav-accent-bright: var(--accent-bright); --nav-border: var(--accent-border); --content-accent: var(--accent); --content-border: var(--accent-border); --panel-accent: var(--accent); --panel-border: var(--accent-border); } /* ══════════════════════════════════════════════════════════════ BACKGROUND PATTERN SYSTEM CSS patterns for simple backgrounds. Stars/Constellation/Arcane Glow use canvas injection via JS. ══════════════════════════════════════════════════════════════ */ /* Applied to shell-main */ .shell-main { position: relative; } /* Canvas backdrop — injected by JS for stars/constellation/arcane */ .bg-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; opacity: 1; } .shell-main > *, .shell-main > .module-layout { position: relative; z-index: 1; } /* ── Pattern: None / Clean ── */ [data-bg="none"] { --bg-pattern: none; --bg-overlay: none; } [data-bg="none"] .shell-main { background-image: none; } /* ── Pattern: Parchment Texture ── */ [data-bg="parchment"] .shell-main { background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(var(--accent-rgb), 0.03) 2px, rgba(var(--accent-rgb), 0.03) 3px ), repeating-linear-gradient( 90deg, transparent, transparent 5px, rgba(0,0,0,0.018) 5px, rgba(0,0,0,0.018) 6px ), radial-gradient(ellipse at 15% 25%, rgba(var(--accent-rgb),0.09) 0%, transparent 50%), radial-gradient(ellipse at 85% 75%, rgba(var(--accent-rgb),0.07) 0%, transparent 50%); } /* ── Pattern: Vellum (ruled lines) ── */ [data-bg="vellum"] .shell-main { background-image: repeating-linear-gradient( 180deg, transparent 0px, transparent 31px, rgba(var(--accent-rgb), 0.12) 31px, rgba(var(--accent-rgb), 0.12) 32px ), linear-gradient( 135deg, rgba(var(--accent-rgb),0.05) 0%, transparent 50%, rgba(var(--accent-rgb),0.03) 100% ); } /* ══════════════════════════════════════════════════════════════ TEXT COLOUR PRESETS --text-color-* tokens control body text colour. Apply with data-textcolor attribute on . ══════════════════════════════════════════════════════════════ */ :root { --text-primary: var(--content-text); --text-secondary: var(--content-text-muted); --text-weight-base: 400; --text-weight-heading: 400; --text-weight-ui: 500; } /* Warm Cream (default for Arcane) */ [data-textcolor="cream"] { --text: #e8dfc8; --text-muted: #9e8f72; } /* Bright White — high contrast */ [data-textcolor="white"] { --text: #f8f8f8; --text-muted: #a8a8a8; --content-text: #f0f0f0; --content-text-muted: rgba(240,240,240,0.55); } /* Soft Grey — easier on eyes for long sessions */ [data-textcolor="grey"] { --text: #c8c8d8; --text-muted: #8080a0; --content-text: #c0c0d0; --content-text-muted: rgba(192,192,208,0.55); } /* Warm Amber — torchlight feel */ [data-textcolor="amber"] { --text: #f0d890; --text-muted: #a08840; --content-text: #e8d080; --content-text-muted: rgba(232,208,128,0.55); } /* Cool Blue-White — moonlight feel */ [data-textcolor="moonlight"] { --text: #d0dff0; --text-muted: #7090b0; --content-text: #c8d8e8; --content-text-muted: rgba(200,216,232,0.55); } /* Parchment Ink (default for Parchment theme) */ [data-textcolor="ink"] { --text: #3a2810; --text-muted: rgba(58,40,16,0.55); --content-text: #3a2810; --content-text-muted: rgba(58,40,16,0.55); } /* Rose Gold — warm pink-gold */ [data-textcolor="rosegold"] { --text: #e8b4a0; --text-muted: #a06858; --content-text: #e0a890; --content-text-muted: rgba(224,168,144,0.55); } /* Sage — muted green, nature feel */ [data-textcolor="sage"] { --text: #a8c8a0; --text-muted: #608858; --content-text: #a0c098; --content-text-muted: rgba(160,192,152,0.55); } /* Violet — arcane purple */ [data-textcolor="violet"] { --text: #c8a8e8; --text-muted: #8060a8; --content-text: #c0a0e0; --content-text-muted: rgba(192,160,224,0.55); } /* Blood — deep crimson red */ [data-textcolor="blood"] { --text: #e87878; --text-muted: #a04040; --content-text: #e07070; --content-text-muted: rgba(224,112,112,0.55); } /* Ice — pale arctic blue */ [data-textcolor="ice"] { --text: #b8d8f0; --text-muted: #6090b8; --content-text: #b0d0e8; --content-text-muted: rgba(176,208,232,0.55); } /* Copper — warm metallic orange */ [data-textcolor="copper-text"] { --text: #e8a868; --text-muted: #a06830; --content-text: #e0a060; --content-text-muted: rgba(224,160,96,0.55); } /* ── Boldness presets ── */ /* Apply with data-weight attribute on */ [data-weight="light"] { --text-weight-base: 300; --text-weight-heading: 300; --text-weight-ui: 400; } [data-weight="regular"] { --text-weight-base: 400; --text-weight-heading: 400; --text-weight-ui: 500; } [data-weight="bold"] { --text-weight-base: 500; --text-weight-heading: 600; --text-weight-ui: 600; } [data-weight="heavy"] { --text-weight-base: 600; --text-weight-heading: 700; --text-weight-ui: 700; } /* Wire weight tokens into actual elements */ body { font-weight: var(--text-weight-base, 400); } h1, h2, h3, h4 { font-weight: var(--text-weight-heading, 400); } .global-nav-btn, .ritual-category-label, .topbar-title, .topbar-sub, [class*="label"], [class*="-title"] { font-weight: var(--text-weight-ui, 500); } /* ══════════════════════════════════════════════════════════════ CANVAS BACKGROUND TRANSPARENCY When a canvas bg is active, make content areas semi-transparent so the background shows through. Content remains readable. ══════════════════════════════════════════════════════════════ */ [data-bg="stars"] .shell-main, [data-bg="constellation"] .shell-main, [data-bg="arcane"] .shell-main { background-color: transparent !important; background-image: none !important; } /* Panels and cards get a dark semi-transparent tint */ [data-bg="stars"] .panel, [data-bg="stars"] .card-bg, [data-bg="stars"] [class*="-panel"], [data-bg="stars"] [class*="-card"], [data-bg="constellation"] .panel, [data-bg="constellation"] [class*="-panel"], [data-bg="constellation"] [class*="-card"], [data-bg="arcane"] .panel, [data-bg="arcane"] [class*="-panel"], [data-bg="arcane"] [class*="-card"] { background-color: rgba(10, 12, 30, 0.75) !important; backdrop-filter: blur(2px); } /* Nav stays opaque — no transparency on sidebar */ [data-bg] .global-nav, [data-bg] .topbar { background-color: var(--nav-bg) !important; } /* Give the rune/tarot detail panels and content containers glass effect */ [data-bg="stars"] .shell-main > *, [data-bg="constellation"] .shell-main > *, [data-bg="arcane"] .shell-main > * { background-color: rgba(10, 12, 30, 0.6); backdrop-filter: blur(1px); }