:root {
    /* Color palette (semantic) */
    --color-bg-light-start: #f8fafc;
    --color-bg-light-mid: #e2e8f0;
    --color-bg-light-end: #95f3ec;

    --color-bg-dark-start: #1a1c1f;
    --color-bg-dark-mid: #2a3039;
    --color-bg-dark-end: #186c66;

    --color-primary: #1a202c;
    /* main dark text / header */
    --color-text: #2d3748;
    /* primary content text */
    --color-muted: #718096;
    /* lighter muted text */
    --color-muted-2: #a0aec0;
    /* secondary muted */
    --color-meta: #4a5568;
    /* meta text */
    --color-divider: #565859;
    --color-border: #cbd5e0;

    --color-surface: #f7fafc;
    /* cards / surfaces */
    --color-quote-bg: #f0f9ff;
    --color-highlight: #1a9d8a;
    /* green highlight */
    --color-accent-1: #2d8a7f;
    /* darker teal */
    --color-accent-2: #4fd1c7;
    /* mint */
    --color-accent-3: #38b2ac;
    /* teal */
    --color-quote-text: #0369a1;
    --color-quote-mark: #000d5e;

    --color-shadow-weak: rgba(0, 0, 0, 0.05);

    --color-wave-2: #F5F5F5;
    --color-wave-3: #f1f1e6;

    /* accessibility / special */
    --color-focus: var(--color-accent-2);
    --color-progress-dark: #000;

    /* Additional mapped literals used across files */
    --color-white: #ffffff;
    --color-black: #000000;

    /* yellows */
    --color-yellow-1: #ffc107;
    --color-yellow-2: #fbbf24;
    --color-yellow-3: #f59e0b;

    /* purples / decorative */
    --color-purple-1: #667eea;
    --color-purple-2: #764ba2;

    /* complementary greens/blues */
    --color-accent-4: #38f9d7;
    --color-accent-alt: #319795;
    --color-teal-strong: #11998e;
    --color-teal-strong-2: #2decdc;

    /* social / brand */
    --color-facebook: #1877f2;

    /* danger / success */
    --color-danger: #e53e3e;
    --color-success: #38a169;
    --color-success-2: #9ae6b4;
    --color-success-3: #276749;

    /* background/deep */
    --color-deep-1: #111827;
    --color-deep-2: #1c1f24;
    --color-deep-3: #0f2d2b;

    /* light neutrals (already present as duplicates) */
    --c-cbd5e0: #cbd5e0;
    --c-565859: #565859;
    --c-667eea: #667eea;
    --c-764ba2: #764ba2;

    /* rgba variants used inline elsewhere */
    --accent-2-03: rgba(79, 209, 199, 0.3);
    --accent-2-04: rgba(79, 209, 199, 0.4);
    --accent-2-02: rgba(79, 209, 199, 0.2);
    --shadow-0-1: rgba(0, 0, 0, 0.1);
    --shadow-0-08: rgba(0, 0, 0, 0.08);
    --shadow-0-12: rgba(0, 0, 0, 0.12);
    --muted-0-05: rgba(0, 0, 0, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, var(--color-bg-light-start) 0%, var(--color-bg-light-mid) 50%, var(--color-bg-light-end) 100%);
    line-height: 1.6;
}

body.dark-theme {
    background: linear-gradient(135deg, var(--color-bg-dark-start) 0%, var(--color-bg-dark-mid) 50%, var(--color-bg-dark-end) 100%);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.loading-dots {
    display: flex;
    gap: 3vw;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.loading-dots span {
    display: block;
    width: 4vw;
    height: 4vw;
    max-width: 20px;
    max-height: 20px;
    min-width: 8px;
    min-height: 8px;
    background: #0cbda5;
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

.loading-overlay p {
    margin-top: 15px;
    font-size: 16px;
    color: #000;
}

.loading-spinner p {
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #2d3748;
    margin: 0;
}

body.dark-theme .loading-overlay {
    background: #1c1f24;
}


body.dark-theme .loading-spinner p {
    color: #f7fafc;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-dots {
        animation: none;
    }
}

@media (max-width: 768px) {
    .loading-dots {
        width: 40px;
        height: 40px;
        border-width: 4px;
    }

    .loading-spinner p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .loading-dots span {
        width: 12px;
        height: 12px;
    }

    .loading-dots {
        width: 32px;
        height: 32px;
        border-width: 3px;
        gap: 8px
    }

    .loading-spinner p {
        font-size: 0.85rem;
    }
}