/* ==========================================================================
   THEME: NEUMORPHISM — "Ocean Soft UI"
   Identity: calm, tactile, soft-pressed surfaces. Cool slate neutrals with
   a cyan/sky-blue accent duo. This file is fully self-contained: it owns
   every color used across the landing pages while [data-ui-style="neumorphism"]
   is active, so it never mixes with the other four themes.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

[data-ui-style="neumorphism"] {
    --font-primary: 'Outfit', 'Inter', sans-serif;
}

/* ---- Dark mode palette ---- */
[data-ui-style="neumorphism"][data-theme="dark"] {
    --bg-primary: #10151f;
    --bg-secondary: #171f2e;
    --text-primary: #eef3f9;
    --text-secondary: #93a3ba;
    --text-muted: #5c6b82;

    --accent-color: #22d3ee;
    --accent-color-2: #38bdf8;
    --accent-color-3: #0ea5e9;
    --accent-glow: rgba(34, 211, 238, 0.35);
    --accent-light: #a5f3fc;

    --nm-shadow-flat-dark: 8px 8px 18px #080b12;
    --nm-shadow-flat-light: -8px -8px 18px #202b40;
    --nm-shadow-inset-dark: inset 6px 6px 12px #070a10, inset -6px -6px 12px #212c42;

    --glass-bg: rgba(23, 31, 46, 0.6);
    --glass-border: rgba(148, 197, 219, 0.12);
    --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);

    --dock-bg: rgba(17, 23, 35, 0.8);
    --dock-border: rgba(34, 211, 238, 0.15);
    --bg-ambient: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(34, 211, 238, 0.10) 0%, transparent 60%);
}

/* ---- Light mode palette ---- */
[data-ui-style="neumorphism"][data-theme="light"] {
    --bg-primary: #dfe7f0;
    --bg-secondary: #eef2f8;
    --text-primary: #223047;
    --text-secondary: #5b6b83;
    --text-muted: #8a97ab;

    --accent-color: #0891b2;
    --accent-color-2: #0ea5e9;
    --accent-color-3: #0369a1;
    --accent-glow: rgba(8, 145, 178, 0.28);
    --accent-light: #cffafe;

    --nm-shadow-flat-dark: 9px 9px 16px #b7c3d6;
    --nm-shadow-flat-light: -9px -9px 16px #ffffff;
    --nm-shadow-inset-dark: inset 6px 6px 10px #c1cddf, inset -6px -6px 10px #ffffff;

    --glass-bg: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(8, 145, 178, 0.15);
    --glass-shadow: 0 8px 28px rgba(31, 68, 90, 0.12);

    --dock-bg: rgba(238, 242, 248, 0.85);
    --dock-border: rgba(8, 145, 178, 0.18);
    --bg-ambient: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(8, 145, 178, 0.12) 0%, transparent 60%);
}

/* ---- Component identity: soft pressed surfaces, generous radius ---- */
[data-ui-style="neumorphism"] .glass-card,
[data-ui-style="neumorphism"] .nm-flat {
    background: var(--bg-secondary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 24px;
    box-shadow: var(--nm-shadow-flat-dark), var(--nm-shadow-flat-light);
}

[data-ui-style="neumorphism"] .glass-card:hover,
[data-ui-style="neumorphism"] .nm-flat:hover {
    box-shadow: 12px 12px 24px var(--nm-shadow-flat-dark), -12px -12px 24px var(--nm-shadow-flat-light);
    transform: translateY(-3px);
}

[data-ui-style="neumorphism"] .nm-inset {
    background: var(--bg-primary);
    box-shadow: var(--nm-shadow-inset-dark);
    border: none;
    border-radius: 14px;
}

[data-ui-style="neumorphism"] .nm-button {
    background: var(--bg-secondary);
    box-shadow: var(--nm-shadow-flat-dark), var(--nm-shadow-flat-light);
    border: none;
    border-radius: 16px;
    color: var(--text-primary);
}

[data-ui-style="neumorphism"] .nm-button:hover {
    color: var(--accent-color);
}

/* AI assistant toggle keeps its accent-colored icon here since the button
   background is neutral (bg-secondary), so there's no contrast clash. */
[data-ui-style="neumorphism"] .ai-toggle-btn {
    color: var(--accent-color);
}

[data-ui-style="neumorphism"] .badge {
    box-shadow: var(--nm-shadow-flat-dark), var(--nm-shadow-flat-light);
    background: var(--bg-secondary);
    color: var(--accent-color);
}

[data-ui-style="neumorphism"] h1,
[data-ui-style="neumorphism"] h2,
[data-ui-style="neumorphism"] h3 {
    letter-spacing: -0.01em;
}

[data-ui-style="neumorphism"] .primary-nav-link.active,
[data-ui-style="neumorphism"] .primary-nav-link:hover {
    background: var(--nm-shadow-inset-dark) padding-box, transparent;
    box-shadow: var(--nm-shadow-inset-dark);
}

[data-ui-style="neumorphism"] .floating-dock {
    box-shadow: var(--nm-shadow-flat-dark), var(--nm-shadow-flat-light);
}

[data-ui-style="neumorphism"] .style-picker-menu {
    box-shadow: var(--nm-shadow-flat-dark), var(--nm-shadow-flat-light);
}

[data-ui-style="neumorphism"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-color), var(--accent-color-3));
}
/* ---- Extra polish: slow-breathing ambient glow + icy gradient headline ---- */
[data-ui-style="neumorphism"] .interactive-bg {
    background-size: 160% 160%;
    animation: neumorphism-breathe 9s ease-in-out infinite alternate;
}

@keyframes neumorphism-breathe {
    0%   { opacity: 0.6; background-position: 40% 40%; }
    100% { opacity: 1; background-position: 60% 60%; }
}

[data-ui-style="neumorphism"] h1,
[data-ui-style="neumorphism"] h2 {
    background: linear-gradient(100deg, var(--accent-color) 0%, var(--accent-color-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-color);
}

[data-ui-style="neumorphism"] .nm-button {
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

[data-ui-style="neumorphism"] .nm-button:hover {
    transform: translateY(-2px);
    box-shadow: 10px 10px 20px var(--nm-shadow-flat-dark), -10px -10px 20px var(--nm-shadow-flat-light);
}

[data-ui-style="neumorphism"] .nm-button:active {
    box-shadow: var(--nm-shadow-inset-dark);
    transform: translateY(0);
}

[data-ui-style="neumorphism"] .badge {
    border-radius: 999px;
    padding: 4px 12px;
    position: relative;
}

[data-ui-style="neumorphism"] .badge::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    transform: translateY(-50%);
    box-shadow: 0 0 8px var(--accent-color);
    animation: neumorphism-ping 2.4s ease-in-out infinite;
}

[data-ui-style="neumorphism"] .badge {
    padding-left: 22px;
}

@keyframes neumorphism-ping {
    0%, 100% { box-shadow: 0 0 6px var(--accent-color); opacity: 1; }
    50% { box-shadow: 0 0 14px var(--accent-color); opacity: 0.6; }
}

[data-ui-style="neumorphism"] .brand {
    background: linear-gradient(100deg, var(--accent-color), var(--accent-color-3));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-ui-style="neumorphism"] .nm-button:focus-visible,
[data-ui-style="neumorphism"] a:focus-visible,
[data-ui-style="neumorphism"] button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

[data-ui-style="neumorphism"] ::selection {
    background: var(--accent-color);
    color: #10151f;
}

@media (prefers-reduced-motion: reduce) {
    [data-ui-style="neumorphism"] .interactive-bg,
    [data-ui-style="neumorphism"] .badge::before {
        animation: none;
    }
}