/* ===================================================================== THEME TOKENS — SINGLE SOURCE OF TRUTH Extracted from assets/css/style.css on 2026-08-26. Loaded by BOTH Cloudless Cards and the Soul's Remnant pages under /sr/, which sit on the same origin. Edit a colour here and both sites change together. Here: every theme's --color-* block, the theme-independent tokens, the @property registration for --color-accent, the mono accent keyframes, and the mono animation. None of it names a class, which is what makes it portable between the two projects. NOT here, on purpose: the per-theme edge-glow rules. Those name components (.btn--primary, .pack-banner, .panel, .tile) that differ between the sites, so each keeps its own selectors and reads these tokens. @property must stay beside the keyframes: a custom property animates DISCRETELY unless registered with a real type, so splitting them makes the mono cycle snap between colours instead of blending. ===================================================================== */ /* ── THEME-SCOPED COLOR TOKENS ───────────────────────────────────────────── Every token in these blocks is re-declared per theme. The bare `:root` in the first selector makes parchment the default when no data-theme attribute is present (no flash of unthemed UI). Tokens that are IDENTICAL in every theme (effect palette, felt, card faces, mod zone) live in the theme-independent `:root` block below — never duplicate those per theme. ──────────────────────────────────────────────────────────────────────────── */ :root, :root[data-theme="parchment"] { /* Base surfaces */ --color-bg: #F2DFC0; /* warm parchment — main body */ --color-surface: #E8C99A; /* deeper parchment — cards, stat blocks */ --color-surface-raised: #EDD9A8; /* slightly lifted surface */ /* Dark ink — header, nav, buttons */ --color-ink: #1A1628; /* deep navy black — primary text + surfaces */ --color-ink-mid: #2D2050; /* mid ink — secondary dark surfaces */ --color-ink-soft: #3D2F6E; /* soft ink — borders on dark surfaces */ /* Gold accents */ --color-gold: #D4A96A; /* primary gold — borders, badges, active nav */ --color-gold-dark: #8B6A3E; /* dark gold — muted labels on parchment */ --color-gold-light: #F2DFC0; /* lightest gold — text on dark surfaces */ /* Action colors */ --color-coral: #C4513A; /* primary action — buttons, alerts */ --color-coral-hover: #A8402B; /* hover state */ --color-coral-light: #F5C4B3; /* light coral — backgrounds */ /* Accent blue */ --color-blue: #4A9FD4; /* electric blue — info, secondary accent */ --color-blue-light: #6BBDE0; /* lighter blue */ /* Royal purple — bonus/cosmic accents */ --color-royal: #7F77DD; --color-royal-light: #C8C3F5; /* Semantic */ --color-success: #0F6E56; /* wins, positive states */ --color-danger: #993C1D; /* losses, destructive states */ --color-muted: #9B8AB4; /* muted purple — inactive nav, hints */ --color-muted-dark: #6B5F8A; /* darker muted — inactive nav on dark bg */ /* Text on surfaces */ --color-text-primary: #1A1628; /* on parchment */ --color-text-secondary: #8B6A3E; /* labels, subtitles on parchment */ --color-text-on-ink: #E8C99A; /* on dark ink surfaces */ --color-text-muted: #9B8AB4; /* hints, disabled */ /* Borders */ --color-border: #D4A96A; /* standard border — gold */ --color-border-ink: #2D2050; /* border on dark surfaces */ --color-border-light: rgba(212, 169, 106, 0.4); /* subtle border */ /* Scrim base — modal/overlay backdrops are color-mix()ed from this */ --color-scrim: #1A1628; /* Ability-keyword colors (help/rules copy) — contrast-tuned per theme */ --color-kw-attack: #993311; --color-kw-shield: #155578; --color-kw-heal: #1A5E45; --color-kw-draw: #6E4A10; /* Theme accent — static on parchment; animated (cycling) under mono. See the THEME ENGINE section after the token block. */ --color-accent: var(--color-coral); } /* ── MONO THEME — near-black monochrome, cycling edge accent ──────────────────── Values from dak_app_monochrome_edge_accent_mockup.html. The accent color appears ONLY as an edge glow (THEME ENGINE section); everything else is a grey ramp. */ :root[data-theme="mono"] { /* Base surfaces */ --color-bg: #0B0B0C; --color-surface: #161617; --color-surface-raised: #1C1C1E; /* "Ink" — still the dark chrome family, now neutral near-black */ --color-ink: #101012; --color-ink-mid: #1C1C1E; --color-ink-soft: #2A2A2E; /* Gold family — grey ramp */ --color-gold: #C9C9C9; --color-gold-dark: #8C8C8C; --color-gold-light: #EFEFEF; /* Action colors — monochrome buttons; the accent lives in the edge glow */ --color-coral: #232328; --color-coral-hover: #2E2E34; --color-coral-light: #1C1C1E; /* Info blue — cool grey */ --color-blue: #9FB8C8; --color-blue-light: #B8CCD8; /* Royal — desaturated */ --color-royal: #8F88C0; --color-royal-light: #B8B2DC; /* Semantic — lightened to read on near-black */ --color-success: #5DC495; --color-danger: #C05A36; --color-muted: #6F6F6F; --color-muted-dark: #6F6F6F; /* Text */ --color-text-primary: #EFEFEF; --color-text-secondary: #8C8C8C; --color-text-on-ink: #E6E6E6; --color-text-muted: #6F6F6F; /* Borders — hairlines */ --color-border: #232325; --color-border-ink: #2A2A2E; --color-border-light: rgba(255, 255, 255, 0.08); --color-scrim: #000000; --color-kw-attack: #E8926E; --color-kw-shield: #7FB8E8; --color-kw-heal: #6FD0A8; --color-kw-draw: #D8B36A; /* Static accent fallback (reduced-motion / pre-animation) — first stop */ --color-accent: #EF9F27; } /* ── SEASON THEME — "Season 1: The Awakening" (the rift) ──────────────────────── A self-contained rift look applied ONLY while inside the season shell (set via theme.js applyContextualTheme, reverted on exit). Registered as a real theme so it is switchable-ready, but intentionally NOT exposed in the user theme picker. Palette: deep rift-violet surfaces, warm gold KEPT for currency/leaderboard recognition, rift-violet royal (the leak), threat-pink coral (boss/danger). */ :root[data-theme="season"] { /* Base surfaces — rift purple-black */ --color-bg: #0F0B1C; --color-surface: #160F2B; --color-surface-raised: #241A44; /* "Ink" family — the dark chrome, shifted purple-ward */ --color-ink: #160F2B; --color-ink-mid: #241A44; --color-ink-soft: #3D2F6E; /* Gold family — kept WARM on purpose (gold pill, leaderboard, active nav stay recognizable as currency; warmth reads well against the purple) */ --color-gold: #E0B36A; --color-gold-dark: #8B6A3E; --color-gold-light: #F2DFC0; /* Action / threat — pink-red coral (boss, primary action, danger, recycle) */ --color-coral: #D14A6E; --color-coral-hover: #E0668A; --color-coral-light: #E88BA3; /* Info blue */ --color-blue: #5A8CDD; --color-blue-light: #9FB8E8; /* Royal — rift violet (the leak: portals, hunt, rift accents) */ --color-royal: #8A7DEE; --color-royal-light: #C8C3F5; /* Semantic — readable on the dark rift surfaces */ --color-success: #5DC495; --color-danger: #D14A6E; --color-muted: #9B8AB4; --color-muted-dark: #6B5F8A; /* Text — near-white with a faint violet tint */ --color-text-primary: #F2EEFF; --color-text-secondary: #C8C3F5; --color-text-on-ink: #F2EEFF; --color-text-muted: #9B8AB4; /* Borders */ --color-border: #3D2F6E; --color-border-ink: #3D2F6E; --color-border-light: rgba(200, 195, 245, 0.12); --color-scrim: #0A0714; --color-kw-attack: #E8926E; --color-kw-shield: #7FB8E8; --color-kw-heal: #6FD0A8; --color-kw-draw: #C8C3F5; /* Static accent — rift violet (portals use this for their glow) */ --color-accent: #8A7DEE; } /* ── EMPYREAN THEME — Rapture: Heaven — pearl white, gold as trim only ────────── Base surfaces are neutral pearl/white — NOT a gold wash. Gold appears only as hairline borders, the currency pill, badges, and a soft halo glow (THEME ENGINE section). Selectable from settings, alongside brimstone/cyberpunk. */ :root[data-theme="empyrean"] { /* Base surfaces — pearl white */ --color-bg: #F5F3EE; --color-surface: #FFFFFF; --color-surface-raised: #FBFAF6; /* "Ink" — deep neutral charcoal (not muddy brown) so header/nav stay crisp */ --color-ink: #26262E; --color-ink-mid: #32323C; --color-ink-soft: #464652; /* Gold — trim only: borders, pill, labels, badges */ --color-gold: #C9A227; --color-gold-dark: #8F7318; --color-gold-light: #FFF6DE; /* Action — muted gold-bronze fill (one deliberate accent, not a gold flood) */ --color-coral: #B8892E; --color-coral-hover: #CC9C3E; --color-coral-light: #E8D19C; /* Accent blue — soft celestial */ --color-blue: #7FA8D8; --color-blue-light: #B0CBE8; /* Royal — soft lavender-white "grace" */ --color-royal: #B3A6E0; --color-royal-light: #DCD5F0; /* Semantic */ --color-success: #4A8F6E; --color-danger: #A8461F; --color-muted: #B0A48A; --color-muted-dark: #8F7E5E; /* Text on surfaces */ --color-text-primary: #26262E; --color-text-secondary: #8F7318; --color-text-on-ink: #F5F3EE; --color-text-muted: #A89C82; /* Borders */ --color-border: #C9A227; --color-border-ink: #464652; --color-border-light: rgba(201, 162, 39, 0.22); --color-scrim: #26262E; --color-kw-attack: #A8461F; --color-kw-shield: #3D6E96; --color-kw-heal: #2E7A56; --color-kw-draw: #8F7318; /* Static accent — radiant gold, used for the halo glow only (THEME ENGINE) */ --color-accent: #C9A227; } /* ── BRIMSTONE THEME — Rapture: Hell — near-black, red as trim only ───────────── The dark twin of empyrean. Base surfaces are neutral near-black — NOT a red flood. Molten red/ember appears only as hairline borders, glow, and danger accents (THEME ENGINE section). */ :root[data-theme="brimstone"] { /* Base surfaces — near-black, neutral (not red-washed) */ --color-bg: #0B0B0D; --color-surface: #131315; --color-surface-raised: #1B1B1E; /* "Ink" family */ --color-ink: #08080A; --color-ink-mid: #131315; --color-ink-soft: #262629; /* "Gold" family repurposed as ember trim */ --color-gold: #A82F12; --color-gold-dark: #6E1E0B; --color-gold-light: #F2D9C8; /* Action — deep blood-ember fill */ --color-coral: #8A2A12; --color-coral-hover: #A83A1C; --color-coral-light: #C97452; /* Accent blue — cool smoke, contrast against the warm embers */ --color-blue: #6E7A8C; --color-blue-light: #93A0B0; /* Royal — corruption violet */ --color-royal: #6E2E73; --color-royal-light: #9B6BA0; /* Semantic */ --color-success: #3E7A52; --color-danger: #FF5A2E; --color-muted: #6E5048; --color-muted-dark: #4A342E; /* Text — warm ash, never flat grey, always readable on near-black */ --color-text-primary: #E8DCD2; --color-text-secondary: #8A6858; --color-text-on-ink: #F2D9C8; --color-text-muted: #6E5C54; /* Borders */ --color-border: #A82F12; --color-border-ink: #262629; --color-border-light: rgba(168, 47, 18, 0.18); --color-scrim: #000000; --color-kw-attack: #FF6A3A; --color-kw-shield: #7A8A9C; --color-kw-heal: #5FA878; --color-kw-draw: #C97452; /* Static accent — molten ember, used for the danger glow only (THEME ENGINE) */ --color-accent: #A82F12; } /* ── CYBERPUNK THEME — HUD/Grid, the new default ──────────────────────────────── Neon amber / magenta / cyan / violet on a deep blue-black grid. The flagship theme, so its accents run through the app more than the restrained mono edge-glow does — see the CYBERPUNK ENGINE section below for the grid backdrop, scanline overlay, HUD corner brackets, chromatic title text, and monospace readouts layered on top of these tokens. */ :root[data-theme="cyberpunk"] { /* Base surfaces — deep blue-black */ --color-bg: #050810; --color-surface: #0D1420; --color-surface-raised: #131C2E; /* "Ink" family */ --color-ink: #040610; --color-ink-mid: #0D1420; --color-ink-soft: #1A2740; /* "Gold" family — HUD amber (readouts, labels, currency) */ --color-gold: #FFD84A; --color-gold-dark: #C9A825; --color-gold-light: #FFF0A8; /* Action — neon magenta */ --color-coral: #FF2E88; --color-coral-hover: #FF5AA0; --color-coral-light: #FF9AC4; /* Accent blue — neon cyan */ --color-blue: #2EE6E6; --color-blue-light: #7FF5F5; /* Royal — neon violet */ --color-royal: #9D4EFF; --color-royal-light: #C89DFF; /* Semantic */ --color-success: #2EE68F; --color-danger: #FF4A4A; --color-muted: #52618A; --color-muted-dark: #384766; /* Text */ --color-text-primary: #DCE8F5; --color-text-secondary: #7E93B8; --color-text-on-ink: #F0F4FF; --color-text-muted: #52618A; /* Borders */ --color-border: #2EE6E6; --color-border-ink: #1A2740; --color-border-light: rgba(46, 230, 230, 0.18); --color-scrim: #000000; --color-kw-attack: #FF6A6A; --color-kw-shield: #7FF5F5; --color-kw-heal: #6FE6A8; --color-kw-draw: #FFD84A; /* Static accent — neon magenta, feeds the HUD glow (THEME ENGINE) */ --color-accent: #FF2E88; } /* ── THEME-INDEPENDENT TOKENS ─────────────────────────────────────────────── */ :root { /* Card effect palette — attack / shield / heal / draw. Single source of truth for effect colours used in power curves, card frames, and battle animations. */ --color-effect-attack: #C4513A; --color-effect-shield: #4A9FD4; --color-effect-heal: #5DCAA5; --color-effect-draw: #7F77DD; /* Fixed parchment for accent panels that must READ AS PARCHMENT regardless of the active theme (e.g. the season pass panel, which sits on the dark season screen and is intentionally a warm light card). --color-surface is theme-dependent (dark under the season/mono themes), so it can't be used for a deliberately-light accent. */ --color-panel-parchment: #E8C99A; --color-panel-parchment-edge: #8B6A3E; /* Blackjack tabletop — deep royal-purple felt + readable result text on it. The felt is a darker royal than --color-royal (which is periwinkle); the result colors are lightened success/danger so they read on the dark felt. */ --color-felt: #3C3489; /* felt centre (radial light) */ --color-felt-deep: #26215C; /* felt edge (radial dark) */ --color-card-back: #7F1818; /* playing-card back red */ --color-card-back-alt: #641313; /* card-back stripe */ --color-win-on-dark: #7BE0B0; /* win text on felt */ --color-lose-on-dark: #F0997B; /* loss text on felt */ /* Text shown on top of darkened banner art (pack banner). Light/cream so it stays legible over any series image. */ --color-on-art: #FFFFFF; --color-on-art-muted: #F2DFC0; /* Mod zone — rose/crimson, used ONLY for the mod board + its access bubble so the mod area reads as a distinct, gated space (not normal player UI). */ --color-mod: #B03A5B; /* mod accent — bubble, banner, active states */ --color-mod-light: #E88BA3; /* mod accent light — reply counts on dark */ --color-mod-dark: #7D2942; /* mod accent dark — banner gradient end */ /* On-ink panel surface used by the deck builder (formerly an undefined-var fallback — same value in every theme) */ --color-ink-light: #2A2438; /* ── PAPER TEXTURE ────────────────────────────────────────────────────────── SVG noise pattern embedded as data URI. Applied as a pseudo-element overlay on parchment surfaces at low opacity to simulate paper grain. Usage: add class .textured to any parchment surface. ──────────────────────────────────────────────────────────────────────────── */ --texture-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); /* ── SPACING ─────────────────────────────────────────────────────────────── */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 0.75rem; /* 12px */ --space-lg: 1rem; /* 16px */ --space-xl: 1.5rem; /* 24px */ --space-2xl: 2rem; /* 32px */ --space-3xl: 3rem; /* 48px */ /* ── BORDER RADIUS ────────────────────────────────────────────────────────── */ --radius-sm: 6px; /* small elements — badges, pills */ --radius-md: 10px; /* stat cards, pack banner, inputs */ --radius-lg: 14px; /* panels, overlays, large cards */ --radius-xl: 20px; /* modal, phone shell */ --radius-full: 9999px; /* pills, nav badges */ --radius-none: 0; /* sharp — match button, action strips */ /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */ --font-size-xs: 0.6875rem; /* 11px — labels, badges */ --font-size-sm: 0.75rem; /* 12px — secondary text */ --font-size-md: 0.875rem; /* 14px — body */ --font-size-base: 1rem; /* 16px — default */ --font-size-lg: 1.125rem; /* 18px — subheadings */ --font-size-xl: 1.25rem; /* 20px — headings */ --font-size-2xl: 1.5rem; /* 24px — large headings */ --font-size-3xl: 2rem; /* 32px — display */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-loose: 1.7; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; --letter-spacing-wider: 0.08em; /* ── TRANSITIONS ─────────────────────────────────────────────────────────── */ --duration-fast: 100ms; --duration-normal: 175ms; /* standard interaction feedback */ --duration-slow: 250ms; /* screen transitions, overlays */ --duration-slower: 350ms; /* larger layout changes */ --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Z-INDEX SCALE ─────────────────────────────────────────────────────────── Audit this table before adding any new z-index value. Never use a raw number — always reference a variable. ──────────────────────────────────────────────────────────────────────────── */ --z-base: 0; /* normal document flow */ --z-card: 10; /* card elements in hand and battlefield */ --z-hud: 20; /* match HUD — HP bars, timer, score */ --z-anim: 50; /* animation overlays — fireball, slash etc */ /* +8 heal glow (behind all other anim elements) */ /* +10 flying card silhouette */ /* +11 impact flash */ /* +12 particles, shield rings, draw card */ /* +15 projectile (topmost anim element) */ --z-banner: 250; /* challenge / invite banners — above modals (200), below toast (300) so a time-sensitive incoming challenge is never hidden behind an open modal */ --z-overlay: 90; /* disconnect, waiting, round result overlays */ --z-nav: 100; /* bottom nav — above page overlays (leaderboard) but below modals/sheets */ --z-modal: 200; /* modal dialogs — above all page overlays */ --z-toast: 300; /* toast notifications — always on top */ --z-reveal: 400; /* cosmic pack-reveal takeover — full-screen moment above everything, so nothing (even a toast) covers it */ /* ── LAYOUT ──────────────────────────────────────────────────────────────── */ --nav-height: 56px; --header-height: 52px; --max-width: 480px; /* max app width on wide screens */ --card-width: 120px; /* standard card width in hand */ --card-aspect: calc(120px * 5 / 3); /* 3:5 portrait ratio */ } /* ── THEME ENGINE — mono accent cycle + edge glow ──────────────────────────────── The mono theme's signature: a slowly cycling accent rendered ONLY as an edge glow on key surfaces. Registered as a real property so the keyframe animation interpolates smoothly; everything reads it through var(--color-accent). 8s per stop, 24s full cycle (mockup timing). */ @property --color-accent { syntax: ''; inherits: true; initial-value: #EF9F27; } @keyframes cc-accent-cycle { 0% { --color-accent: #EF9F27; } /* amber */ 33.33% { --color-accent: #E24B4A; } /* crimson */ 66.66% { --color-accent: #9F77DD; } /* violet */ 100% { --color-accent: #EF9F27; } } :root[data-theme="mono"] { animation: cc-accent-cycle 24s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { /* static amber accent — the mono block's --color-accent fallback applies */ :root[data-theme="mono"] { animation: none; } }