:root {
    /* =====================================================
       CORE COLORS
       ===================================================== */

    --color-page: #fefefe;
    --color-surface: #ffffff;

    --color-text: #333;
    --color-text-strong: #222;
    --color-text-heading: #111;
    --color-text-secondary: #666;
    --color-text-muted: #777;

    --color-info-text: #1e3a5f;

    --color-error-text: #8a1f1f;
    --color-error-background: #fff7f7;

    --color-shadow:
        rgba(0, 0, 0, 0.08);


    /* =====================================================
       ZESTY BRAND COLORS
       ===================================================== */

    --zesty-lime: #39ff14;
    --zesty-green: #00ff99;
    --zesty-pink: #ff00cc;
    --zesty-hot-pink: #ff1493;


    /* =====================================================
       ZESTY GRADIENT
       ===================================================== */

    --zesty-gradient:
        repeating-linear-gradient(
            90deg,
            var(--zesty-lime) 0px,
            var(--zesty-green) 500px,
            var(--zesty-pink) 1000px,
            var(--zesty-hot-pink) 1500px,
            var(--zesty-lime) 2000px
        );
}


/* =========================================================
   PAGE
   ========================================================= */

body {
    background-color: var(--color-page);
    color: var(--color-text);
}

.background-box {
    background-color: var(--color-surface);
}

.intro h5,
.intro p {
    color: var(--color-info-text);
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    background-color: var(--color-surface);
    color: var(--color-text-heading);
}

.site-tagline {
    color: var(--color-text-secondary);
}


/* =========================================================
   POSTS
   ========================================================= */

.posts-container h3,
.post-description {
    color: var(--color-text-strong);
}

.zesty-post {
    background-color: var(--color-surface);
    box-shadow: 0 2px 6px var(--color-shadow);
}

.no-posts,
.character-count {
    color: var(--color-text-muted);
}


/* =========================================================
   ZESTY LINE
   ========================================================= */

.zesty-line {
    background: var(--zesty-gradient);
    background-size: 4000px 100%;
    animation: zestyMove 15s linear infinite;
}

@keyframes zestyMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 4000px 0;
    }
}


/* =========================================================
   BUTTONS
   ========================================================= */

.cta-button {
    background-color: var(--color-surface);
    color: var(--color-text-strong);
}

.cta-button::before {
    background: var(--zesty-gradient);
    background-size: 4000px 100%;
    animation: buttonZesty 15s linear infinite;
    z-index: -2;
}

.cta-button::after {
    background-color: var(--color-surface);
}

@keyframes buttonZesty {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 4000px 0;
    }
}


/* =========================================================
   SUCCESS / ERROR MESSAGES
   ========================================================= */

.success-message {
    color: var(--color-text);
    background:
        linear-gradient(
            var(--color-surface),
            var(--color-surface)
        ) padding-box,
        linear-gradient(
            90deg,
            var(--zesty-lime),
            var(--zesty-green),
            var(--zesty-pink),
            var(--zesty-hot-pink),
            var(--zesty-lime)
        ) border-box;

    box-shadow: 0 2px 6px var(--color-shadow);
}

.error-message {
    color: var(--color-error-text);
    background-color: var(--color-error-background);
    box-shadow: 0 2px 6px var(--color-shadow);
}


/* =========================================================
   ACCORDION
   ========================================================= */

.faq-item summary {
    color: var(--color-text-strong);
}

.faq-item summary::after {
    color: var(--color-text-muted);
}

.faq-item summary:hover {
    color: #000;
}

.faq-answer {
    color: #444;
}