/* ============================================================ RPGadget — Alternate theme token sets (held ready, not rendered). Activate by setting data-theme on or any subtree root: Each theme overrides the base ramps AND the semantic layer, so every component reskins with no markup changes. Theme display fonts have commented @imports in tokens/fonts.css — uncomment when activating a theme. ============================================================ */ /* ---------- SciFi — holographic cyan on deep space ---------- */ [data-theme="scifi"] { --ink-900: #030609; --ink-800: #050A12; --ink-700: #0B1522; --ink-600: #1C3040; --ink-500: #7F98A8; --marble-050: #12202E; --marble-100: #0D1826; --marble-200: #0A1420; --marble-300: #1E3346; --cream-100: #0E2230; --cream-200: #16303F; --gold-900: #06424B; --gold-800: #0E7C8C; --gold-600: #17A5B8; --gold-500: #29C6DC; --gold-400: #5FE0F0; --gold-300: #B4F3FB; --gold-200: #0F3540; --emerald-700: #0E7C57; --emerald-600: #14A874; --emerald-500: #2BD498; --emerald-300: #7FEFC8; --emerald-100: #0D2B22; --garnet-700: #8C2140; --garnet-600: #B92E52; --garnet-500: #E6486F; --garnet-100: #331019; --amber-600: #B87F17; --amber-500: #E0A62E; --amber-100: #33270D; --surface-panel-hi: var(--cream-100); --text-on-dark: #D8EEF5; --text-on-dark-muted: #7F98A8; --text-body: #D8EEF5; --text-muted: #7F98A8; --text-gold: var(--gold-400); --text-inverse: #030609; --on-accent: #041016; --border-light: #1E3346; --border-dark: #142434; --hover-on-dark: rgba(95, 224, 240, 0.06); --well-on-dark: rgba(0, 0, 0, 0.35); --shadow-panel: 0 1px 0 rgba(95,224,240,0.08) inset, 0 2px 8px rgba(0,0,0,0.5); --glow-gold: 0 0 0 1px var(--gold-500), 0 0 14px color-mix(in srgb, var(--gold-400) 55%, transparent); --focus-ring: color-mix(in srgb, var(--gold-400) 60%, transparent); --font-display: 'Orbitron', 'Eurostile', sans-serif; --font-serif: 'Exo 2', system-ui, sans-serif; --font-sans: 'Exo 2', system-ui, sans-serif; } /* ---------- DarkFantasy — ASH & BLOOD: cold gunmetal, blood red, verdigris ---------- decorators: cold stone/gunmetal, worn gothic edges, blood-red accents, sickly verdigris for occult states */ [data-theme="darkfantasy"] { --ink-900: #0A0C0E; --ink-800: #101214; --ink-700: #242A30; --ink-600: #3A424A; --ink-500: #7A828A; --marble-050: #242A30; --marble-100: #1A1E22; --marble-200: #14181C; --marble-300: #2E353C; --cream-100: #242A30; --cream-200: #2E353C; --gold-900: #4E1420; --gold-800: #6E1E2C; --gold-600: #8E2838; --gold-500: #A83244; --gold-400: #C84858; --gold-300: #E07480; --gold-200: #2A1418; --emerald-700: #2E5E52; --emerald-600: #3E7A6A; --emerald-500: #4E9585; --emerald-300: #8FBDB2; --emerald-100: #1B2E29; --garnet-700: #A83244; --garnet-600: #C84858; --garnet-500: #D4606E; --garnet-100: #33161A; --amber-600: #A99A3E; --amber-500: #CBB24A; --amber-100: #22262A; --text-on-dark: #D2D6DA; --text-on-dark-muted: #7A828A; --text-body: #D2D6DA; --text-muted: #7A828A; --text-gold: var(--gold-400); --text-inverse: #0A0C0E; --on-accent: #F2E6E8; --border-light: #2E353C; --border-dark: #14181C; --accent-soft: rgba(168, 50, 68, 0.15); --rule-gold-faint: rgba(210, 214, 218, 0.14); --hover-on-dark: rgba(200, 72, 88, 0.06); --well-on-dark: rgba(0, 0, 0, 0.42); --shadow-panel: 0 1px 0 rgba(210,214,218,0.04) inset, 0 3px 10px rgba(0,0,0,0.6); --glow-gold: 0 0 0 1px var(--gold-500), 0 0 10px rgba(168,50,68,0.45); --focus-ring: rgba(200, 72, 88, 0.55); --radius-xs: 2px; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --font-display: 'Pirata One', 'Cinzel', serif; --font-serif: 'Spectral', Georgia, serif; --font-sans: 'Spectral', Georgia, serif; } /* ---------- Bureaucratic — paper forms, red rubber-stamp headers ---------- */ [data-theme="bureaucratic"] { --ink-900: #26231E; --ink-800: #34302A; --ink-700: #45403A; --ink-600: #5C564E; --ink-500: #6E6A5E; --marble-050: #FCFBF7; --marble-100: #F7F5EF; --marble-200: #EFECE2; --marble-300: #D9D4C6; --cream-100: #FBF7EA; --cream-200: #EDE5CE; --gold-900: #661C15; --gold-800: #7E241D; --gold-600: #9C2F26; --gold-500: #B3372E; --gold-400: #D14A3E; --gold-300: #F2B8B0; --gold-200: #F8E3E0; --emerald-700: #2C5232; --emerald-600: #3A6B41; --emerald-500: #4E8656; --emerald-300: #9CC2A3; --emerald-100: #E3EEE5; --garnet-700: #6E1F1F; --garnet-600: #8A2A2A; --garnet-500: #B23A3A; --garnet-100: #F3DFDB; --amber-600: #8A5A1A; --amber-500: #A5691F; --amber-100: #F3E7CF; --text-on-dark: #F7F5EF; --text-on-dark-muted: #BDB8AA; --text-body: #26241F; --text-muted: #6E6A5E; --text-gold: var(--gold-600); --on-accent: #FCFBF7; --border-light: #D9D4C6; --border-dark: #45403A; --hover-on-dark: rgba(255, 255, 255, 0.05); --well-on-dark: rgba(0, 0, 0, 0.18); --shadow-panel: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(38,36,31,0.18); --glow-gold: 0 0 0 1px var(--gold-500), 0 0 0 3px var(--gold-200); --focus-ring: color-mix(in srgb, var(--gold-400) 50%, transparent); --font-display: 'Special Elite', 'Courier New', monospace; --font-serif: 'Source Serif 4', Georgia, serif; --font-sans: 'Public Sans', 'Raleway', sans-serif; --font-mono: 'Courier Prime', 'JetBrains Mono', monospace; } /* ---------- Cyberpunk — neon green on near-black (Shadowrun, Cyberpunk RED) ---------- decorators: scanlines, glitch flicker, faint matrix-rain overlay, neon glow on accents */ [data-theme="cyberpunk"] { --ink-900: #030504; --ink-800: #050806; --ink-700: #0C1712; --ink-600: #163024; --ink-500: #5A8A72; --marble-050: #0E1B15; --marble-100: #0A1410; --marble-200: #081009; --marble-300: #163024; --cream-100: #10201A; --cream-200: #1A3328; --gold-900: #006B40; --gold-800: #00B36B; --gold-600: #00D684; --gold-500: #00FF9C; --gold-400: #39FF14; --gold-300: #A8FFC9; --gold-200: #0C2B1E; --emerald-700: #24B30D; --emerald-600: #39FF14; --emerald-500: #6BFF4A; --emerald-300: #A8FF8C; --emerald-100: #12290C; --garnet-700: #B31C5C; --garnet-600: #FF2E88; --garnet-500: #FF5CA3; --garnet-100: #33101F; --amber-600: #C9B208; --amber-500: #F5D90A; --amber-100: #2E2A08; --text-on-dark: #C8FFE0; --text-on-dark-muted: #5A8A72; --text-body: #C8FFE0; --text-muted: #5A8A72; --text-gold: var(--gold-400); --text-inverse: #030504; --on-accent: #031007; --border-light: #163024; --border-dark: #0C1F17; --accent-soft: rgba(0, 255, 156, 0.12); --rule-gold-faint: rgba(0, 255, 156, 0.28); --hover-on-dark: rgba(0, 255, 156, 0.06); --well-on-dark: rgba(0, 0, 0, 0.4); --shadow-panel: 0 0 0 1px rgba(0,255,156,0.1) inset, 0 2px 10px rgba(0,0,0,0.6); --glow-gold: 0 0 0 1px var(--gold-500), 0 0 16px rgba(0,255,156,0.5); --focus-ring: rgba(57, 255, 20, 0.55); --radius-xs: 1px; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px; --font-display: 'Rajdhani', sans-serif; --font-serif: 'Rajdhani', sans-serif; --font-sans: 'Rajdhani', sans-serif; --font-mono: 'Share Tech Mono', 'JetBrains Mono', monospace; } /* ---------- HighFantasy — JEWEL: gold + emerald + garnet on parchment, jewel-green shell ---------- decorators: parchment panels on jewel-green shell, gold filigree, emerald/garnet accents, ember particles */ [data-theme="highfantasy"] { --ink-900: #081009; --ink-800: #0E1410; --ink-700: #16241C; --ink-600: #2A3E32; --ink-500: #556359; --marble-050: #F7F4EA; --marble-100: #EFEBDD; --marble-200: #E3DECB; --marble-300: #CBC9B2; --cream-100: #E6E2CF; --cream-200: #D6D2BB; --gold-900: #5C4400; --gold-800: #7A5A00; --gold-600: #A67C08; --gold-500: #C8960A; --gold-400: #E8B82A; --gold-300: #FFDF80; --gold-200: #F2E6BC; --emerald-700: #12421F; --emerald-600: #1B5E30; --emerald-500: #2D7A45; --emerald-300: #85B897; --emerald-100: #DCEAE0; --garnet-700: #5E1620; --garnet-600: #7A1F2B; --garnet-500: #9E3040; --garnet-100: #EDD8D4; --amber-600: #8F6423; --amber-500: #B07C2E; --amber-100: #F0E2C4; --text-body: #1F2A20; --text-muted: #556359; --text-on-dark: #EFEBDD; --text-on-dark-muted: #A8BCA8; --text-gold: var(--gold-800); --border-light: #CBC9B2; --border-dark: #16241C; --accent-soft: rgba(200, 150, 10, 0.15); --rule-gold-faint: rgba(200, 150, 10, 0.40); --radius-xs: 3px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --font-display: 'Cinzel Decorative', 'Cinzel', serif; --font-serif: 'EB Garamond', Georgia, serif; --font-sans: 'EB Garamond', Georgia, serif; } /* ---------- PulpNoir — MONOCHROME DECO: silver/charcoal + one gold accent ---------- decorators: cool silver-on-charcoal noir, hard art-deco geometric rules, single gold accent, film-grain vignette */ [data-theme="pulpnoir"] { --ink-900: #0C0E11; --ink-800: #14161A; --ink-700: #22262C; --ink-600: #3A4048; --ink-500: #8A9098; --marble-050: #2A2F36; --marble-100: #1E2228; --marble-200: #16191E; --marble-300: #343A42; --cream-100: #2A2F36; --cream-200: #363C44; --gold-900: #6B5000; --gold-800: #8B6A00; --gold-600: #A98618; --gold-500: #C9A227; --gold-400: #E0B84A; --gold-300: #F0D68A; --gold-200: #26262A; --emerald-700: #365E54; --emerald-600: #4A7A6E; --emerald-500: #5E9585; --emerald-300: #9CC0B6; --emerald-100: #1B2E29; --garnet-700: #6E2020; --garnet-600: #8B2E2E; --garnet-500: #A84444; --garnet-100: #33191A; --amber-600: #A98618; --amber-500: #C9A227; --amber-100: #26262A; --text-on-dark: #E6E8EA; --text-on-dark-muted: #8A9098; --text-body: #E6E8EA; --text-muted: #8A9098; --text-gold: var(--gold-400); --text-inverse: #0C0E11; --on-accent: #14161A; --border-light: #343A42; --border-dark: #16191E; --accent-soft: rgba(201, 162, 39, 0.14); --rule-gold-faint: rgba(230, 232, 234, 0.16); --hover-on-dark: rgba(230, 232, 234, 0.05); --well-on-dark: rgba(0, 0, 0, 0.4); --shadow-panel: 0 1px 0 rgba(230,232,234,0.05) inset, 0 3px 10px rgba(0,0,0,0.55); --glow-gold: 0 0 0 1px var(--gold-500), 0 0 8px rgba(201,162,39,0.35); --focus-ring: rgba(224, 184, 74, 0.5); --radius-xs: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --font-display: 'Poiret One', sans-serif; --font-serif: 'Crimson Pro', Georgia, serif; --font-sans: 'Crimson Pro', Georgia, serif; } /* ---------- Steampunk — TEAL & BRASS: verdigris Victorian + brass/copper ---------- decorators: deep verdigris-teal ground, brass frames, riveted panels, gear-cog corners, copper accents */ [data-theme="steampunk"] { --ink-900: #081212; --ink-800: #0E1A1A; --ink-700: #14282A; --ink-600: #2A4A4A; --ink-500: #9AA8A0; --marble-050: #1E3638; --marble-100: #14282A; --marble-200: #0E2022; --marble-300: #2A4A4A; --cream-100: #1E3638; --cream-200: #2A4648; --gold-900: #6B4420; --gold-800: #8B5A2B; --gold-600: #A96A2C; --gold-500: #CD7F32; --gold-400: #E0A050; --gold-300: #F0C888; --gold-200: #223432; --emerald-700: #3A7E6E; --emerald-600: #4FA890; --emerald-500: #6BBFA8; --emerald-300: #A6D8CC; --emerald-100: #16302C; --garnet-700: #822626; --garnet-600: #A83232; --garnet-500: #C44848; --garnet-100: #331818; --amber-600: #9C6E20; --amber-500: #C08A2A; --amber-100: #223432; --text-on-dark: #E8D8B8; --text-on-dark-muted: #9AA8A0; --text-body: #E8D8B8; --text-muted: #9AA8A0; --text-gold: var(--gold-400); --text-inverse: #081212; --on-accent: #0E1A1A; --border-light: #2A4A4A; --border-dark: #0E2022; --accent-soft: rgba(205, 127, 50, 0.16); --rule-gold-faint: rgba(205, 127, 50, 0.40); --hover-on-dark: rgba(224, 160, 80, 0.06); --well-on-dark: rgba(0, 0, 0, 0.35); --shadow-panel: 0 1px 0 rgba(240,200,136,0.06) inset, 0 3px 10px rgba(0,0,0,0.5); --glow-gold: 0 0 0 1px var(--gold-500), 0 0 10px rgba(205,127,50,0.4); --focus-ring: rgba(224, 160, 80, 0.55); --radius-xs: 3px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --font-display: 'Cinzel', serif; --font-serif: 'Spectral', Georgia, serif; --font-sans: 'Spectral', Georgia, serif; } /* ---------- PostApoc — CONCRETE & RADIATION: grey + toxic green + hazard orange ---------- decorators: cold concrete grey, rust/grime texture, torn edges, toxic-green readouts, hazard-orange stencils */ [data-theme="postapoc"] { --ink-900: #0E1012; --ink-800: #16181A; --ink-700: #202426; --ink-600: #3A4042; --ink-500: #86847A; --marble-050: #2C3134; --marble-100: #202426; --marble-200: #16191A; --marble-300: #3A4042; --cream-100: #2C3134; --cream-200: #383E40; --gold-900: #8A3714; --gold-800: #B84A20; --gold-600: #D95A2B; --gold-500: #FF6B35; --gold-400: #FF8C42; --gold-300: #FFC29E; --gold-200: #2A2E30; --emerald-700: #5E9E24; --emerald-600: #7FBF3F; --emerald-500: #9BD45E; --emerald-300: #C0E896; --emerald-100: #22300E; --garnet-700: #B3282F; --garnet-600: #E63946; --garnet-500: #F0616B; --garnet-100: #331114; --amber-600: #C9A208; --amber-500: #F0C419; --amber-100: #262A22; --text-on-dark: #D6D2C4; --text-on-dark-muted: #86847A; --text-body: #D6D2C4; --text-muted: #86847A; --text-gold: var(--gold-400); --text-inverse: #0E1012; --on-accent: #16181A; --border-light: #3A4042; --border-dark: #16191A; --accent-soft: rgba(255, 107, 53, 0.15); --rule-gold-faint: rgba(255, 107, 53, 0.30); --hover-on-dark: rgba(255, 140, 66, 0.06); --well-on-dark: rgba(0, 0, 0, 0.4); --shadow-panel: 0 1px 0 rgba(214,210,196,0.04) inset, 0 3px 10px rgba(0,0,0,0.55); --glow-gold: 0 0 0 1px var(--gold-500), 0 0 12px rgba(255,107,53,0.45); --focus-ring: rgba(255, 140, 66, 0.55); --radius-xs: 1px; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px; --font-display: 'Oswald', sans-serif; --font-serif: 'Barlow', system-ui, sans-serif; --font-sans: 'Barlow', system-ui, sans-serif; }