/* ============================================================ THAUMATURGIS LIGHT THEME (v3 — comprehensive, hand-tuned) Architecture: - Page backgrounds become warm parchment (#f0e4c8) - Cards become cream (#fbf3e0) with tan borders (#c8b890) - Headers/heroes KEEP their dark dramatic look (they often have background images) but text stays light on them - Text on light surfaces: deep brown (#2c1810 primary, #5d4e37 secondary, #7a6a4f muted) - Accent colors (purples, golds, blues) preserved — they read well on both dark and parchment Loaded LAST in , so its [data-theme="light"] selectors beat the original rules in the cascade. ============================================================ */ /* ============================================================ 1. CSS VARIABLES — override the design tokens ============================================================ */ [data-theme="light"] { color-scheme: light; --background-dark: #f0e4c8; --background-medium: #fbf3e0; --background-light-dark: #e8dcc0; --surface-color: #fbf3e0; --border-color: #c8b890; --text-primary: #2c1810; --text-secondary: #5d4e37; --text-muted: #7a6a4f; --background-light: #faf3e2; --background-white: #ffffff; --text-dark: #2c1810; --text-medium: #3d2814; --text-light: #5d4e37; } /* ============================================================ 2. BODY / PAGE CONTAINERS ============================================================ */ [data-theme="light"] body, [data-theme="light"] body.region-page, [data-theme="light"] body.region-page main { background-color: #f0e4c8; color: #2c1810; } /* Class-style page bodies (witch, psion, pugilist, etc.) */ [data-theme="light"] body.pugilist-style, [data-theme="light"] body.shaman-style, [data-theme="light"] body.witch-style, [data-theme="light"] body.sant-rakshak-style, [data-theme="light"] body.psion-style, [data-theme="light"] body.inventor-style, [data-theme="light"] body.wizard-style, [data-theme="light"] body.scholar-style { background-color: #f0e4c8; color: #2c1810; } /* Page-content paragraph defaults — these get a warm brown */ [data-theme="light"] body p, [data-theme="light"] body li, [data-theme="light"] body main p, [data-theme="light"] body main li { color: #2c1810; } /* ============================================================ 3. HEADER & HEROES — KEEP DARK (they're dramatic brand elements) ============================================================ */ /* The main-header gradient is kept; text on it stays light. .main-header itself is in our skip list so it isn't auto-flipped. */ /* Region hero sections have background images and dark overlays — keep them visually dark, just ensure text reads. */ [data-theme="light"] .region-hero, [data-theme="light"] .page-hero, [data-theme="light"] .npc-hero, [data-theme="light"] .class-hero, [data-theme="light"] .hero-section { color: #f8eed8; } [data-theme="light"] .region-hero h1, [data-theme="light"] .page-hero h1, [data-theme="light"] .npc-hero h1, [data-theme="light"] .class-hero h1, [data-theme="light"] .hero-section h1, [data-theme="light"] .region-hero .subtitle, [data-theme="light"] .region-hero .tagline, [data-theme="light"] .page-hero .lead, [data-theme="light"] .npc-hero .lead { color: #f8eed8; } /* ============================================================ 4. GENERIC CARDS ============================================================ */ [data-theme="light"] .card { background: #fbf3e0; color: #2c1810; border-top-color: var(--accent-arcane); box-shadow: 0 4px 15px rgba(95, 70, 40, 0.12); } [data-theme="light"] .card h2, [data-theme="light"] .card h3 { color: #2c1810; border-bottom-color: var(--accent-arcane-bright); } [data-theme="light"] .card p, [data-theme="light"] .card li { color: #2c1810; } /* ============================================================ 5. REGION PAGE CARDS ============================================================ */ [data-theme="light"] .fact-card { background: #fbf3e0; border: 1px solid #c8b890; } [data-theme="light"] .fact-card .label { color: #8b5a96; } [data-theme="light"] .fact-card .value { color: #2c1810; } [data-theme="light"] .settlement-card { background: #fbf3e0; border: 1px solid #c8b890; border-left: 4px solid var(--accent-arcane, #9b59b6); box-shadow: 0 2px 8px rgba(95, 70, 40, 0.08); } [data-theme="light"] .settlement-card h3 { color: #2c1810; } [data-theme="light"] .settlement-card .settlement-type { color: #8b5a96; } [data-theme="light"] .settlement-card .settlement-stats { color: #5d4e37; } [data-theme="light"] .settlement-card p { color: #2c1810; } [data-theme="light"] .species-card { background: #fbf3e0; border: 1px solid #c8b890; box-shadow: 0 2px 8px rgba(95, 70, 40, 0.08); } [data-theme="light"] .species-card h4 { color: #8b5a96; } [data-theme="light"] .species-card p { color: #5d4e37; } [data-theme="light"] .region-card { background: #fbf3e0; border: 1px solid #c8b890; color: #2c1810; box-shadow: 0 2px 8px rgba(95, 70, 40, 0.08); } [data-theme="light"] .region-card:hover { border-color: var(--accent-arcane, #9b59b6); box-shadow: 0 8px 24px rgba(95, 70, 40, 0.18); } [data-theme="light"] .region-card h3, [data-theme="light"] .region-card-body h3 { color: #2c1810; } [data-theme="light"] .region-card .card-subtitle, [data-theme="light"] .region-card-body .sub { color: #8b5a96; } [data-theme="light"] .region-card p, [data-theme="light"] .region-card-body p { color: #5d4e37; } /* ============================================================ 6. CLASS PAGE CARDS & SECTIONS ============================================================ */ [data-theme="light"] .class-card { background: #fbf3e0; border: 1px solid #c8b890; box-shadow: 0 2px 8px rgba(95, 70, 40, 0.08); } [data-theme="light"] .class-card:hover { border-color: rgba(139, 92, 246, 0.55); box-shadow: 0 8px 24px rgba(95, 70, 40, 0.2), 0 0 18px rgba(139, 92, 246, 0.1); } [data-theme="light"] .class-card-img { background: linear-gradient(135deg, #e8dcc0, #d9c9a8); } [data-theme="light"] .class-card-title { color: #2c1810; } [data-theme="light"] .class-card-stats { color: #5d4e37; } [data-theme="light"] .class-card-stats strong { color: #2c1810; } [data-theme="light"] .class-card-desc { color: #2c1810; } [data-theme="light"] .class-card-subclasses { color: #7a6a4f; } [data-theme="light"] .class-card-subclasses span { color: #5d4e37; } [data-theme="light"] .class-card-note { color: #b07a14; } [data-theme="light"] .class-card-note.resilient { color: #1a7547; } [data-theme="light"] .class-card-note.immune { color: #1e4d8b; } /* Path cards (subclass paths on class pages) */ [data-theme="light"] .path-card { background: #fbf3e0; border-left: 6px solid var(--accent-arcane, #9b59b6); box-shadow: 0 2px 8px rgba(95, 70, 40, 0.08); } [data-theme="light"] .path-card h3 { color: #6d3f8a; } [data-theme="light"] .path-card h4 { color: #2c1810; } [data-theme="light"] .path-card p, [data-theme="light"] .path-card .subclass-description, [data-theme="light"] .path-card .subclass-description p { color: #2c1810; } [data-theme="light"] .path-card .source-note { color: #7a6a4f; } [data-theme="light"] .path-card .thaumaturgis-note { background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.08)); color: #4a3a78; border-left-color: #8b5cf6; } /* Class-specific path card accents */ [data-theme="light"] .pugilist-style .path-card h3 { color: #a83232; } [data-theme="light"] .shaman-style .path-card h3 { color: #2e6f43; } [data-theme="light"] .witch-style .path-card h3 { color: #6d3f8a; } [data-theme="light"] .sant-rakshak-style .path-card h3 { color: #a06a14; } [data-theme="light"] .pugilist-style .path-card .thaumaturgis-note { background: linear-gradient(135deg, rgba(229, 62, 62, 0.1), rgba(142, 68, 173, 0.08)); color: #8b3a3a; } /* Subclass features */ [data-theme="light"] .subclass-feature { background: #f5ecd3; border-left: 3px solid #4fd1c5; } [data-theme="light"] .subclass-feature .feature-level { color: #5d4e37; } [data-theme="light"] .subclass-feature .feature-description, [data-theme="light"] .subclass-feature .feature-description li, [data-theme="light"] .subclass-feature .feature-description p { color: #2c1810; } [data-theme="light"] .subclass-features { border-top: 1px solid #c8b890; } [data-theme="light"] .subclass-intro { color: #5d4e37; } /* Feature blocks, quick-ref, famous-figures */ [data-theme="light"] .feature-block, [data-theme="light"] .quick-ref-item, [data-theme="light"] .famous-figures, [data-theme="light"] .lore-section .famous-figures { background: #fbf3e0; border: 1px solid #c8b890; color: #2c1810; box-shadow: 0 2px 8px rgba(95, 70, 40, 0.08); } [data-theme="light"] .feature-block h3, [data-theme="light"] .feature-block h4, [data-theme="light"] .quick-ref-item h3, [data-theme="light"] .quick-ref-item h4, [data-theme="light"] .famous-figures h3, [data-theme="light"] .famous-figures h4 { color: #2c1810; } [data-theme="light"] .feature-block p, [data-theme="light"] .feature-block li, [data-theme="light"] .quick-ref-item p, [data-theme="light"] .quick-ref-item li, [data-theme="light"] .famous-figures p, [data-theme="light"] .famous-figures li, [data-theme="light"] .lore-section .regional-list li { color: #2c1810; } /* Class quote box */ [data-theme="light"] .class-quote { background: #f5ecd3; color: #2c1810; border-left: 4px solid var(--accent-arcane, #9b59b6); } /* Class progression table */ [data-theme="light"] .class-table { background: #fbf3e0; color: #2c1810; } [data-theme="light"] .class-table thead, [data-theme="light"] .class-table th { background: #e8dcc0; color: #2c1810; } [data-theme="light"] .class-table tr { border-color: #c8b890; } [data-theme="light"] .class-table tr:hover { background: #f5ecd3; } [data-theme="light"] .class-table td { color: #2c1810; border-color: #d9c9a8; } /* Error message blocks */ [data-theme="light"] .error-message { background: #faecec; color: #8a2424; border-color: #d99898; } [data-theme="light"] .error-message p { color: #8a2424; } /* ============================================================ 7. GALLERY ============================================================ */ [data-theme="light"] .gallery-card { background: #fbf3e0; border: 1px solid #c8b890; box-shadow: 0 2px 8px rgba(95, 70, 40, 0.1); } [data-theme="light"] .gallery-card:hover { border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 12px 30px rgba(95, 70, 40, 0.18); } [data-theme="light"] .gallery-card-info h4 { color: #2c1810; } [data-theme="light"] .card-tag { background: rgba(95, 70, 40, 0.1); color: #5d4e37; } [data-theme="light"] .card-tag.race { background: rgba(245, 158, 11, 0.18); color: #8a5a05; } [data-theme="light"] .card-tag.gender-m { background: rgba(59, 130, 246, 0.18); color: #1e4d8b; } [data-theme="light"] .card-tag.gender-f { background: rgba(236, 72, 153, 0.18); color: #a52269; } [data-theme="light"] .card-tag.animated { background: rgba(168, 85, 247, 0.2); color: #6d3f8a; } [data-theme="light"] .gallery-item .caption { background: rgba(95, 70, 40, 0.85); color: #f8eed8; } /* Lightbox keeps dark — it's an overlay */ [data-theme="light"] .lightbox-overlay { background: rgba(20, 14, 8, 0.92); } [data-theme="light"] .lightbox-container { background: #2c1810; color: #f8eed8; } [data-theme="light"] .lightbox-nav { background: rgba(0, 0, 0, 0.4); color: #f8eed8; } /* ============================================================ 8. NPC GENERATOR ============================================================ */ [data-theme="light"] .npc-card { background: #fbf3e0; border: 1px solid #c8b890; box-shadow: 0 2px 8px rgba(95, 70, 40, 0.08); } [data-theme="light"] .npc-card:hover { border-color: rgba(139, 92, 246, 0.5); } [data-theme="light"] .npc-card-header { background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(59, 130, 246, 0.06)); border-bottom: 1px solid #d9c9a8; } [data-theme="light"] .npc-name { color: #2c1810; } [data-theme="light"] .npc-title, [data-theme="light"] .npc-section p, [data-theme="light"] .npc-list li { color: #2c1810; } [data-theme="light"] .npc-section p strong { color: #2c1810; } [data-theme="light"] .npc-faction-desc { color: #5d4e37 !important; } [data-theme="light"] .controls-panel { background: #fbf3e0; border: 1px solid #c8b890; } [data-theme="light"] .controls-panel h2 { color: #2c1810; } [data-theme="light"] .field label { color: #5d4e37; } [data-theme="light"] .field select, [data-theme="light"] .field input[type="text"], [data-theme="light"] .field input[type="number"] { background: #faf3e2; border: 1px solid #c8b890; color: #2c1810; } [data-theme="light"] .empty-state, [data-theme="light"] .empty-state p { color: #5d4e37; } [data-theme="light"] .empty-state h2 { color: #2c1810; } [data-theme="light"] .empty-state i { color: #c8b890; } [data-theme="light"] .results-header { color: #5d4e37; } [data-theme="light"] .hook-section p { background: #f5ecd3; color: #2c1810; } [data-theme="light"] .portrait-lightbox { background: rgba(20, 14, 8, 0.9); } /* ============================================================ 9. CHARACTER CREATOR (cc-*) ============================================================ */ [data-theme="light"] { --cc-bg-deep: #e8dcc0; --cc-bg-panel: #fbf3e0; --cc-bg-card: #fbf3e0; --cc-bg-card-hover: #f5ecd3; --cc-bg-input: #faf3e2; --cc-bg: #f0e4c8; --cc-border: #c8b890; --cc-text: #2c1810; --cc-text-muted: #5d4e37; --cc-text-dim: #8a7960; } [data-theme="light"] .cc-card, [data-theme="light"] .cc-subclass-card, [data-theme="light"] .cc-feat-card { background: #fbf3e0; border-color: #c8b890; box-shadow: 0 2px 8px rgba(95, 70, 40, 0.06); } [data-theme="light"] .cc-card:hover, [data-theme="light"] .cc-subclass-card:hover, [data-theme="light"] .cc-feat-card:hover { background: #f5ecd3; border-color: rgba(139, 92, 246, 0.4); } [data-theme="light"] .cc-card.selected, [data-theme="light"] .cc-subclass-card.selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(34, 211, 238, 0.05)); border-color: var(--cc-accent); } [data-theme="light"] .cc-feat-card.selected { background: rgba(240, 180, 41, 0.12); border-color: var(--cc-gold); } [data-theme="light"] .cc-card-title { color: #2c1810; } [data-theme="light"] .cc-card-subtitle, [data-theme="light"] .cc-card-desc { color: #5d4e37; } [data-theme="light"] .cc-toast { background: #2c1810; color: #f8eed8; } /* ============================================================ 10. CHARACTER DISPLAY / SHEET / FOUNDRY ============================================================ */ [data-theme="light"] .character-card { background: #fbf3e0; border: 1px solid #c8b890; box-shadow: 0 2px 8px rgba(95, 70, 40, 0.1); } [data-theme="light"] .item-card { background: #f5ecd3; color: #2c1810; } [data-theme="light"] .item-card.prepared { background: #e0eef5; } [data-theme="light"] .item-card.equipped { background: #e3f0e3; } [data-theme="light"] .stat-badge { background: #f5ecd3; color: #2c1810; } [data-theme="light"] .character-actions { background: #f5ecd3; border-top: 1px solid #d9c9a8; } [data-theme="light"] .btn-icon { background: #fbf3e0; border: 1px solid #d9c9a8; color: #5d4e37; } [data-theme="light"] .sheet-header { border-bottom: 2px solid #c8b890; } [data-theme="light"] .vital-box { background: #fbf3e0; border: 2px solid #c8b890; } /* Foundry sheet — keep its dark parchment-rune aesthetic since it's a distinct themed component. Only adjust for legibility. */ [data-theme="light"] .foundry-feature-item, [data-theme="light"] .foundry-inventory-item, [data-theme="light"] .foundry-spell-item, [data-theme="light"] .foundry-ability-box, [data-theme="light"] .skill-item, [data-theme="light"] .save-item { background: #f5ecd3; border-color: #c8b890; color: #2c1810; } [data-theme="light"] .foundry-feature-item:hover, [data-theme="light"] .foundry-inventory-item:hover, [data-theme="light"] .foundry-spell-item:hover, [data-theme="light"] .skill-item:hover { background: #ede0c0; } [data-theme="light"] .foundry-header, [data-theme="light"] .foundry-vitals-bar, [data-theme="light"] .foundry-tabs { background: #e8dcc0; border-color: #c8b890; color: #2c1810; } [data-theme="light"] .foundry-tab { color: #5d4e37; } [data-theme="light"] .foundry-tab.active { background: #fbf3e0; color: #2c1810; } [data-theme="light"] .features-header-row, [data-theme="light"] .foundry-feature-row, [data-theme="light"] .foundry-spell-row, [data-theme="light"] .spell-level-header, [data-theme="light"] .spell-level-header-row { background: #e8dcc0; color: #2c1810; border-color: #c8b890; } [data-theme="light"] .foundry-feature-row:hover, [data-theme="light"] .foundry-spell-row:hover { background: #ede0c0; } [data-theme="light"] .foundry-abilities-row { background: #f5ecd3; } [data-theme="light"] .hp-bar { background: #e0d2b0; } [data-theme="light"] .inventory-category h4 { background: #e8dcc0; color: #2c1810; } [data-theme="light"] #character-modal, [data-theme="light"] #character-modal.foundry-style { background: rgba(20, 14, 8, 0.85); } [data-theme="light"] #character-modal.foundry-style .modal-content { background: #fbf3e0; color: #2c1810; } [data-theme="light"] .upload-hint { background: #f5ecd3; color: #5d4e37; } [data-theme="light"] .upload-hint:hover { background: #ede0c0; } /* ============================================================ 11. CLASSES INDEX / REGIONS INDEX ============================================================ */ [data-theme="light"] .category-header.guide { background: linear-gradient(135deg, #e8dcc0, #d9c9a8); color: #2c1810; } [data-theme="light"] .legend-panel { background: #fbf3e0; border: 1px solid #c8b890; color: #2c1810; } [data-theme="light"] .featured-regions { background: #f5ecd3; } /* Alternating section on the home page (Threats) — cream, so the light theme keeps the light/lighter rhythm the white inline bg had */ [data-theme="light"] .featured-regions--alt { background: #fbf3e0; } /* Readability fix 2026-07-18: this was `background: #f5ecd3`, but the showcase's content is white text with dark text-shadows over a dark image overlay — parchment behind it made it unreadable in light mode. Keep the section dark in both themes (hero-style brand element); only the background-color longhand is set so the image + overlay from index-page.css still apply. */ [data-theme="light"] .visual-showcase { background-color: #14181f; } /* ...and since the section stays dark, keep its text light — the generic `[data-theme="light"] body p` brown would otherwise win the cascade. */ [data-theme="light"] .visual-showcase .showcase-content, [data-theme="light"] .visual-showcase .showcase-content h2, [data-theme="light"] .visual-showcase .showcase-content p { color: #f0e6d2; } /* Ghost-style .cta-secondary buttons (white text, white border) sit on parchment .featured-regions sections in light mode — restyle them as cream buttons with dark text there. Hero/final-cta instances keep the white-glass look (those sections stay dark/purple). */ [data-theme="light"] .featured-regions .cta-button.cta-secondary { background: #fbf3e0; color: #2c1810; border: 2px solid #b08410; backdrop-filter: none; } [data-theme="light"] .featured-regions .cta-button.cta-secondary:hover { background: #f5ecd3; color: #2c1810; } [data-theme="light"] .region-card-overlay { background: linear-gradient(to top, rgba(20, 14, 8, 0.92), transparent); color: #f8eed8; } /* Contrast fix 2026-07-05: earlier rule `.region-card p { color: #5d4e37 }` was landing dark-brown text on the overlay's near-black gradient (fails WCAG). Restore cream inside the overlay. Ratio #f8eed8 on #141210 ≈ 15.7:1. */ [data-theme="light"] .region-card-overlay p, [data-theme="light"] .region-card-overlay h3, [data-theme="light"] .region-card-overlay .region-badge { color: #f8eed8 !important; } /* ============================================================ 12. PROFILE ============================================================ */ [data-theme="light"] .characters-section { background: #fbf3e0; border: 1px solid #c8b890; } [data-theme="light"] .profile-header { background: linear-gradient(135deg, #e8dcc0, #d9c9a8); color: #2c1810; } [data-theme="light"] .modal { background: rgba(20, 14, 8, 0.85); } /* ============================================================ 13. AUTH / LOGIN / REGISTER ============================================================ */ [data-theme="light"] .auth-container { background: #fbf3e0; color: #2c1810; box-shadow: 0 8px 24px rgba(95, 70, 40, 0.15); } [data-theme="light"] .alert-success { background: #e3f0e3; color: #2e6f43; border-color: #99c9a3; } /* ============================================================ 14. TOOLTIPS / LORE NOTES ============================================================ */ [data-theme="light"] .lore-tooltip { background: #2c1810; color: #f8eed8; border: 1px solid #c8b890; } [data-theme="light"] .lore-note { background: rgba(139, 92, 246, 0.1); color: #4a3a78; border-left: 3px solid #8b5cf6; } [data-theme="light"] .map-tooltip { background: #2c1810; color: #f8eed8; border-color: #c8b890; } [data-theme="light"] .spell-icon { background: #f5ecd3; color: #2c1810; } /* ============================================================ 15. DICE ROLLER (overlay — keep dark, it's a dramatic moment) ============================================================ */ [data-theme="light"] #dice-overlay { background: rgba(20, 14, 8, 0.85); } [data-theme="light"] .dice-loading, [data-theme="light"] .dice-result-bar, [data-theme="light"] .dice-ability-banner { background: #2c1810; color: #f8eed8; } /* ============================================================ 16. FOOTER ============================================================ */ [data-theme="light"] .main-footer, [data-theme="light"] footer.main-footer { background: linear-gradient(135deg, #2c1810 0%, #3d2814 100%); color: #f8eed8; } [data-theme="light"] .main-footer a, [data-theme="light"] .main-footer p { color: #f8eed8; } [data-theme="light"] .main-footer a:hover { color: #f5c842; } /* ============================================================ 17. MISC TEXT/CONTENT ============================================================ */ [data-theme="light"] details.region-collapse { background: #fbf3e0; border: 1px solid #c8b890; color: #2c1810; } [data-theme="light"] details.region-collapse summary { color: #2c1810; } [data-theme="light"] .other-regions a { background: #fbf3e0; border: 1px solid #c8b890; color: #2c1810; } [data-theme="light"] .other-regions a:hover { background: #f5ecd3; } [data-theme="light"] tr:hover { background: #f5ecd3; } /* Inputs/selects across the board */ [data-theme="light"] input[type="text"], [data-theme="light"] input[type="email"], [data-theme="light"] input[type="password"], [data-theme="light"] input[type="number"], [data-theme="light"] input[type="search"], [data-theme="light"] textarea, [data-theme="light"] select { background: #faf3e2; border: 1px solid #c8b890; color: #2c1810; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #8a7960; } /* Generic section/aside/article fallbacks */ [data-theme="light"] section, [data-theme="light"] article, [data-theme="light"] aside { color: inherit; } /* ============================================================ 18. SMOOTH TRANSITION ============================================================ */ body, .card, .fact-card, .settlement-card, .species-card, .region-card, .class-card, .path-card, .gallery-card, .npc-card, .character-card, .cc-card, .feature-block, .quick-ref-item { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* ============================================================ COMPREHENSIVE INLINE-STYLE OVERRIDES Class pages, factions, and other pages embed large inline