/* ========================================================================= App theming — accent palette × light/dark mode. How it works ------------ The element gets two data attributes set server-side by Layout: data-theme-accent="indigo" | "cyan" | "emerald" | "amber" | "rose" data-theme-mode ="light" | "dark" Token values are resolved by combining both attributes via the cascade. Every other stylesheet/markup should reference the tokens (var(--app-X)) instead of hard-coded hex so changing the accent ripples through the UI. --app-accent primary brand color (buttons, links, focus rings) --app-accent-deep darker variant (hover/active) --app-accent-soft tinted background (chips, hover bg) --app-accent-contrast text color sitting *on* an accent fill (usually #fff) --app-ink primary text --app-ink-soft secondary text --app-mute muted/tertiary text --app-fade disabled / placeholder --app-canvas page background --app-surface card / panel background --app-surface-2 alternate surface (hover, raised) --app-line border color --app-line-soft subtle line / divider --app-shadow-sm / --app-shadow-md drop shadow tokens ========================================================================= */ /* ---------- Defaults (Light + Indigo) ---------- */ :root { /* ---------- Brand typography ---------- --app-font-display Space Grotesk — headings, numbers, logo --app-font-ui Plus Jakarta Sans — body, UI, paragraphs Tabler's own font vars are overridden so every component inherits. */ --app-font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --app-font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --tblr-font-sans-serif: var(--app-font-ui); --tblr-body-font-family: var(--app-font-ui); /* ---------- Brand palette (Clash Scope) ---------- Hero gradient + reserved semantic colors. Accent tokens below are driven by the per-accent presets; these stay constant brand anchors. */ --app-gradient-brand: linear-gradient(135deg, #FF8A3D 0%, #FF5247 46%, #F0344F 100%); --app-coral: #FF5247; --app-coral-deep: #F0344F; --app-orange: #FF8A3D; /* Reserved for verified / actual / win states. */ --app-verified: #16B981; /* Surfaces / ink — light mode (brand canvas + ink) */ --app-canvas: #F4F5F8; --app-surface: #ffffff; --app-surface-2: #fafbff; --app-ink: #171520; --app-ink-soft: #475569; --app-mute: #64748b; --app-fade: #94a3b8; --app-line: #e6ebf2; --app-line-soft: #f1f5f9; --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05); --app-shadow-md: 0 8px 24px -12px rgba(15, 23, 42, .25); /* Accent — indigo default */ --app-accent: #4f46e5; --app-accent-deep: #3730a3; --app-accent-soft: #eef2ff; --app-accent-contrast: #ffffff; /* Text color over --app-accent-deep (button hover/active state). Most presets reuse --app-accent-contrast; presets where the deep variant has very different luminance (flame, amber, shades-of-gray) override this token to keep hover legible. */ --app-accent-deep-contrast: #ffffff; color-scheme: light; } /* ---------- Mode: Dark ------------------------------------------------ */ [data-theme-mode="dark"] { /* Base navy canvas */ --app-canvas: #090e17; /* Elevated surfaces */ --app-surface: #0f172a; --app-surface-2: #1e293b; --app-surface-3: #334155; /* Brightened text for legibility */ --app-ink: #f8fafc; --app-ink-soft: #e2e8f0; --app-mute: #cbd5e1; --app-fade: #94a3b8; /* Glassy borders */ --app-line: rgba(255, 255, 255, 0.08); --app-line-soft: rgba(255, 255, 255, 0.04); --app-shadow-sm: 0 2px 4px rgba(0, 0, 0, .4); --app-shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .6); /* Glassmorphism Navigation Bar */ .navbar { background: rgba(9, 14, 23, 0.75) !important; /* Translucent version of --app-canvas */ backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom-color: var(--app-line) !important; z-index: 1050 !important; } color-scheme: dark; } /* ---------- Accent presets — light mode ------------------------------- */ /* Default — Clash Scope brand. Coral hero with coral-deep hover. The accent→deep pair feeds the swatch + button gradient as coral→coral-deep, a slice of the full orange→coral-deep hero gradient (see --app-gradient-brand). White text rides on coral with strong contrast. This is the slug stored as the global default, so inheriting users land on the brand palette automatically. */ [data-theme-accent="default"] { --app-accent: #FF5247; --app-accent-deep: #F0344F; --app-accent-soft: #FFF0EE; --app-accent-contrast: #ffffff; } [data-theme-accent="cyan"] { --app-accent: #06b6d4; --app-accent-deep: #0e7490; --app-accent-soft: #ecfeff; } [data-theme-accent="emerald"] { --app-accent: #10b981; --app-accent-deep: #047857; --app-accent-soft: #ecfdf5; } [data-theme-accent="amber"] { --app-accent: #f59e0b; --app-accent-deep: #b45309; --app-accent-soft: #fef3c7; --app-accent-contrast: #1f2937; /* Dark brown hover needs light text — slate-on-brown is unreadable. */ --app-accent-deep-contrast: #ffffff; } [data-theme-accent="rose"] { --app-accent: #f43f5e; --app-accent-deep: #be123c; --app-accent-soft: #ffe4e6; } /* "Flame" intentionally maps --app-accent-deep to a warm yellow (not a darker red) so the gradient `linear-gradient(135deg, accent, accent-deep)` becomes red → yellow — the fire vibe the user asked for. Button hover ends up brightening rather than darkening, which reads as flicker. */ [data-theme-accent="flame"] { /* Reversed: accent is the warm yellow, deep is the red — the gradient still reads as fire but the rest state is bright/golden and the hover darkens to red instead of brightening. */ --app-accent: #fdcf58; --app-accent-deep: #ff0000; --app-accent-soft: #fff3d6; /* Yellow accent needs dark text — white-on-yellow disappears. */ --app-accent-contrast: #1f2937; /* Red hover takes white. */ --app-accent-deep-contrast: #ffffff; } /* Burning Orange — sunset gradient pink-red → orange-red. */ [data-theme-accent="burning-orange"] { --app-accent: #ff416c; --app-accent-deep: #ff4b2b; --app-accent-soft: #ffe0e6; --app-accent-contrast: #ffffff; } /* Orange Coral — peach → coral red. */ [data-theme-accent="orange-coral"] { --app-accent: #ff9966; --app-accent-deep: #ff5e62; --app-accent-soft: #ffe5d6; --app-accent-contrast: #ffffff; } /* Shades of Gray — monochrome slate. Accent is the lighter shade so it reads as a calm chrome color; contrast bumped to dark slate so button text stays legible on the light accent background. */ [data-theme-accent="shades-of-gray"] { --app-accent: #bdc3c7; --app-accent-deep: #2c3e50; --app-accent-soft: #f1f5f9; --app-accent-contrast: #2c3e50; /* Dark slate hover needs light text — same-color slate-on-slate disappeared into a solid black-looking button on hover. */ --app-accent-deep-contrast: #f1f5f9; } /* ---------- Accent presets — dark mode tweaks ------------------------- */ /* In dark mode the soft tint needs to be a dimmer, lower-saturation panel so it doesn't glow on the dark surface. We override per-accent. */ [data-theme-mode="dark"][data-theme-accent="default"] { --app-accent-soft: #3a0f12; } [data-theme-mode="dark"][data-theme-accent="indigo"] { --app-accent-soft: #1e1b4b; } [data-theme-mode="dark"][data-theme-accent="cyan"] { --app-accent-soft: #083344; } [data-theme-mode="dark"][data-theme-accent="emerald"] { --app-accent-soft: #064e3b; } [data-theme-mode="dark"][data-theme-accent="amber"] { --app-accent-soft: #451a03; --app-accent-contrast: #1f2937; } [data-theme-mode="dark"][data-theme-accent="rose"] { --app-accent-soft: #4c0519; } [data-theme-mode="dark"][data-theme-accent="flame"] { --app-accent-soft: #3b0a02; } [data-theme-mode="dark"][data-theme-accent="burning-orange"] { --app-accent-soft: #3a0a12; } [data-theme-mode="dark"][data-theme-accent="orange-coral"] { --app-accent-soft: #3a1410; } [data-theme-mode="dark"][data-theme-accent="shades-of-gray"] { --app-accent-soft: #1f2937; --app-accent-contrast: #f1f5f9; } /* ---------- Base remaps onto Bootstrap / Tabler ----------------------- */ /* Surfaces. */ body { background: var(--app-canvas); color: var(--app-ink); } /* Tabler / Bootstrap link + primary button defaults rebound onto the accent tokens so they shift with the theme. Bootstrap 5 still emits its --bs-primary variables in the compiled CSS — overriding them here gives us global recolor without rebuilding Tabler. */ :root { --bs-primary: var(--app-accent); --bs-primary-rgb: 79, 70, 229; /* keep Bootstrap rgba helpers tonal */ --bs-link-color: var(--app-accent); --bs-link-hover-color: var(--app-accent-deep); } [data-theme-accent="default"] { --bs-primary-rgb: 255, 82, 71; } [data-theme-accent="cyan"] { --bs-primary-rgb: 6, 182, 212; } [data-theme-accent="emerald"] { --bs-primary-rgb: 16, 185, 129; } [data-theme-accent="amber"] { --bs-primary-rgb: 245, 158, 11; } [data-theme-accent="rose"] { --bs-primary-rgb: 244, 63, 94; } [data-theme-accent="flame"] { --bs-primary-rgb: 253, 207, 88; } [data-theme-accent="burning-orange"] { --bs-primary-rgb: 255, 65, 108; } [data-theme-accent="orange-coral"] { --bs-primary-rgb: 255, 153, 102; } [data-theme-accent="shades-of-gray"] { --bs-primary-rgb: 189, 195, 199; } .btn-primary { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-accent-contrast); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--app-accent-deep); border-color: var(--app-accent-deep); color: var(--app-accent-deep-contrast); } .btn-outline-primary { border-color: var(--app-accent); color: var(--app-accent); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-accent-contrast); } a { color: var(--app-accent); } a:hover { color: var(--app-accent-deep); } /* Form switches / checkboxes / radios — Bootstrap hard-codes its blue via --bs-form-switch-bg (encoded SVG) and an explicit background-color on :checked. Remap onto the accent so toggles match the theme. */ .form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); } .form-check-input:focus { border-color: var(--app-accent); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); } /* Focus ring on inputs / selects / textareas — Bootstrap also uses primary-rgb here; reinforcing it with the var means dark mode + accent recolor cascade correctly. */ .form-control:focus, .form-select:focus { border-color: var(--app-accent); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .15); } /* Dark-mode adjustments for Bootstrap surfaces that hard-code light values. Phase 1 covers the most-visible chrome — Phase 2 will audit cards / forms / modals across views and route stragglers through the tokens too. */ /* Glassmorphism Dropdown Menus */ [data-theme-mode="dark"] .dropdown-menu { background: rgba(9, 14, 23, 0.85) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid var(--app-line) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important; z-index: 1050 !important; } [data-theme-mode="dark"] .dropdown-item { color: var(--app-ink) !important; background: transparent !important; } [data-theme-mode="dark"] .dropdown-item:hover, [data-theme-mode="dark"] .dropdown-item:focus { background: rgba(255, 255, 255, 0.06) !important; color: var(--app-ink) !important; } [data-theme-mode="dark"] .dropdown-item.active, [data-theme-mode="dark"] .dropdown-item:active { background: rgba(255, 255, 255, 0.1) !important; color: var(--app-ink) !important; } [data-theme-mode="dark"] .dropdown-header { color: var(--app-mute) !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } [data-theme-mode="dark"] .dropdown-divider { border-top-color: var(--app-line) !important; } [data-theme-mode="dark"] .card, [data-theme-mode="dark"] .modal-content, [data-theme-mode="dark"] .offcanvas, [data-theme-mode="dark"] .list-group-item { background-color: var(--app-surface); color: var(--app-ink); border-color: var(--app-line); } [data-theme-mode="dark"] .form-control, [data-theme-mode="dark"] .form-select { background-color: var(--app-surface-2); color: var(--app-ink); border-color: var(--app-line); } [data-theme-mode="dark"] .form-control::placeholder { color: var(--app-fade); } [data-theme-mode="dark"] .table { color: var(--app-ink); } [data-theme-mode="dark"] .text-muted { color: var(--app-mute) !important; } [data-theme-mode="dark"] hr { border-color: var(--app-line); } [data-theme-mode="dark"] .border, [data-theme-mode="dark"] .border-top, [data-theme-mode="dark"] .border-bottom, [data-theme-mode="dark"] .border-start, [data-theme-mode="dark"] .border-end { border-color: var(--app-line) !important; } [data-theme-mode="dark"] .btn-outline-secondary { color: var(--app-ink-soft); border-color: var(--app-line); } [data-theme-mode="dark"] .btn-outline-secondary:hover { background: var(--app-surface-2); color: var(--app-ink); } /* Bootstrap utility class overrides for dark mode. Pages still using .bg-white, .bg-light, .text-dark from Bootstrap utility CSS would stay light on a dark surface — force them through the tokens. */ [data-theme-mode="dark"] .bg-white, [data-theme-mode="dark"] .bg-light { background-color: var(--app-surface) !important; color: var(--app-ink); } [data-theme-mode="dark"] .text-dark { color: var(--app-ink) !important; } [data-theme-mode="dark"] .text-body { color: var(--app-ink-soft) !important; } [data-theme-mode="dark"] .text-black { color: var(--app-ink) !important; } [data-theme-mode="dark"] .text-secondary { color: var(--app-mute) !important; } [data-theme-mode="dark"] .badge.text-bg-light { background-color: var(--app-surface-2) !important; color: var(--app-ink) !important; } /* Tabler tinted-badge variants (.bg-X-lt + .text-X-fg). The default foreground tones are pale on the matching pale background — readable on a stark white surface but anemic on the app's soft canvas, and nearly invisible against a dark canvas. Force stronger text + a thin colored border so every state badge has a crisp silhouette. */ .badge.bg-blue-lt { color: #1e3a8a !important; border: 1px solid #93c5fd; } .badge.bg-green-lt { color: #14532d !important; border: 1px solid #86efac; } .badge.bg-red-lt { color: #7f1d1d !important; border: 1px solid #fca5a5; } .badge.bg-yellow-lt { color: #713f12 !important; border: 1px solid #fde68a; } .badge.bg-orange-lt { color: #7c2d12 !important; border: 1px solid #fdba74; } .badge.bg-purple-lt { color: #581c87 !important; border: 1px solid #d8b4fe; } .badge.bg-cyan-lt { color: #155e75 !important; border: 1px solid #67e8f9; } .badge.bg-secondary-lt { color: #1f2937 !important; border: 1px solid #cbd5e1; } .badge.bg-muted-lt { color: #334155 !important; border: 1px solid #cbd5e1; } [data-theme-mode="dark"] .badge.bg-blue-lt { color: #bfdbfe !important; background-color: rgba(59,130,246,.18) !important; border-color: rgba(59,130,246,.45); } [data-theme-mode="dark"] .badge.bg-green-lt { color: #bbf7d0 !important; background-color: rgba(34,197,94,.18) !important; border-color: rgba(34,197,94,.45); } [data-theme-mode="dark"] .badge.bg-red-lt { color: #fecaca !important; background-color: rgba(239,68,68,.18) !important; border-color: rgba(239,68,68,.45); } [data-theme-mode="dark"] .badge.bg-yellow-lt { color: #fde68a !important; background-color: rgba(234,179,8,.18) !important; border-color: rgba(234,179,8,.45); } [data-theme-mode="dark"] .badge.bg-orange-lt { color: #fed7aa !important; background-color: rgba(249,115,22,.18) !important; border-color: rgba(249,115,22,.45); } [data-theme-mode="dark"] .badge.bg-purple-lt { color: #e9d5ff !important; background-color: rgba(168,85,247,.18) !important; border-color: rgba(168,85,247,.45); } [data-theme-mode="dark"] .badge.bg-cyan-lt { color: #a5f3fc !important; background-color: rgba(6,182,212,.18) !important; border-color: rgba(6,182,212,.45); } [data-theme-mode="dark"] .badge.bg-secondary-lt, [data-theme-mode="dark"] .badge.bg-muted-lt { color: var(--app-ink) !important; background-color: var(--app-surface-2) !important; border-color: var(--app-line); } /* Number inputs end up with white fill from Bootstrap when value is set inline; force the surface-2 token across all form controls in dark. */ [data-theme-mode="dark"] input[type="number"], [data-theme-mode="dark"] input[type="text"], [data-theme-mode="dark"] input[type="email"], [data-theme-mode="dark"] input[type="password"], [data-theme-mode="dark"] input[type="search"], [data-theme-mode="dark"] textarea, [data-theme-mode="dark"] .input-group-text { background-color: var(--app-surface-2); color: var(--app-ink); border-color: var(--app-line); } [data-theme-mode="dark"] .input-group-text { color: var(--app-ink-soft); } /* Large numeric metrics in many cards use --app-mute / --app-ink-soft which look faded against the dark canvas. Promote anything that's visually a big-number to full ink in dark. */ [data-theme-mode="dark"] .display-1, [data-theme-mode="dark"] .display-2, [data-theme-mode="dark"] .display-3, [data-theme-mode="dark"] .display-4, [data-theme-mode="dark"] .h1, [data-theme-mode="dark"] .h2, [data-theme-mode="dark"] h1, [data-theme-mode="dark"] h2 { color: var(--app-ink); } /* Swatch grid used by the theme picker UI (Profile + Platform Features). */ .theme-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .65rem; } .theme-swatch { border: 2px solid var(--app-line); border-radius: 12px; padding: .5rem; background: var(--app-surface); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .3rem; transition: border-color .15s ease, transform .15s ease; } .theme-swatch:hover { transform: translateY(-1px); } .theme-swatch.is-active { border-color: var(--app-accent); } .theme-swatch input { position: absolute; opacity: 0; pointer-events: none; } .theme-swatch-chip { width: 100%; height: 1.75rem; border-radius: 8px; background: linear-gradient(135deg, var(--swatch-accent, #4f46e5), var(--swatch-deep, #3730a3)); } .theme-swatch-label { font-size: .72rem; font-weight: 700; color: var(--app-ink-soft); } .theme-mode-row { display: inline-flex; background: var(--app-line-soft); border-radius: 10px; padding: .25rem; gap: .15rem; } .theme-mode-btn { border: 0; background: transparent; color: var(--app-ink-soft); font-weight: 700; font-size: .82rem; padding: .45rem .85rem; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; } .theme-mode-btn.is-active { background: var(--app-surface); color: var(--app-ink); box-shadow: var(--app-shadow-sm), 0 0 0 1px var(--app-line); } /* ---------- Dashboard & Village Component Overrides --------------------- */ [data-theme-mode="dark"] .village-hero-latest, [data-theme-mode="dark"] .village-action-btn-secondary, [data-theme-mode="dark"] .village-filter-chip, [data-theme-mode="dark"] .village-kpi, [data-theme-mode="dark"] .village-insight-card { background: var(--app-surface) !important; border-color: var(--app-line) !important; color: var(--app-ink); } [data-theme-mode="dark"] .village-filter-chip:not(.is-active) { color: var(--app-ink-soft); } [data-theme-mode="dark"] .village-pill-verification { background: var(--app-surface-2) !important; border-color: var(--app-line) !important; } /* ---------- Goals Page Overrides -------------------------------------- */ [data-theme-mode="dark"] .gl-filter a:not(.active) { color: var(--app-ink-soft) !important; } /* ---------- Clan Workspace Overrides ---------------------------------- */ [data-theme-mode="dark"] .cm-pill { background: var(--app-surface-2) !important; color: var(--app-ink) !important; border-color: var(--app-line) !important; } [data-theme-mode="dark"] .cm-pill.is-success { color: var(--app-accent) !important; border-color: var(--app-accent) !important; background: var(--app-accent-soft) !important; } [data-theme-mode="dark"] .cm-role { background: var(--app-surface-2) !important; color: var(--app-ink) !important; } /* ---------- War Dashboard Overrides ----------------------------------- */ [data-theme-mode="dark"] .mdash { --bg-0: var(--app-canvas); --bg-1: var(--app-surface); --bg-2: var(--app-surface-2); --bg-3: var(--app-line); --line: var(--app-line); --line-2: #2f3b4c; --line-3: #475569; --ink-0: var(--app-ink); --ink-1: var(--app-ink-soft); --ink-2: var(--app-mute); --ink-3: var(--app-fade); --ink-4: #334155; --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 4px 12px rgba(0,0,0,0.6); } /* ---------- Profile Overrides ----------------------------------------- */ [data-theme-mode="dark"] .profile-summary-icon, [data-theme-mode="dark"] .sidebar-badge-counter { background-color: var(--app-surface-2) !important; color: var(--app-ink) !important; } /* ---------- Brand typography application ------------------------------ Body/UI -> Plus Jakarta Sans. Headings, logo, numeric displays -> Space Grotesk with tight tracking, matching the Clash Scope brand. */ body { font-family: var(--app-font-ui); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-title, .navbar-brand, .display-1, .display-2, .display-3, .display-4 { font-family: var(--app-font-display); letter-spacing: -0.02em; }