/* design-promax Pro themes — skill-local pack Source of truth: THEMES.json (Default | Brutalism | Glass | Mouve) Activate: Stack: HeroUI v2 + Tailwind 3 (skill sources). Optional upgrade: @heroui-pro/react/themes/* */ /* —— Default —— */ html[data-theme="default-light"], html[data-theme="light"] { color-scheme: light; } /* —— Brutalism —— */ html[data-theme="brutalism-light"] { color-scheme: light; --dp-radius: 0px; --dp-border: 2px solid #18181b; --dp-shadow: 4px 4px 0 #18181b; font-family: var(--font-brutal-body, ui-monospace), monospace; } html[data-theme="brutalism-light"] body { font-family: var(--font-brutal-body, ui-monospace), monospace; } html[data-theme="brutalism-light"] h1, html[data-theme="brutalism-light"] h2, html[data-theme="brutalism-light"] .font-semibold, html[data-theme="brutalism-light"] .text-large.font-medium { font-family: var(--font-brutal-display, Impact), sans-serif; letter-spacing: 0.02em; text-transform: uppercase; } html[data-theme="brutalism-light"] .border-small, html[data-theme="brutalism-light"] [class*="border-small"] { border: var(--dp-border) !important; border-radius: 0 !important; box-shadow: var(--dp-shadow); } html[data-theme="brutalism-light"] .rounded-full, html[data-theme="brutalism-light"] .rounded-large, html[data-theme="brutalism-light"] .rounded-medium, html[data-theme="brutalism-light"] .rounded-lg, html[data-theme="brutalism-light"] .rounded-md, html[data-theme="brutalism-light"] button, html[data-theme="brutalism-light"] [role="button"] { border-radius: 0 !important; } /* —— Glass —— */ html[data-theme="glass-light"] { color-scheme: light; --glass-blur: 18px; --background-gradient: radial-gradient(ellipse 80% 50% at 20% -10%, #cbd5e1 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 90% 10%, #94a3b8 0%, transparent 50%), linear-gradient(180deg, #e2e8f0 0%, #f4f4f5 45%, #dbe4ee 100%); } html[data-theme="glass-light"] body { background-image: var(--background-gradient); background-attachment: fixed; } html[data-theme="glass-light"] .bg-content1, html[data-theme="glass-light"] [data-slot="base"] { background-color: rgb(255 255 255 / 0.55) !important; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-color: rgb(255 255 255 / 0.45) !important; box-shadow: 0 8px 32px rgb(15 23 42 / 0.08); } html[data-theme="glass-light"] aside, html[data-theme="glass-light"] header { background-color: rgb(255 255 255 / 0.5) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* —— Mouve —— */ html[data-theme="mouve-light"] { color-scheme: light; --mouve-raised-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 1px 2px rgb(109 40 217 / 0.2), 0 6px 16px rgb(109 40 217 / 0.18); --mouve-pressed-shadow: inset 0 2px 4px rgb(15 23 42 / 0.12); --mouve-accent-fill-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25); } html[data-theme="mouve-light"] .bg-primary { background-color: #7c3aed !important; background-image: linear-gradient( 180deg, rgb(255 255 255 / 0.2) 0%, transparent 48% ); box-shadow: var(--mouve-raised-shadow); border: 1px solid rgb(109 40 217 / 0.4); } html[data-theme="mouve-light"] .bg-primary:hover, html[data-theme="mouve-light"] [data-hover="true"].bg-primary { background-color: #6d28d9 !important; } html[data-theme="mouve-light"] .text-primary, html[data-theme="mouve-light"] .text-primary-600 { color: #6d28d9 !important; } html[data-theme="mouve-light"] .text-primary-foreground { color: #fff !important; } html[data-theme="mouve-light"] .bg-primary-50 { background-color: #f5f3ff !important; } html[data-theme="mouve-light"] .bg-primary-100 { background-color: #ede9fe !important; } html[data-theme="mouve-light"] .border-primary-100 { border-color: #ddd6fe !important; } html[data-theme="mouve-light"] button[data-pressed="true"]:not(.bg-primary) { box-shadow: var(--mouve-pressed-shadow); }