:root {
    --brand-color: var(--ghost-accent-color, #ff572f);
    --primary-text-color: #333;
    --secondary-text-color: #999;
    --white-color: #fff;
    --lighter-gray-color: #f6f6f6;
    --light-gray-color: #e6e6e6;
    --mid-gray-color: #ccc;
    --dark-gray-color: #444;
    --darker-gray-color: #1a1a1a;
    --black-color: #000;
    --green-color: #28a745;
    --orange-color: #ffc107;
    --red-color: #dc3545;
    --facebook-color: #3b5998;
    --twitter-color: #1da1f2;
    --rss-color: #f26522;
    --animation-base: ease-in-out;
    --font-sans: Mulish, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    --font-serif: Lora, Times, serif;
    --navbar-height: 80px;
    --content-font-size: 1.7rem;
    --header-spacing: 6vmin;
}

.is-head-brand {
    --header-spacing: 8vmin;
}

:where(h1, h2, h3, h4, h5, h6) {
    font-weight: 800;
}

/* sx example demos — on-demand CSS for interactive examples */
@keyframes sxFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.sx-fade-in {
    animation: sxFadeIn 0.5s ease-out;
}
.sx-loading-btn.sx-request {
    opacity: 0.7;
    pointer-events: none;
}
.sx-loading-btn.sx-request .sx-spinner {
    display: inline-block;
}
.sx-loading-btn .sx-spinner {
    display: none;
}

/* Subtle jiggle on links while fetching */
@keyframes sxJiggle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.5px); }
    75% { transform: translateX(0.5px); }
}
a.sx-request {
    animation: sxJiggle 0.3s ease-in-out infinite;
}
