/* =====================================================================
   THEME · VAPORWAVE — pink/purple gradient, retro sunset, 80s chrome
   ===================================================================== */

[data-theme="vaporwave"] {
    --bg: #1A0B3A;
    --bg-alt: #2B0F5A;
    --bg-card: rgba(43, 15, 90, 0.5);
    --fg: #FFE8FA;
    --fg-muted: #FFB8E6;
    --accent: #FF5EC4;
    --accent-dark: #E83DA8;
    --accent-contrast: #0A0218;
    --accent-glow: rgba(255, 94, 196, 0.4);
    --border: rgba(0, 240, 255, 0.3);

    --font-head: "Monoton", "Audiowide", sans-serif;
    --font-body: "Rajdhani", "Chakra Petch", sans-serif;
    --font-weight-head: 400;

    --radius: 4px;
    --radius-sm: 2px;
    --stroke: 1px;
    --density: 1.1;
    --section-pad: clamp(3.5rem, 8vw, 6rem);
    --photo-filter: saturate(1.2) hue-rotate(-10deg);
    --shadow-card: 0 0 24px rgba(255,94,196,0.3), inset 0 0 0 1px rgba(0,240,255,0.3);
    --btn-shape: 2px;
}

/* Sunset gradient bg + grid floor */
[data-theme="vaporwave"] body {
    background:
        linear-gradient(180deg, #1A0B3A 0%, #4A1A8A 45%, #FF5EC4 70%, #FFB84D 85%, #FFE6A8 100%);
    background-attachment: fixed;
    min-height: 100vh;
}
[data-theme="vaporwave"] body::before {
    content: "";
    position: fixed; inset: 50% 0 0 0; pointer-events: none; z-index: 1;
    background:
        linear-gradient(to bottom, transparent 0%, #1A0B3A 80%),
        repeating-linear-gradient(90deg, transparent 0 36px, rgba(255,94,196,0.4) 36px 37px),
        repeating-linear-gradient(180deg, transparent 0 36px, rgba(255,94,196,0.3) 36px 37px);
    transform: perspective(400px) rotateX(60deg);
    transform-origin: center top;
    mix-blend-mode: screen;
    opacity: 0.5;
}

/* Hero — chrome text effect */
[data-theme="vaporwave"] .hero h1 {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFC4F7 40%, #FF5EC4 70%, #B04ECF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 30px rgba(255,94,196,0.6);
    letter-spacing: 0.05em;
}

/* Cards — glass with neon edge */
[data-theme="vaporwave"] .card,
[data-theme="vaporwave"] .paket,
[data-theme="vaporwave"] .work-card,
[data-theme="vaporwave"] .faq-item {
    background: rgba(26,11,58,0.5);
    border: 1px solid rgba(0,240,255,0.4);
    border-radius: 4px;
    box-shadow: 0 0 24px rgba(255,94,196,0.3), inset 0 0 0 1px rgba(0,240,255,0.2);
    backdrop-filter: blur(14px);
}

/* Buttons */
[data-theme="vaporwave"] .btn-primary {
    background: linear-gradient(135deg, #FF5EC4, #00F0FF);
    color: #1A0B3A;
    border: none;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    box-shadow: 0 0 24px rgba(255,94,196,0.5);
}
[data-theme="vaporwave"] .btn-secondary {
    background: transparent;
    color: #00F0FF;
    border: 1px solid #00F0FF;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    box-shadow: 0 0 18px rgba(0,240,255,0.4);
}

[data-theme="vaporwave"] .section-eyebrow,
[data-theme="vaporwave"] .hero-eyebrow {
    color: #00F0FF;
    text-shadow: 0 0 6px #00F0FF;
    letter-spacing: 0.25em;
}

/* Tile */
.tile-preview[data-theme="vaporwave"] {
    background: linear-gradient(180deg, #1A0B3A, #FF5EC4);
    color: #FFE8FA;
}
.tile-preview[data-theme="vaporwave"] .tile-head {
    background: linear-gradient(180deg, #FFFFFF, #FF5EC4);
    background-clip: text; -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.tile-preview[data-theme="vaporwave"] .tile-dot {
    background: #00F0FF; box-shadow: 0 0 10px #00F0FF;
}