/* Site theme system, split into two axes so any combination stays coherent: - THEME (data-app-theme) = identity: accent colour, font, corner radius. - VARIANT (data-app-variant) = the background/text scheme: light / tinted / dark. Both sit on ; .app-scope (on ) consumes the variables and remaps the common Tailwind utilities, so the whole signed-in app adapts with no per-view edits. Scoped to .app-scope (app) and .lp-scope (landings) so they stay isolated. */ /* ---- Themes: identity only (accent / font / radius) ---- */ [data-app-theme="minimal"] { --app-accent:#2563eb; --app-accent-soft:rgba(37,99,235,.15); --app-font:ui-sans-serif,system-ui,sans-serif; --app-radius:.5rem; } [data-app-theme="modern"] { --app-accent:#4f46e5; --app-accent-soft:rgba(79,70,229,.15); --app-font:ui-sans-serif,system-ui,sans-serif; --app-radius:.75rem; } [data-app-theme="sober"] { --app-accent:#0f172a; --app-accent-soft:rgba(15,23,42,.1); --app-font:ui-sans-serif,system-ui,sans-serif; --app-radius:.375rem; } [data-app-theme="aurora"] { --app-accent:#9333ea; --app-accent-soft:rgba(147,51,234,.15); --app-font:ui-sans-serif,system-ui,sans-serif; --app-radius:1rem; } [data-app-theme="editorial"] { --app-accent:#111827; --app-accent-soft:rgba(17,24,39,.1); --app-font:Georgia,"Times New Roman",serif; --app-radius:0; } [data-app-theme="midnight"] { --app-accent:#6366f1; --app-accent-soft:rgba(99,102,241,.25); --app-font:ui-sans-serif,system-ui,sans-serif; --app-radius:.75rem; } [data-app-theme="neon"] { --app-accent:#c026d3; --app-accent-soft:rgba(217,70,239,.3); --app-font:ui-monospace,"SF Mono",Menlo,monospace; --app-radius:.5rem; } [data-app-theme="spotlight"] { --app-accent:#4b5563; --app-accent-soft:rgba(75,85,99,.2); --app-font:ui-sans-serif,system-ui,sans-serif; --app-radius:.5rem; } [data-app-theme="brutalist"] { --app-accent:#000000; --app-accent-soft:rgba(0,0,0,.12); --app-font:ui-monospace,"SF Mono",Menlo,monospace; --app-radius:0; } [data-app-theme="terminal"] { --app-accent:#059669; --app-accent-soft:rgba(16,185,129,.25); --app-font:ui-monospace,"SF Mono",Menlo,monospace; --app-radius:.375rem; } [data-app-theme="blueprint"] { --app-accent:#0891b2; --app-accent-soft:rgba(8,145,178,.3); --app-font:ui-monospace,"SF Mono",Menlo,monospace; --app-radius:0; } [data-app-theme="retro"] { --app-accent:#db2777; --app-accent-soft:rgba(219,39,119,.3); --app-font:ui-sans-serif,system-ui,sans-serif; --app-radius:.75rem; } [data-app-theme="clay"] { --app-accent:#7c3aed; --app-accent-soft:rgba(124,58,237,.15); --app-font:ui-rounded,"SF Pro Rounded",system-ui,sans-serif; --app-radius:1.25rem; } [data-app-theme="newspaper"] { --app-accent:#111827; --app-accent-soft:rgba(17,24,39,.1); --app-font:Georgia,"Times New Roman",serif; --app-radius:0; } [data-app-theme="cosmic"] { --app-accent:#8b5cf6; --app-accent-soft:rgba(139,92,246,.3); --app-font:ui-sans-serif,system-ui,sans-serif; --app-radius:1rem; } /* ---- Variants: background / text scheme (work with every theme) ---- */ [data-app-variant="light"] { --app-bg:#f8fafc; --app-surface:#ffffff; --app-text:#0f172a; --app-muted:#64748b; --app-border:#e5e7eb; } [data-app-variant="tinted"] { --app-bg:color-mix(in srgb, var(--app-accent) 7%, #ffffff); --app-surface:#ffffff; --app-text:#0f172a; --app-muted:#64748b; --app-border:color-mix(in srgb, var(--app-accent) 20%, #e5e7eb); } [data-app-variant="dark"] { --app-bg:#0a0a0c; --app-surface:rgba(255,255,255,.05); --app-text:#f3f4f6; --app-muted:#9ca3af; --app-border:rgba(255,255,255,.12); } /* Dark variant fix: themes whose accent is near-black vanish on the dark canvas (invisible circles / buttons / active nav). Lift the accent to a light neutral and flip the on-accent text to dark so those elements stay readable. Scoped to dark only - light/tinted keep the theme's real accent. */ [data-app-theme="sober"][data-app-variant="dark"] { --app-accent:#cbd5e1; --app-accent-soft:rgba(203,213,225,.18); --app-accent-text:#0f172a; } [data-app-theme="editorial"][data-app-variant="dark"] { --app-accent:#e5e7eb; --app-accent-soft:rgba(229,231,235,.18); --app-accent-text:#111827; } [data-app-theme="newspaper"][data-app-variant="dark"] { --app-accent:#e5e7eb; --app-accent-soft:rgba(229,231,235,.18); --app-accent-text:#111827; } [data-app-theme="brutalist"][data-app-variant="dark"] { --app-accent:#ffffff; --app-accent-soft:rgba(255,255,255,.20); --app-accent-text:#000000; } [data-app-theme="spotlight"][data-app-variant="dark"] { --app-accent:#cbd5e1; --app-accent-soft:rgba(203,213,225,.18); --app-accent-text:#0f172a; } /* ---- Base + utility remap (app) ---- */ .app-scope { background-color: var(--app-bg); color: var(--app-text); font-family: var(--app-font); } .app-scope .text-gray-900, .app-scope .text-gray-800 { color: var(--app-text); } .app-scope .text-gray-700, .app-scope .text-gray-600, .app-scope .text-gray-500, .app-scope .text-gray-400 { color: var(--app-muted); } .app-scope .bg-white, .app-scope .bg-gray-50 { background-color: var(--app-surface); } .app-scope .border-gray-100, .app-scope .border-gray-200, .app-scope .border-gray-300, .app-scope .border-gray-400 { border-color: var(--app-border); } .app-scope .bg-blue-600 { background-color: var(--app-accent); color: var(--app-accent-text, #fff); } .app-scope .hover\:bg-blue-500:hover, .app-scope .hover\:bg-blue-700:hover { background-color: var(--app-accent); filter: brightness(1.08); } .app-scope .text-blue-600, .app-scope .text-blue-700 { color: var(--app-accent); } .app-scope .hover\:text-blue-500:hover { color: var(--app-accent); filter: brightness(1.1); } .app-scope .bg-blue-50 { background-color: var(--app-accent-soft); } .app-scope .focus\:outline-blue-600:focus { outline-color: var(--app-accent); } .app-scope .rounded-md, .app-scope .rounded-lg, .app-scope .rounded-xl { border-radius: var(--app-radius); } /* ---- Signed-in app shell (sidebar + topbar + mobile tab bar), fully themed ---- */ .app-shell-bg { background-color: var(--app-bg); } /* Chrome must stay OPAQUE (it overlays content as a drawer on mobile): composite the - possibly translucent - surface over the solid background so nothing shows through. */ .app-chrome { background-color: var(--app-bg); background-image: linear-gradient(0deg, var(--app-surface), var(--app-surface)); } .app-border-c { border-color: var(--app-border); } .app-brand-tile { background-color: var(--app-accent); color: var(--app-accent-text, #fff); border-radius: var(--app-radius); } .app-nav { display: flex; align-items: center; gap: .75rem; border-radius: var(--app-radius); color: var(--app-muted); transition: background-color .15s ease, color .15s ease; } .app-nav:hover { background-color: var(--app-accent-soft); color: var(--app-text); } .app-nav.is-active { background-color: var(--app-accent-soft); color: var(--app-accent); font-weight: 600; } .app-section-label { color: var(--app-muted); } .app-tab { color: var(--app-muted); transition: color .15s ease; } .app-tab:hover { color: var(--app-text); } .app-tab.is-active { color: var(--app-accent); } .app-fab { background-color: var(--app-accent); color: var(--app-accent-text, #fff); } /* ---- UI kit: reusable, fully-themed components (see UiHelper + /dev/ui) ---- */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: var(--app-radius); padding: .5rem 1rem; font-size: .875rem; font-weight: 600; cursor: pointer; transition: filter .15s ease, background-color .15s ease; border: 1px solid transparent; } .ui-btn:hover { filter: brightness(1.06); } .ui-btn-primary { background-color: var(--app-accent); color: var(--app-accent-text, #fff); } .ui-btn-secondary { background-color: var(--app-surface); color: var(--app-text); border-color: var(--app-border); } .ui-btn-ghost { background-color: transparent; color: var(--app-accent); } .ui-btn-danger { background-color: #dc2626; color: #fff; } .ui-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; } .ui-badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px; padding: .125rem .625rem; font-size: .75rem; font-weight: 500; } .ui-badge-neutral { background-color: var(--app-accent-soft); color: var(--app-muted); } .ui-badge-accent { background-color: var(--app-accent-soft); color: var(--app-accent); } .ui-badge-success { background-color: rgba(16,185,129,.15); color: #059669; } .ui-badge-warning { background-color: rgba(245,158,11,.18); color: #b45309; } .ui-badge-danger { background-color: rgba(220,38,38,.15); color: #dc2626; } .ui-input { width: 100%; border-radius: var(--app-radius); border: 1px solid var(--app-border); background-color: var(--app-surface); color: var(--app-text); padding: .5rem .75rem; font-size: .875rem; } .ui-input:focus { outline: 2px solid var(--app-accent); outline-offset: 1px; } .ui-input::placeholder { color: var(--app-muted); opacity: .7; } .ui-table { width: 100%; border-collapse: collapse; font-size: .875rem; } .ui-table th { text-align: left; padding: .625rem .75rem; color: var(--app-muted); font-weight: 500; border-bottom: 1px solid var(--app-border); } .ui-table td { padding: .625rem .75rem; color: var(--app-text); border-bottom: 1px solid var(--app-border); } .ui-table tr:last-child td { border-bottom: 0; } .ui-dialog { border: 1px solid var(--app-border); border-radius: var(--app-radius); background-color: var(--app-surface); color: var(--app-text); padding: 1.5rem; max-width: 28rem; width: 90%; } .ui-dialog::backdrop { background: rgba(0,0,0,.5); } /* Reusable themed helpers */ .t-card { background-color: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius); } .t-btn { background-color: var(--app-accent); color: var(--app-accent-text, #fff); border-radius: var(--app-radius); } .t-text { color: var(--app-text); } .t-muted { color: var(--app-muted); } .t-accent { color: var(--app-accent); } .t-swatch-light { background:#f8fafc; } .t-swatch-tinted { background:color-mix(in srgb, var(--app-accent, #2563eb) 16%, #ffffff); } .t-swatch-dark { background:#0a0a0c; } /* ---- Landings: same variants, applied to neutral surfaces only (keeps each design's identity; dark templates already carry their own palette, so they're unaffected). ---- */ .lp-scope[data-lp-variant="light"] { --v-bg:#ffffff; --v-surface:#ffffff; --v-text:#0f172a; --v-muted:#64748b; --v-border:#e5e7eb; } .lp-scope[data-lp-variant="tinted"] { --v-bg:#faf5ff; --v-surface:#ffffff; --v-text:#1f2937; --v-muted:#6b7280; --v-border:#ede9fe; } .lp-scope[data-lp-variant="dark"] { --v-bg:#0a0a0c; --v-surface:#16161c; --v-text:#f3f4f6; --v-muted:#9ca3af; --v-border:rgba(255,255,255,.12); } .lp-scope[data-lp-variant] { background-color: var(--v-bg); color: var(--v-text); } /* All variants: retint the neutral page surfaces + neutral text/borders. */ .lp-scope[data-lp-variant] .bg-white, .lp-scope[data-lp-variant] .bg-gray-50 { background-color: var(--v-surface); } .lp-scope[data-lp-variant] .text-gray-900, .lp-scope[data-lp-variant] .text-gray-800 { color: var(--v-text); } .lp-scope[data-lp-variant] .text-gray-700, .lp-scope[data-lp-variant] .text-gray-600, .lp-scope[data-lp-variant] .text-gray-500, .lp-scope[data-lp-variant] .text-gray-400 { color: var(--v-muted); } .lp-scope[data-lp-variant] .border-gray-100, .lp-scope[data-lp-variant] .border-gray-200, .lp-scope[data-lp-variant] .border-gray-300 { border-color: var(--v-border); } /* Dark only: also flatten the bold/pastel surfaces, dark text & gradients so a colourful light design (brutalist, clay, aurora, newspaper…) becomes a coherent, readable dark page. */ .lp-scope[data-lp-variant="dark"] .bg-gray-100, .lp-scope[data-lp-variant="dark"] .bg-gray-200, .lp-scope[data-lp-variant="dark"] .bg-gray-300, .lp-scope[data-lp-variant="dark"] .bg-yellow-200, .lp-scope[data-lp-variant="dark"] .bg-yellow-300, .lp-scope[data-lp-variant="dark"] .bg-pink-200, .lp-scope[data-lp-variant="dark"] .bg-pink-300, .lp-scope[data-lp-variant="dark"] .bg-cyan-200, .lp-scope[data-lp-variant="dark"] .bg-cyan-300, .lp-scope[data-lp-variant="dark"] .bg-lime-200, .lp-scope[data-lp-variant="dark"] .bg-lime-300, .lp-scope[data-lp-variant="dark"] .bg-orange-200, .lp-scope[data-lp-variant="dark"] .bg-orange-300, .lp-scope[data-lp-variant="dark"] .bg-violet-50, .lp-scope[data-lp-variant="dark"] .bg-violet-200, .lp-scope[data-lp-variant="dark"] .bg-rose-50, .lp-scope[data-lp-variant="dark"] .bg-rose-200, .lp-scope[data-lp-variant="dark"] .bg-indigo-100, .lp-scope[data-lp-variant="dark"] .bg-emerald-300 { background-color: var(--v-surface); } .lp-scope[data-lp-variant="dark"] .text-black { color: var(--v-text); } .lp-scope[data-lp-variant="dark"] .border-black { border-color: var(--v-border); } .lp-scope[data-lp-variant="dark"] .from-white, .lp-scope[data-lp-variant="dark"] .from-rose-50, .lp-scope[data-lp-variant="dark"] .from-violet-50 { --tw-gradient-from: var(--v-bg) var(--tw-gradient-from-position); } .lp-scope[data-lp-variant="dark"] .via-white { --tw-gradient-via: var(--v-bg) var(--tw-gradient-via-position); } .lp-scope[data-lp-variant="dark"] .to-white, .lp-scope[data-lp-variant="dark"] .to-indigo-50, .lp-scope[data-lp-variant="dark"] .to-rose-50, .lp-scope[data-lp-variant="dark"] .to-violet-50 { --tw-gradient-to: var(--v-surface) var(--tw-gradient-to-position); }