@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

:root {
    --background-color: #0d0a12;
    --secondary-color: #1a1220;
    --border-color: #7a3fa0;
    --primary-color: #ff9a3c;
    --text-color: #f5e9d8;
    --text-muted: #b8a7a0;

    /* Variable names kept from the original: pink -> orange, blue -> purple */
    --accent-pink: #ff6a00;
    --accent-pink-light: #ffb066;
    --accent-blue: #8a4fd0;
    --accent-blue-light: #b995f2;

    --danger-color: #ff5c4d;
    --success-color: #7ed957;

    --gradient-primary: linear-gradient(135deg, #ff6a00 0%, #ffb347 100%);
    --gradient-dark: linear-gradient(135deg, #1a1220 0%, #2a1a30 100%);

    --font-heading: 'Creepster', 'Poppins', 'Segoe UI', system-ui, sans-serif;

    --shadow-card:
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 14px rgba(255, 106, 0, 0.1);
}

/* Page atmosphere ------------------------------------------------------- */
html {
    scrollbar-color: #ff6a00 #140d1a;
}

body {
    background-image:
        radial-gradient(ellipse at 50% -10%, rgba(255, 106, 0, 0.12), transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(138, 79, 208, 0.14), transparent 50%);
    background-attachment: fixed;
}

::selection {
    background: #ff6a00;
    color: #1a0f08;
}

/* Headings -------------------------------------------------------------- */
h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.04em;
}

h1 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

h1, h2 {
    color: var(--primary-color);
}

h3 {
    color: var(--accent-blue-light);
}

header h1 {
    text-shadow: 0 0 12px rgba(255, 106, 0, 0.6);
    animation: SpookyFlicker 5s infinite;
}

header h1::before {
    content: "🎃 ";
}

header h1::after {
    content: " 🦇";
}

@keyframes SpookyFlicker {
    0%, 90%, 94%, 100% { opacity: 1; }
    92%                { opacity: 0.55; }
    96%                { opacity: 0.8; }
}

/* Cards ----------------------------------------------------------------- */
.feature:hover,
.small-feature:hover {
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 106, 0, 0.25);
}

.feature-outlined {
    box-shadow:
        0 0 25px rgba(255, 106, 0, 0.18),
        0 0 25px rgba(138, 79, 208, 0.18);
}

.feature-outlined:hover {
    box-shadow:
        0 0 32px rgba(255, 106, 0, 0.28),
        0 0 32px rgba(138, 79, 208, 0.25);
}

.feature-children {
    border-left-color: rgba(138, 79, 208, 0.4);
}

.feature-icon {
    /* Re-tints the icon to pumpkin orange (approximate; tweak hue-rotate to taste) */
    filter:
        brightness(0)
        saturate(100%)
        invert(63%)
        sepia(89%)
        saturate(1500%)
        hue-rotate(345deg)
        brightness(102%)
        contrast(101%);
}

/* Buttons --------------------------------------------------------------- */
button:hover,
.standard-button:hover,
.small-standard-button:hover {
    color: #1a0f08;
    box-shadow:
        0 6px 20px rgba(255, 106, 0, 0.3),
        0 0 12px rgba(138, 79, 208, 0.25);
}

.danger-button:hover,
.small-danger-button:hover {
    color: #1a0f08;
    box-shadow: 0 6px 18px rgba(255, 92, 77, 0.35);
}

.hamburger-toggle:hover {
    box-shadow: 0 6px 18px rgba(255, 106, 0, 0.45);
}

/* Text on the orange gradient (active / selected states) */
.skip-link,
.nav-buttons .standard-button.active,
.dev-toggle.on,
.product-tab.active {
    color: #1a0f08;
}

/* Modal ----------------------------------------------------------------- */
.modal-overlay {
    background: rgba(5, 2, 8, 0.82);
}

.modal-content {
    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.6),
        0 0 22px rgba(255, 106, 0, 0.22);
}

/* Notifications (darker gradients keep light text readable) -------------- */
.notification.success {
    background: linear-gradient(135deg, #1c3510 0%, #4c9a2a 100%);
    color: #f2ffe8;
}

.notification.error {
    background: linear-gradient(135deg, #4a1410 0%, #c2381f 100%);
    color: #fff0ea;
}

/* Inputs ---------------------------------------------------------------- */
input,
.name-input,
#search-input,
.dev-field select,
.standard-checkbox {
    background-color: #140d1a;
}

input:focus,
.name-input:focus,
#search-input:focus,
input:focus-visible,
.name-input:focus-visible,
#search-input:focus-visible {
    box-shadow: 0 0 10px rgba(255, 106, 0, 0.3);
}

.standard-checkbox:checked {
    background: var(--gradient-primary);
    box-shadow: 0 0 10px rgba(255, 106, 0, 0.3);
}

.standard-checkbox:checked::after {
    color: #1a0f08;
}

.standard-checkbox:hover {
    box-shadow: 0 0 8px rgba(255, 106, 0, 0.35);
}

/* Status badges --------------------------------------------------------- */
.status-badge.developer {
    background-color: rgba(138, 79, 208, 0.12);
}

.status-badge.standard {
    background-color: rgba(255, 106, 0, 0.12);
}

.status-badge.premium {
    background-color: rgba(158, 240, 184, 0.08);
    color: #a8f0c0;
    border-color: #4f9f6c;
}

.status-badge.user {
    background-color: rgba(184, 167, 160, 0.07);
    border-color: #6b5a66;
}

/* News ------------------------------------------------------------------ */
.news-item:hover {
    background: #2e1c35;
    box-shadow: -5px 0 15px rgba(255, 106, 0, 0.25);
}