/*
 * Ryuko Custom Theme
 * Pink + Charcoal Aesthetic
 */

:root {
    --ryuko-dark: #181818;
    --ryuko-dark-secondary: #242424;
    --ryuko-dark-tertiary: #323232;

    --ryuko-pink: #ffb6c1;
    --ryuko-pink-light: #ffd6de;
    --ryuko-pink-hover: #ff9aa2;

    --ryuko-text: #f5f5f5;
    --ryuko-text-muted: #d1d1d1;
}

/* Main Background */

body {
    background: linear-gradient(
        135deg,
        #181818 0%,
        #242424 40%,
        #4a3f45 70%,
        #ffb6c1 100%
    ) !important;

    color: var(--ryuko-text);
}

/* Pink Ambient Glow */

body::before {
    content: "";
    position: fixed;
    inset: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,182,193,.18),
            transparent 40%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(255,214,222,.12),
            transparent 35%
        );

    pointer-events: none;
    z-index: 0;
}

/* Cards */

.card,
.product-card,
.feature-card,
.stat-card,
.panel {
    background: rgba(0,0,0,.45) !important;
    backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;

    box-shadow:
        0 0 25px rgba(255,182,193,.08);
}

/* Navbar */

.navbar,
header,
.navbar-container {
    background: rgba(0,0,0,.55) !important;

    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255,255,255,.05);
}

/* Buttons */

.btn,
button,
.btn-primary,
.btn-success {
    background: linear-gradient(
        135deg,
        #ffd1dc,
        #ffb6c1,
        #ff9aa2
    ) !important;

    color: #111 !important;
    border: none !important;

    border-radius: 12px;

    box-shadow:
        0 0 20px rgba(255,182,193,.35);

    transition: all .3s ease;
}

.btn:hover,
button:hover,
.btn-primary:hover,
.btn-success:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 35px rgba(255,182,193,.6);
}

/* Headings */

h1,
h2,
h3,
.hero-title {
    color: var(--ryuko-pink-light) !important;

    text-shadow:
        0 0 20px rgba(255,182,193,.5);
}

/* Text */

p,
span,
label,
small {
    color: var(--ryuko-text-muted);
}

/* Inputs */

input,
select,
textarea {
    background: rgba(0,0,0,.35) !important;

    border: 1px solid rgba(255,255,255,.08) !important;

    color: var(--ryuko-text) !important;

    border-radius: 12px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ryuko-pink) !important;

    box-shadow:
        0 0 15px rgba(255,182,193,.3);
}

/* Links */

a {
    color: var(--ryuko-pink-light);
}

a:hover {
    color: var(--ryuko-pink);
}

/* Scrollbar */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #181818;
}

::-webkit-scrollbar-thumb {
    background: #ffb6c1;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff9aa2;
}