/* ═══════════════════════════════════════════════════════════════════════════ TALMAARA DESIGN TOKENS — single source of truth for every color in the app. Loaded FIRST on every page (includes/head.php), before style.css or any page sheet. No component rule anywhere should name a theme — only tokens. Three skins, one vocabulary (dark/light chosen 2026-07-13, dim 2026-07-19): • Dark = "night sky" — navy ground, cream ink, #00B3FF accent. Lives on :root because dark is the brand default. • Light = "manuscript paper" — cream ground, navy ink, #155999 accent. Activated by html[data-theme="light"]. • Dim = "twilight slate" — mid slate ground, white ink, #3DB8FF accent. Activated by html[data-theme="dim"]. Dark-family: head.php stamps the legacy dark-mode class for it, same as dark. The legacy `dark-mode` class on is still stamped when dark is active (see head.php) so older `.dark-mode`-scoped rules keep matching until the literal sweep retires them. New code must never target `.dark-mode`. NOT governed here: illustration/art colors (book covers, planet & moon SVGs, nebula washes, map pins, tier emblems), the PORTAL_COLORS registry, email HTML (clients can't read vars), and PDF/manuscript output surfaces — those stay literal on purpose. The public cinematic pages (landing, pricing, legal) keep their fixed navy/cream palette and do not theme-switch. ═══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; /* ── Ground & surfaces (elevation steps: page → card → raised → hover) ── */ --bg: #0B141F; --surface-1: #121E2D; /* cards, panels, subnav */ --surface-2: #182636; /* nested panels, menus, inputs, modals */ --surface-3: #1E3044; /* hover / active fills on surface-2 */ /* ── Ink (three tiers — stop improvising grays) ── */ --text: #EFEBE1; /* primary */ --text-2: #B7BAB5; /* secondary: body copy, labels */ --text-3: #84909B; /* muted: meta, placeholders, timestamps */ /* ── Lines ── */ --border: #1F2E40; /* default dividers, card edges */ --border-strong: #2C405A; /* inputs, emphasized separation */ /* ── Brand accent (overridden live from the settings DB via head.php) ── */ --accent: #00B3FF; --accent-2: #A6CDDD; /* dim accent: kickers, quiet links */ --on-accent: #0A1420; /* text/icon color on accent-filled controls */ --accent-glow: rgba(0, 179, 255, 0.08); --accent-ring: rgba(0, 179, 255, 0.15); --accent-tint: rgba(0, 179, 255, 0.12); /* ── Status (semantic — never reuse the accent for state) ── */ --good: #4CCB8F; --warn: #F0B754; --danger: #F0605D; --good-tint: rgba(76, 203, 143, 0.10); --warn-tint: rgba(240, 183, 84, 0.10); --danger-tint: rgba(240, 96, 93, 0.10); /* ── Elevation ── */ --shadow: rgba(0, 0, 0, 0.45); /* ── Page texture layer (consumed by body.has-sidebar::before, style.css). Procedural SVG grain (feTurbulence, desaturated) as a data URI, blended soft-light over var(--bg) — it modulates luminance ONLY, so the ground hue always stays exactly the token color ("painted plastic" fuzz, not speckle). Costs no request (replaces the baked noisebackground.jpg). Strength knob = the rect's opacity; grain size = baseFrequency. ── */ --page-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"); --page-tint-a: 0.18; /* project-accent tint strength over the grain */ /* How the grain mixes with --bg (consumed by style.css). soft-light works on dark grounds; light overrides to multiply because soft-light tops out at ~7% darkening on near-white — invisible in practice. */ --page-texture-blend: soft-light; /* ── Background motif (middle layer of the ::before stack, style.css): zigzag chevron bands (chosen 2026-07-20, replacing the logo network) — nested V-lines running the full width, bands interlocking vertically, legs fading toward the top of each rise. The artwork is a per-skin SVG (assets/images/motif-*.svg) where ink, strength, fade, and line weight are plain attributes — edit there. Here per skin: which file, and --page-motif-size to zoom the whole pattern (the SVG has a viewBox, so it scales uniformly). Set --page-motif: none to switch a skin off. Bump the ?v= when an SVG changes — the files aren't filemtime-versioned like CSS/JS. ── */ --page-motif: url('/assets/images/motif-dark.svg?v=3'); --page-motif-size: 672px 552px; } html[data-theme="light"] { color-scheme: light; /* "Porcelain" (candidate E, adopted 2026-07-15) — cool blue-gray daylight, the day-sky partner to the navy dark. Replaced the warm manuscript-paper values, which fought the portal colors on real pages. */ --bg: #E6E9F0; --surface-1: #F5F7FB; --surface-2: #FFFFFF; --surface-3: #EAEEF5; --text: #1C2836; --text-2: #4E5B6C; --text-3: #7C899A; --border: #D3DAE5; --border-strong: #BCC6D6; --accent: #155999; --accent-2: #0A638A; --on-accent: #FFFFFF; --accent-glow: rgba(21, 89, 153, 0.09); --accent-ring: rgba(21, 89, 153, 0.20); --accent-tint: rgba(21, 89, 153, 0.14); --good: #1F8A57; --warn: #A87413; --danger: #C0403D; --good-tint: rgba(31, 138, 87, 0.10); --warn-tint: rgba(168, 116, 19, 0.10); --danger-tint: rgba(192, 64, 61, 0.10); --shadow: rgba(28, 39, 56, 0.12); /* Paper grain via MULTIPLY (soft-light tops out at ~7% darkening on this near-white ground — proved invisible at any opacity). The noise is scaled toward white (range 0.78–1.0) so multiply subtracts up to ~20% luminance where the grain is deepest; the A slope inflates alpha coverage (feTurbulence's alpha channel is noisy — without the boost half the pixels barely participate). Knobs: intercept = bump darkness floor (lower = darker), A slope = coverage, rect opacity = master. */ --page-texture-blend: multiply; --page-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.22' intercept='0.78'/%3E%3CfeFuncG type='linear' slope='0.22' intercept='0.78'/%3E%3CfeFuncB type='linear' slope='0.22' intercept='0.78'/%3E%3CfeFuncA type='linear' slope='1.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.7'/%3E%3C/svg%3E"); --page-tint-a: 0.10; --page-motif: url('/assets/images/motif-light.svg?v=3'); --page-motif-size: 672px 552px; } html[data-theme="dim"] { color-scheme: dark; /* "Twilight Slate" (hand-tuned 2026-07-19) — the between-skin for rooms where night sky is too dark and porcelain too bright. Mid slate ground, solid white ink. Deliberate inversion: surface-2 is DARKER than the cards, so inputs, menus, and modals read dark-on-light. 4D5359*/ --bg: #27303e; --surface-1: #394558; --surface-2: #353C45; --surface-3: #424C56; --text: #FFFFFF; --text-2: #D6DADF; --text-3: #B1B8C2; --border: #B6CCEC; --border-strong: #CCDBF2; --accent: #3DB8FF; --accent-2: #8BD4FF; --on-accent: #0A1420; --accent-glow: rgba(61, 184, 255, 0.10); --accent-ring: rgba(61, 184, 255, 0.24); --accent-tint: rgba(61, 184, 255, 0.16); --good: #4CCB8F; --warn: #F0B754; --danger: #F0605D; --good-tint: rgba(76, 203, 143, 0.14); --warn-tint: rgba(240, 183, 84, 0.14); --danger-tint: rgba(240, 96, 93, 0.14); --shadow: rgba(0, 0, 0, 0.28); /* Grain sits just under dark's strength — 0.3 proved too subtle on the slate ground in practice. */ --page-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.45'/%3E%3C/svg%3E"); --page-tint-a: 0.14; --page-motif: url('/assets/images/motif-dim.svg?v=3'); --page-motif-size: 672px 552px; } /* ═══ COMPATIBILITY ALIASES ═══════════════════════════════════════════════ The pre-2026 token names, re-pointed at the semantic set. Theme-agnostic (defined once — they follow whatever the slots above resolve to), so every existing var(--bg-light) rule switches skins for free. New code uses the semantic names; delete this block when the literal sweep finishes. */ :root { --bg-light: var(--bg); --bg-base: var(--bg); --card-bg-light: var(--surface-1); --border-light: var(--border); --text-light: var(--text); --text-muted: var(--text-3); /* was scope-local to reading themes */ --accent-primary: var(--accent); --accent-secondary: var(--accent-2); --btn-on-accent: var(--on-accent); --subnav-bg: var(--surface-1); --shadow-light: var(--shadow); /* Dead-twin legacy tokens — frozen at their historical literals so any straggler rule renders exactly as before. Sweep usages, then delete. */ --bg-dark: #1A1A1A; --text-dark: #E8E8E8; --card-bg-dark: #252525; --border-dark: #3A3A3A; --shadow-dark: rgba(0, 0, 0, 0.3); }