/* ============================================================
   Intensity Hoops — Base / Global Styles
   (design tokens live in 00-variables.css)
   ============================================================ */


/* ── Typography ──────────────────────────────────────────── */

body {
    font-family: var(--font-body, "Inter", sans-serif);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, "Oswald", sans-serif);
    letter-spacing: 0.03em;
}


/* ── Base ────────────────────────────────────────────────── */

html {
    scrollbar-gutter: stable;
}

body,
.sp-preloader {
    background-color: var(--bg, #111111);
    color: var(--text, #ffffff);
}

.sp-preloader > div {
    background: var(--brand-primary, #1272ba);
}

.sp-preloader > div:after {
    background: var(--surface, #1c1c1c);
}


/* ── Links ───────────────────────────────────────────────── */

a {
    color: var(--link, #2e8fd4);
}

a:hover,
a:focus {
    color: var(--link-hover, #4da6e8);
}

a:active {
    color: var(--link-active, #1272ba);
}


/* ── Top bar ─────────────────────────────────────────────── */

#sp-top-bar {
    background: var(--topbar-bg, #0b1f4b);
    color: var(--topbar-text, #c5c5c5);
}

#sp-top-bar a {
    color: var(--topbar-text, #c5c5c5);
}

#sp-top-bar a:hover,
#sp-top-bar a:focus {
    color: var(--link-hover, #4da6e8);
}


/* ── Header ──────────────────────────────────────────────── */

#sp-header {
    background: var(--header-bg, #111111);
}

#sp-nav2 {
    background: var(--surface, #1c1c1c);
    border-top: 1px solid var(--border, rgba(18, 114, 186, 0.25));
}


/* ── Buttons ─────────────────────────────────────────────── */

.btn-primary,
.sppb-btn-primary {
    border-color: var(--brand-primary, #1272ba);
    background-color: var(--brand-primary, #1272ba);
    color: var(--white, #ffffff);
    border-radius: 1.5rem;
    padding: .65rem 1.5rem;
}

.btn-primary:hover,
.sppb-btn-primary:hover {
    border-color: var(--brand-primary-dark, #0d5a96);
    background-color: var(--brand-primary-dark, #0d5a96);
    color: var(--white, #ffffff);
}


/* ── Misc UI ─────────────────────────────────────────────── */

ul.social-icons > li a:hover {
    color: var(--brand-primary-light, #2e8fd4);
}

.sp-reading-progress-bar {
    background-color: var(--brand-primary, #1272ba);
}

.sp-page-title {
    background: var(--page-title-bg, #0a0a0a);
}

.layout-boxed .body-innerwrapper {
    background: var(--surface, #1c1c1c);
}

.tags > li a {
    background: var(--brand-primary-tint, rgba(18, 114, 186, 0.15));
    color: var(--brand-primary-light, #2e8fd4);
}

.tags > li a:hover {
    background: var(--brand-primary, #1272ba);
    color: var(--white, #ffffff);
}

.pager > li a {
    border: 1px solid var(--border, rgba(18, 114, 186, 0.25));
    color: var(--text, #ffffff);
}

.article-social-share .social-share-icon ul li a {
    color: var(--text, #ffffff);
}

.article-social-share .social-share-icon ul li a:hover,
.article-social-share .social-share-icon ul li a:focus {
    background: var(--brand-primary, #1272ba);
    color: var(--white, #ffffff);
}

.search .btn-toolbar button {
    background: var(--brand-primary, #1272ba);
    color: var(--white, #ffffff);
}

.sp-comingsoon body {
    background-color: var(--bg, #111111);
}

.error-code,
.coming-soon-number {
    color: var(--brand-primary-light, #2e8fd4);
}


/* ── Modules ─────────────────────────────────────────────── */

.sp-module ul > li > a {
    color: var(--link, #2e8fd4);
}

.sp-module ul > li > a:hover {
    color: var(--link-hover, #4da6e8);
}

.sp-module .latestnews > div > a {
    color: var(--link, #2e8fd4);
}

.sp-module .latestnews > div > a:hover {
    color: var(--link-hover, #4da6e8);
}

.sp-module .tagscloud .tag-name:hover {
    background: var(--brand-primary, #1272ba);
    color: var(--white, #ffffff);
}

#sp-bottom .sp-module-content .latestnews > li > a > span {
    color: var(--text, #ffffff);
}


/* ── Pagination ──────────────────────────────────────────── */

.pagination > li > a,
.pagination > li > span {
    color: var(--text, #ffffff);
    background-color: var(--surface, #1c1c1c);
    border-color: var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
    color: var(--brand-primary-light, #2e8fd4);
    background-color: var(--surface-2, #262626);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    border-color: var(--brand-primary, #1272ba);
    background-color: var(--brand-primary, #1272ba);
    color: var(--white, #ffffff);
}


/* ── Footer ──────────────────────────────────────────────── */

#sp-bottom {
    border-top: 1px solid var(--brand-primary, #1272ba);
}


#sp-footer,
#sp-bottom {
    background: var(--footer-bg, #0a0a0a);
    color: var(--footer-text, #e0e0e0);
}

#sp-footer a,
#sp-bottom a {
    color: var(--footer-link, #a0a0a0);
}

#sp-footer a:hover,
#sp-footer a:active,
#sp-footer a:focus,
#sp-bottom a:hover,
#sp-bottom a:active,
#sp-bottom a:focus {
    color: var(--text, #ffffff);
}