/**
 * Paleta brand Planelly — rose/gold + Future Glass (ink canvas).
 */

.planelly-brand {
    --lp-primary: #b8837a;
    --lp-primary-dark: #9a6b63;
    --lp-primary-light: #d4a99f;
    --lp-primary-muted: #f3e8e4;
    --lp-primary-ring: rgba(184, 131, 122, 0.28);
    --lp-accent-indigo: #6366f1;
    --lp-accent-violet: #818cf8;
    --lp-accent-gold: #c4a574;
    --lp-bg-page: #f7f1ea;
    --lp-theme-color: #b8837a;
    --lp-gradient-from: #b8837a;
    --lp-gradient-via: #c9978f;
    --lp-gradient-to: #c4a574;
    --lp-hero-glow-1: rgba(232, 207, 199, 0.55);
    --lp-hero-glow-2: rgba(247, 241, 234, 0.85);
    --lp-shadow: rgba(154, 107, 99, 0.32);

    /* Future Glass */
    --lp-bg-ink: #0b0f14;
    --lp-bg-ink-elevated: #12181f;
    --lp-glass: rgba(255, 255, 255, 0.06);
    --lp-glass-strong: rgba(255, 255, 255, 0.1);
    --lp-glass-border: rgba(255, 255, 255, 0.12);
    --lp-glass-border-strong: rgba(255, 255, 255, 0.18);
    --lp-text: #f4f1ec;
    --lp-muted: #9aa3b2;
    --lp-accent: #b8837a;
    --lp-mesh-1: rgba(184, 131, 122, 0.28);
    --lp-mesh-2: rgba(196, 165, 116, 0.18);
    --lp-mesh-3: rgba(99, 120, 140, 0.16);
}

/* --- Przemapowanie utility Tailwind (indigo → róż/złoto) --- */

.planelly-brand .lp-page-bg {
    background-color: var(--lp-bg-page);
}

.planelly-brand.planelly-glass-theme .lp-page-bg,
.planelly-brand .planelly-page-ink {
    background-color: var(--lp-bg-ink);
    color: var(--lp-text);
}

.planelly-brand .text-indigo-600,
.planelly-brand .text-indigo-700,
.planelly-brand .text-indigo-800,
.planelly-brand .hover\:text-indigo-600:hover,
.planelly-brand .hover\:text-indigo-700:hover,
.planelly-brand .group-hover\:text-indigo-600.group:hover {
    color: var(--lp-primary-light) !important;
}

.planelly-brand .text-indigo-500,
.planelly-brand .text-indigo-400 {
    color: var(--lp-accent-gold) !important;
}

.planelly-brand .text-indigo-200,
.planelly-brand .text-indigo-300 {
    color: var(--lp-primary-light) !important;
}

.planelly-brand .bg-indigo-600,
.planelly-brand .focus\:bg-indigo-600:focus {
    background-color: var(--lp-primary) !important;
}

.planelly-brand .hover\:bg-indigo-700:hover {
    background-color: var(--lp-primary-dark) !important;
}

.planelly-brand .bg-indigo-100,
.planelly-brand .hover\:bg-indigo-50:hover,
.planelly-brand .hover\:bg-indigo-50\/50:hover {
    background-color: rgba(184, 131, 122, 0.16) !important;
}

.planelly-brand .border-indigo-100,
.planelly-brand .border-indigo-200,
.planelly-brand .hover\:border-indigo-200:hover,
.planelly-brand .hover\:border-indigo-300:hover,
.planelly-brand .hover\:border-indigo-400:hover {
    border-color: color-mix(in srgb, var(--lp-primary) 45%, transparent) !important;
}

.planelly-brand .border-indigo-500,
.planelly-brand .border-indigo-600 {
    border-color: var(--lp-primary) !important;
}

.planelly-brand .ring-indigo-500\/10,
.planelly-brand .ring-indigo-500\/25 {
    --tw-ring-color: var(--lp-primary-ring) !important;
}

.planelly-brand .shadow-indigo-100\/40,
.planelly-brand .shadow-indigo-200,
.planelly-brand .shadow-indigo-200\/40,
.planelly-brand .shadow-indigo-300\/35 {
    --tw-shadow-color: var(--lp-shadow) !important;
}

.planelly-brand .shadow-indigo-500\/10,
.planelly-brand .shadow-indigo-500\/20,
.planelly-brand .shadow-indigo-600\/30,
.planelly-brand .shadow-indigo-900\/20,
.planelly-brand .shadow-indigo-900\/50 {
    --tw-shadow-color: var(--lp-shadow) !important;
}

.planelly-brand .from-indigo-500,
.planelly-brand .from-indigo-600 {
    --tw-gradient-from: var(--lp-primary) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(184 131 122 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.planelly-brand .via-indigo-600,
.planelly-brand .via-violet-600 {
    --tw-gradient-via: var(--lp-gradient-via) var(--tw-gradient-via-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.planelly-brand .to-indigo-900,
.planelly-brand .to-violet-600,
.planelly-brand .to-purple-600 {
    --tw-gradient-to: var(--lp-gradient-to) var(--tw-gradient-to-position) !important;
}

.planelly-brand .from-indigo-200\/50 {
    --tw-gradient-from: var(--lp-hero-glow-1) var(--tw-gradient-from-position) !important;
}

.planelly-brand .via-violet-200\/35 {
    --tw-gradient-via: rgba(201, 151, 143, 0.35) var(--tw-gradient-via-position) !important;
}

.planelly-brand .to-fuchsia-200\/25 {
    --tw-gradient-to: rgba(196, 165, 116, 0.22) var(--tw-gradient-to-position) !important;
}

.planelly-brand .bg-indigo-100\/60 {
    background-color: var(--lp-hero-glow-2) !important;
}

.planelly-brand .from-indigo-600.via-violet-600.to-purple-600.bg-clip-text,
.planelly-brand .bg-gradient-to-r.from-indigo-600.bg-clip-text {
    background-image: linear-gradient(to right, var(--lp-gradient-from), var(--lp-gradient-via), var(--lp-gradient-to)) !important;
    -webkit-background-clip: text;
    background-clip: text;
}

.planelly-brand button.bg-gradient-to-r.from-indigo-600,
.planelly-brand button.planelly-btn-primary,
.planelly-brand a.planelly-btn-primary,
.planelly-brand .planelly-btn-primary {
    background-image: linear-gradient(to right, var(--lp-primary), var(--lp-primary-dark)) !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    color: #ffffff !important;
}

.planelly-brand button.bg-gradient-to-r.from-indigo-600:hover,
.planelly-brand .planelly-btn-primary:hover {
    background-image: linear-gradient(to right, var(--lp-primary-dark), #8a5a52) !important;
}

.planelly-brand .to-blue-600 {
    --tw-gradient-to: var(--lp-primary-dark) var(--tw-gradient-to-position) !important;
}

.planelly-brand .from-indigo-50 {
    --tw-gradient-from: var(--lp-primary-muted) var(--tw-gradient-from-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.planelly-brand .to-sky-50,
.planelly-brand .to-indigo-50\/40 {
    --tw-gradient-to: var(--lp-bg-page) var(--tw-gradient-to-position) !important;
}

.planelly-brand .bg-indigo-50 {
    background-color: var(--lp-primary-muted) !important;
}

.planelly-brand .via-indigo-50\/40 {
    --tw-gradient-via: color-mix(in srgb, var(--lp-primary-muted) 40%, white) var(--tw-gradient-via-position) !important;
}

.planelly-brand .from-indigo-600.to-indigo-900 {
    background-image: linear-gradient(to bottom, var(--lp-primary), var(--lp-primary-dark)) !important;
}

.planelly-brand .focus\:ring-indigo-300:focus,
.planelly-brand .focus\:ring-indigo-500:focus,
.planelly-brand .focus-visible\:ring-indigo-500:focus-visible {
    --tw-ring-color: var(--lp-primary) !important;
}

.planelly-brand .text-indigo-900 {
    color: #3d2f2c !important;
}

.planelly-brand .lp-hero-glow-a {
    background: radial-gradient(ellipse at center, var(--lp-hero-glow-1), transparent 70%);
}

.planelly-brand .lp-hero-glow-b {
    background: radial-gradient(circle, var(--lp-hero-glow-2), transparent 70%);
}

.planelly-brand .text-violet-600,
.planelly-brand .text-violet-500 {
    color: var(--lp-accent-gold) !important;
}

.planelly-brand .from-violet-600,
.planelly-brand .from-violet-500 {
    --tw-gradient-from: var(--lp-primary) var(--tw-gradient-from-position) !important;
}

/* --- Future Glass surfaces --- */

.planelly-glass {
    background: var(--lp-glass);
    border: 1px solid var(--lp-glass-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.planelly-glass-strong {
    background: var(--lp-glass-strong);
    border: 1px solid var(--lp-glass-border-strong);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.planelly-glass-hover {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.planelly-glass-hover:hover {
    transform: translateY(-3px);
    border-color: rgba(184, 131, 122, 0.35);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(196, 165, 116, 0.12);
    background: rgba(255, 255, 255, 0.1);
}

.planelly-page-ink {
    background-color: var(--lp-bg-ink);
    color: var(--lp-text);
    min-height: 100vh;
}

.planelly-mesh {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.planelly-mesh::before,
.planelly-mesh::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: planelly-mesh-drift 18s ease-in-out infinite alternate;
}

.planelly-mesh::before {
    width: min(70vw, 42rem);
    height: min(70vw, 42rem);
    top: -12%;
    left: 15%;
    background: radial-gradient(circle, var(--lp-mesh-1), transparent 68%);
}

.planelly-mesh::after {
    width: min(55vw, 34rem);
    height: min(55vw, 34rem);
    bottom: -8%;
    right: 5%;
    background: radial-gradient(circle, var(--lp-mesh-2), transparent 70%);
    animation-delay: -6s;
    animation-duration: 22s;
}

.planelly-mesh-spot {
    position: absolute;
    width: min(40vw, 24rem);
    height: min(40vw, 24rem);
    top: 40%;
    left: -8%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--lp-mesh-3), transparent 72%);
    filter: blur(70px);
    animation: planelly-mesh-drift 26s ease-in-out infinite alternate-reverse;
}

@keyframes planelly-mesh-drift {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(4%, -6%) scale(1.08);
    }
}

.planelly-fade-up {
    animation: planelly-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.planelly-fade-up-delay-1 {
    animation-delay: 0.12s;
}

.planelly-fade-up-delay-2 {
    animation-delay: 0.24s;
}

.planelly-fade-up-delay-3 {
    animation-delay: 0.36s;
}

@keyframes planelly-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glass theme: only the shell canvas is ink — leave content cards (bg-white / slate-50) alone */
.planelly-brand.planelly-glass-theme body,
html.planelly-brand.planelly-glass-theme {
    background-color: var(--lp-bg-ink);
    color: var(--lp-text);
    font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
}

.planelly-brand .font-display,
.font-display {
    font-family: Syne, Outfit, ui-sans-serif, system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
    .planelly-mesh::before,
    .planelly-mesh::after,
    .planelly-mesh-spot,
    .planelly-fade-up,
    .planelly-fade-up-delay-1,
    .planelly-fade-up-delay-2,
    .planelly-fade-up-delay-3 {
        animation: none !important;
    }

    .planelly-glass-hover:hover {
        transform: none;
    }
}