/**
 * Public site brand theming — maps admin color scheme CSS variables onto
 * existing Tailwind violet utilities and shared UI patterns.
 */

html {
    font-family: 'Poppins', 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

h1.font-black,
h1 .gradient-text {
    font-weight: 900;
}

.gradient-text {
    background-image: var(--gradient) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Primary gradient buttons / banners */
.bg-gradient-to-r.from-violet-600.to-pink-500,
.bg-gradient-to-br.from-violet-600.via-violet-500.to-pink-500,
.bg-gradient-to-r.from-violet-600,
[class*="from-violet-600"][class*="to-pink-500"] {
    background-image: var(--gradient) !important;
}

/* Solid brand surfaces */
.bg-violet-600,
.hover\:bg-violet-700:hover {
    background-color: var(--brand) !important;
}

.bg-violet-500 {
    background-color: var(--brand-mid) !important;
}

.bg-violet-50,
.hover\:bg-violet-50:hover,
.hover\:bg-violet-100:hover {
    background-color: var(--brand-soft) !important;
}

.bg-violet-100,
.dark .bg-violet-900\/30,
.dark .bg-violet-900\/20,
.dark .bg-violet-900\/50 {
    background-color: color-mix(in srgb, var(--brand) 14%, transparent) !important;
}

.dark .bg-violet-900\/30,
.dark .bg-violet-900\/20,
.dark .bg-violet-900\/50 {
    background-color: color-mix(in srgb, var(--brand) 28%, transparent) !important;
}

/* Brand text */
.text-violet-600,
.text-violet-700,
.text-violet-800,
.text-violet-500,
.text-violet-900,
.hover\:text-violet-500:hover,
.hover\:text-violet-600:hover,
.hover\:text-violet-700:hover,
.hover\:text-violet-900:hover {
    color: var(--brand) !important;
}

.dark .text-violet-200,
.dark .text-violet-300,
.dark .text-violet-400 {
    color: color-mix(in srgb, var(--brand) 72%, white) !important;
}

/* Brand borders / rings */
.border-violet-200,
.border-violet-300,
.border-violet-100,
.border-violet-600,
.hover\:border-violet-200:hover,
.hover\:border-violet-300:hover {
    border-color: color-mix(in srgb, var(--brand) 28%, #e2e8f0) !important;
}

.border-violet-600 {
    border-color: var(--brand) !important;
}

.dark .border-violet-800,
.dark .border-violet-700,
.dark .hover\:border-violet-700:hover {
    border-color: color-mix(in srgb, var(--brand) 42%, #334155) !important;
}

.ring-violet-200,
.dark .ring-violet-800 {
    --tw-ring-color: color-mix(in srgb, var(--brand) 30%, transparent) !important;
}

.focus-visible\:ring-violet-400:focus-visible {
    --tw-ring-color: color-mix(in srgb, var(--brand) 55%, white) !important;
}

/* Cookie banner + misc hardcoded accents in app.css */
.cookie-compact,
.cookie-panel {
    border-color: color-mix(in srgb, var(--brand) 22%, #e2e8f0) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px color-mix(in srgb, var(--brand) 10%, transparent) !important;
}

.cookie-link {
    color: var(--brand) !important;
}

.cookie-btn--accept,
.cookie-toggle--on {
    background: var(--gradient) !important;
}

/* Auth modal (mpa-*) accents wired via CSS vars on body */
.mpa-soft.one {
    background: color-mix(in srgb, var(--brand) 12%, white) !important;
}

.mpa-soft.two {
    background: color-mix(in srgb, var(--brand-2) 12%, white) !important;
}

.dark .mpa-soft.one {
    background: color-mix(in srgb, var(--brand) 25%, transparent) !important;
}

.dark .mpa-soft.two {
    background: color-mix(in srgb, var(--brand-2) 20%, transparent) !important;
}

.mpa-input:focus,
.mpa-pin:focus {
    border-color: var(--brand-mid) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent) !important;
}

.mpa-link,
.mpa-switch button {
    color: var(--brand) !important;
}

.mpa-btn-primary,
.mpa-submit {
    background: var(--gradient) !important;
}

/* Intro splash accents */
.moppsy-intro-accent {
    background: var(--gradient) !important;
}

.moppsy-intro-primary {
    background: var(--gradient) !important;
}

.moppsy-intro-dot.is-active {
    background: var(--brand) !important;
}

/* Dashboard navigation + accents */
.dashboard-nav-link--active {
    background-image: var(--gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 28%, transparent);
}

.dashboard-nav-link--active-compact {
    background-color: color-mix(in srgb, var(--brand) 14%, transparent) !important;
    color: var(--brand) !important;
}

.dark .dashboard-nav-link--active-compact {
    background-color: color-mix(in srgb, var(--brand) 28%, transparent) !important;
    color: color-mix(in srgb, var(--brand) 78%, white) !important;
}

.dashboard-nav-link:hover:not(.dashboard-nav-link--active):not(.dashboard-nav-link--active-compact) {
    color: var(--brand) !important;
}

.dashboard-perspective-active {
    background-color: #fff !important;
    color: var(--brand) !important;
}

.dark .dashboard-perspective-active {
    background-color: var(--brand) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent);
    --tw-ring-color: color-mix(in srgb, var(--brand) 30%, transparent) !important;
}

.dashboard-identity-banner {
    border-color: color-mix(in srgb, var(--brand) 28%, #e9d5ff) !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 8%, white), color-mix(in srgb, var(--brand-2) 8%, white)) !important;
}

.dark .dashboard-identity-banner {
    border-color: color-mix(in srgb, var(--brand) 42%, #334155) !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 18%, rgb(15 23 42)), color-mix(in srgb, var(--brand-2) 14%, rgb(15 23 42))) !important;
}

.dashboard-identity-banner .dashboard-identity-text {
    color: color-mix(in srgb, var(--brand) 85%, #1e1b4b) !important;
}

.dark .dashboard-identity-banner .dashboard-identity-text {
    color: color-mix(in srgb, var(--brand) 72%, white) !important;
}

.bg-gradient-to-br.from-violet-500.to-pink-500,
.bg-gradient-to-br.from-violet-500 {
    background-image: var(--gradient) !important;
}

.from-violet-50.to-pink-50 {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--brand) 8%, white), color-mix(in srgb, var(--brand-2) 8%, white)) !important;
}

.dark .from-violet-950\/40.to-pink-950\/30 {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--brand) 18%, rgb(15 23 42)), color-mix(in srgb, var(--brand-2) 14%, rgb(15 23 42))) !important;
}

.from-violet-100.to-pink-100 {
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, white), color-mix(in srgb, var(--brand-2) 14%, white)) !important;
}

.dark .from-slate-700.to-slate-800 {
    /* keep dark card headers as-is */
}