/* Cotlas keeps its surfaces tied to theme tokens so the light and dark
   palettes switch together with PNLCS's data-theme attribute. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --theme-primary-dark: #ff7043;
    --theme-nav-bg: #0a0a0a;
    --theme-sidebar-bg: #111111;
    --theme-sidebar-text: #d4d4d4;
    --theme-body-bg: #0a0a0a;
    --theme-card-bg: #141414;
    --theme-border-color: #292929;
    --theme-text-color: #e5e5e5;
    --theme-muted-color: #a3a3a3;
    --theme-footer-bg: #0a0a0a;
    --theme-hero-bg-start: #0a0a0a;
    --theme-hero-bg-mid: #111111;
    --theme-hero-bg-end: #0a0a0a;
    --theme-heading-color: #ffffff;
    --theme-badge-bg: #3a1c13;
    --theme-card-shadow: rgba(0, 0, 0, 0.4);
}

body,
.section-title,
.hero__title,
.hero__title-sub,
h1,
h2,
h3,
h4 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Light navigation and utility bar, with token values switching in dark mode. */
.top-bar,
.main-nav,
.main-nav.scrolled {
    background: var(--theme-nav-bg, #ffffff) !important;
    color: var(--theme-text-color, #333333) !important;
    border-bottom: 1px solid var(--theme-border-color, #e5e5e5) !important;
}

.top-bar {
    color: var(--theme-muted-color, #737373) !important;
}

.top-bar__item,
.top-bar__item:hover,
.top-bar__item a,
.main-nav__brand,
.main-nav__link,
.main-nav__link:hover,
.main-nav__item:hover > .main-nav__link,
.main-nav__cart,
.main-nav__cart:hover,
.main-nav__hamburger,
.dark-toggle {
    color: var(--theme-text-color, #333333) !important;
}

.main-nav__link:hover,
.main-nav__item:hover > .main-nav__link,
.main-nav__cart:hover,
.top-bar__item:hover {
    color: var(--theme-primary-dark, #e6471c) !important;
}

.top-bar__divider {
    background: var(--theme-border-color, #e5e5e5) !important;
}

.main-nav.scrolled {
    box-shadow: 0 4px 18px var(--theme-card-shadow, rgba(0, 0, 0, 0.08)) !important;
}

.main-nav__dropdown,
.main-nav__mega,
.main-nav__mobile-menu {
    background: var(--theme-card-bg, #ffffff) !important;
    color: var(--theme-text-color, #333333) !important;
    border-color: var(--theme-border-color, #e5e5e5) !important;
}

.main-nav__dropdown-link,
.main-nav__mobile-menu a {
    color: var(--theme-text-color, #333333) !important;
}

.main-nav__login {
    color: var(--theme-text-color, #333333) !important;
    border-color: var(--theme-border-color, #e5e5e5) !important;
}

/* The light palette makes the welcome hero white; the dark palette keeps it
   near-black without requiring separate hard-coded component colors. */
.hero {
    background: linear-gradient(
        135deg,
        var(--theme-hero-bg-start, #ffffff),
        var(--theme-hero-bg-mid, #fafafa),
        var(--theme-hero-bg-end, #ffffff)
    ) !important;
}

.hero__orb {
    opacity: 0.08 !important;
}

.hero__title,
.hero__title-sub,
.hero__desc {
    color: var(--theme-heading-color, #222222) !important;
}

.hero__title span {
    color: var(--theme-accent, #ff5722) !important;
}

.hero__desc {
    color: var(--theme-muted-color, #737373) !important;
}

.hero__stat {
    background: var(--theme-badge-bg, #fff1eb) !important;
    border-color: var(--theme-border-color, #e5e5e5) !important;
    color: var(--theme-text-color, #333333) !important;
}

.hero__title span,
.hero__stat i,
.hero__callout--1 i,
.hero__callout--2 i,
.footer__contact-item i,
.stats__number span {
    color: var(--theme-accent, #ff5722) !important;
}

.main-nav__brand-dot,
.footer__brand-dot {
    background: var(--theme-accent, #ff5722) !important;
}

.hero__badge {
    background: var(--theme-badge-bg, #fff1eb) !important;
    border-color: var(--theme-primary, #ff5722) !important;
    color: var(--theme-primary-dark, #e6471c) !important;
}

.hero__callout {
    background: var(--theme-card-bg, #ffffff) !important;
    color: var(--theme-text-color, #333333) !important;
    border: 1px solid var(--theme-border-color, #e5e5e5) !important;
}

/* Solid, brand-orange actions retain good contrast on either surface palette. */
.btn-primary,
.btn-accent,
.domain-search__btn,
.plan-card__badge,
.plan-card__btn--primary,
.main-nav__mega-promo,
.hosting-plans__promo,
.vps__visual {
    background: var(--theme-primary, #ff5722) !important;
    box-shadow: 0 4px 16px var(--theme-card-shadow, rgba(0, 0, 0, 0.08)) !important;
}

.btn-primary:hover,
.btn-accent:hover,
.domain-search__btn:hover,
.plan-card__btn--primary:hover {
    background: var(--theme-primary-dark, #e6471c) !important;
}

.main-nav__login:hover {
    border-color: var(--theme-primary, #ff5722) !important;
    background: var(--theme-primary, #ff5722) !important;
    color: #ffffff !important;
}

.main-nav__dropdown-link:hover,
.main-nav__dropdown-link i,
.plan-card__discount {
    color: var(--theme-primary-dark, #e6471c) !important;
}

.main-nav__mega-promo,
.hosting-plans__promo,
.vps__visual {
    color: #ffffff !important;
}

.plan-card,
.infra-card,
.testimonial-card,
.vps-card,
.faq__item {
    background: var(--theme-card-bg, #ffffff) !important;
    border: 1px solid var(--theme-border-color, #e5e5e5) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.plan-card:hover,
.infra-card:hover,
.testimonial-card:hover,
.vps-card:hover {
    box-shadow: 0 16px 40px var(--theme-card-shadow, rgba(0, 0, 0, 0.08)) !important;
    transform: translateY(-3px) !important;
}

.plan-card__discount {
    background: var(--theme-badge-bg, #fff1eb) !important;
}

.stats,
.cta-banner {
    background: linear-gradient(
        135deg,
        var(--theme-hero-bg-start, #ffffff),
        var(--theme-hero-bg-mid, #fafafa),
        var(--theme-hero-bg-end, #ffffff)
    ) !important;
    border-top: 1px solid var(--theme-border-color, #e5e5e5) !important;
    border-bottom: 1px solid var(--theme-border-color, #e5e5e5) !important;
}

.stats__number,
.cta-banner__title {
    color: var(--theme-heading-color, #222222) !important;
}

.stats__label,
.cta-banner__desc,
.cta-banner__note {
    color: var(--theme-muted-color, #737373) !important;
}

.footer {
    background: var(--theme-footer-bg, #ffffff) !important;
    color: var(--theme-text-color, #333333) !important;
    border-top: 1px solid var(--theme-border-color, #e5e5e5) !important;
}

.footer__brand,
.footer__col-title {
    color: var(--theme-heading-color, #222222) !important;
}

.footer__desc,
.footer__contact-item,
.footer__link,
.footer__bottom {
    color: var(--theme-muted-color, #737373) !important;
}

.footer__link:hover {
    color: var(--theme-primary-dark, #e6471c) !important;
}

.footer__bottom {
    border-color: var(--theme-border-color, #e5e5e5) !important;
}

.footer__social a {
    background: var(--theme-badge-bg, #fff1eb) !important;
    color: var(--theme-text-color, #333333) !important;
}

.footer__social a:hover {
    background: var(--theme-primary, #ff5722) !important;
    color: #ffffff !important;
}

.main-nav__mega-promo-btn {
    color: var(--theme-primary-dark, #e6471c) !important;
}

.cta-banner .btn-primary,
.cta-banner .btn-accent {
    color: #ffffff !important;
}

.infra-card__icon--1,
.infra-card__icon--2,
.infra-card__icon--3,
.infra-card__icon--4,
.infra-card__icon--5,
.infra-card__icon--6 {
    background: var(--theme-badge-bg, #fff1eb) !important;
    color: var(--theme-primary-dark, #e6471c) !important;
}

.vps-card__badge--popular,
.vps-card__badge--value {
    background: var(--theme-primary, #ff5722) !important;
    color: #ffffff !important;
}

.domain-search__bar:focus-within,
.domain-search__ext:hover {
    border-color: var(--theme-primary, #ff5722) !important;
    box-shadow: 0 6px 24px var(--theme-card-shadow, rgba(0, 0, 0, 0.08)) !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}