/* HOSTREND THEME FOUNDATION v1.0
   Linked from theme-enabled website-design pages, Free Website Design, and internal Design System test pages.
   Theme-specific semantic tokens are centralized here and consumed by reusable components. */
:root {
  color-scheme: light;
  --theme-page: #FFFFFF;
  --theme-surface: #FFFFFF;
  --theme-surface-muted: #F8FAFC;
  --theme-surface-raised: #FFFFFF;
  --theme-text: #131B24;
  --theme-text-muted: #64748B;
  --theme-border: #E2E8F0;
  --theme-primary: #2119FF;
  --theme-on-primary: #FFFFFF;
  --theme-focus: #2119FF;
  --theme-shadow: 0 8px 24px rgba(19,27,36,.08);
  --form-inline-cta-surface: #FFFFFF;
  --form-inline-cta-border: #E2E8F0;
  --form-inline-cta-text: #131B24;
  --form-inline-cta-placeholder: #64748B;
  --form-inline-cta-button-bg: #2119FF;
  --form-inline-cta-button-text: #FFFFFF;
  --form-inline-cta-highlight: rgba(255,255,255,.72);
  --form-inline-cta-shadow: 0 4px 14px rgba(19,27,36,.10);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --theme-page: #000000;
  --theme-surface: #000000;
  --theme-surface-muted: #000000;
  --theme-surface-raised: #000000;
  --theme-text: #FFFFFF;
  --theme-text-muted: #D4D4D4;
  --theme-border: #292929;
  --theme-primary: #514BFF;
  --theme-on-primary: #FFFFFF;
  --theme-focus: #A5A1FF;
  --theme-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.64);
  /* Business-name form deliberately uses the same approved Light-style treatment in every theme. */
  --form-inline-cta-surface: #FFFFFF;
  --form-inline-cta-border: #E2E8F0;
  --form-inline-cta-text: #131B24;
  --form-inline-cta-placeholder: #64748B;
  --form-inline-cta-button-bg: #2119FF;
  --form-inline-cta-button-text: #FFFFFF;
  --form-inline-cta-highlight: rgba(255,255,255,.72);
  --form-inline-cta-shadow: 0 4px 14px rgba(19,27,36,.10);
  /* Global animated mesh: Hostrend Blue moving softly into Pure Black in Dark Theme. */
  --gradient-hostrend-animated-mesh-end: var(--color-black);
  --gradient-hostrend-animated-mesh-glow-primary: rgba(33,25,255,.24);
  --gradient-hostrend-animated-mesh-glow-secondary: rgba(0,0,0,.22);
  --gradient-hostrend-animated-mesh-glow-tertiary: rgba(0,0,0,.16);
  --gradient-hostrend-animated-mesh-overlay-opacity: .38;
  --gradient-free-website-design-hero-mid: color-mix(in oklch, var(--color-primary) 50%, var(--color-black) 50%);
  --gradient-free-website-design-hero-end: var(--color-black);
  /* Dark-mode premium glass trust badge: keep rating and icons white over the blue hero. */
  --trust-badge-dark-surface: rgba(255,255,255,.07);
  --trust-badge-dark-text: var(--color-white);
  --trust-badge-dark-muted: rgba(255,255,255,.78);
  --trust-badge-dark-icon: var(--color-white);
  --trust-badge-dark-mark-bg: rgba(255,255,255,.10);
  --trust-badge-dark-mark-fg: var(--color-white);
  --trust-badge-dark-border: rgba(255,255,255,.26);
  --trust-badge-dark-shadow: none;
  --trust-badge-dark-shadow-hover: none;
  --trust-badge-dark-reflection: rgba(255,255,255,.07);
  --trust-badge-dark-sheen: rgba(255,255,255,.05);
  --trust-badge-dark-edge-highlight: rgba(255,255,255,.38);
  --trust-badge-dark-sheen-opacity: .24;
  /* Backward-compatible semantic text/border tokens, scoped to pages loading this file. */
  --color-dark: #FFFFFF;
  --color-secondary-text: #D4D4D4;
  --color-border: #292929;
  --color-light-bg: #000000;
  --color-neutral-100: #000000;
  --color-neutral-700: #D4D4D4;
  --color-hover-surface: #111111;
  --color-background: #000000;
  /* Customer logo marquee uses pure black, white typography and monochrome white marks in Dark/System-dark mode. */
  --customer-logo-marquee-background: #000000;
  --customer-logo-marquee-text: #FFFFFF;
  --customer-logo-marquee-border: transparent;
  --customer-logo-marquee-logo-filter: brightness(0) invert(1);
  --customer-logo-marquee-logo-opacity: .76;
}
html[data-theme] { background: var(--theme-page); }
html[data-theme] body { background: var(--theme-page); color: var(--theme-text); color-scheme: inherit; }
html[data-theme] :where(input, textarea, select, option) { color-scheme: inherit; }
html[data-theme="dark"] ::selection { background: #3730FF; color: #FFFFFF; }

/* Pure-black Dark Theme, confined to the Website Design page. */
html[data-theme="dark"] body.free-website-design-page { background: #000000 !important; color: #FFFFFF; }
html[data-theme="dark"] body.free-website-design-page main > section:not(.hr-theme-lab):not(.free-website-design-hero),
html[data-theme="dark"] body.free-website-design-page .free-website-design-stats,
html[data-theme="dark"] body.free-website-design-page .free-website-design-feature-showcase,
html[data-theme="dark"] body.free-website-design-page .free-website-design-benefits,
html[data-theme="dark"] body.free-website-design-page .free-website-design-portfolio,
html[data-theme="dark"] body.free-website-design-page .free-website-design-value,
html[data-theme="dark"] body.free-website-design-page .free-website-design-process,
html[data-theme="dark"] body.free-website-design-page .free-website-design-faq,
html[data-theme="dark"] body.free-website-design-page .logo-design-reviews,
html[data-theme="dark"] body.free-website-design-page .host-service-cta {
  background: #000000 !important;
  background-image: none !important;
  color: #FFFFFF !important;
}
/* Free Website Design hero remains solid Hostrend Blue in every theme. */
html[data-theme="dark"] body.free-website-design-page .free-website-design-hero {
  background: #2119FF !important;
  background-color: #2119FF !important;
  background-image: none !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] body.free-website-design-page main :is(h1,h2,h3,h4,h5,h6) { color: #FFFFFF !important; }
html[data-theme="dark"] body.free-website-design-page main :is(p,li,label,small,dt,dd,figcaption,.free-website-design-hero__benefit-text,.free-website-design-hero__availability,.free-website-design-feature-showcase__intro,.free-website-design-feature-showcase__panel p,.free-website-design-stats__item p,.free-website-design-benefits__card-description,.free-website-design-portfolio__card-description,.free-website-design-value__lead,.free-website-design-process__intro,.free-website-design-faq__answer,.logo-design-review-card__name,.logo-design-review-card__quote,.logo-design-review-card__country,.host-service-cta__description,.host-service-cta__trust-label) { color: #D4D4D4 !important; }
html[data-theme="dark"] body.free-website-design-page :is(.free-website-design-stats__panel,.free-website-design-feature-showcase__visual-frame,.free-website-design-feature-showcase__item,.free-website-design-feature-showcase__panel,.free-website-design-benefits__card,.free-website-design-portfolio__card,.free-website-design-portfolio__media-frame,.free-website-design-portfolio__preview-device-shell,.free-website-design-portfolio__preview-viewport,.free-website-design-portfolio__preview-browser-bar,.free-website-design-value__image-frame,.free-website-design-process__shell,.free-website-design-process__panel,.free-website-design-faq__item,.free-website-design-faq__column,.logo-design-review-card,.host-service-cta__panel,.free-website-design-hero__tooltip) {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #FFFFFF;
  border-color: #292929 !important;
  box-shadow: none;
}
html[data-theme="dark"] body.free-website-design-page :is(.free-website-design-feature-showcase__trigger,.free-website-design-portfolio__filter-button,.free-website-design-process__tab,.free-website-design-faq__item button) {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  border-color: #292929 !important;
}
html[data-theme="dark"] body.free-website-design-page .free-website-design-hero__title,
html[data-theme="dark"] body.free-website-design-page .free-website-design-hero__eyebrow,
html[data-theme="dark"] body.free-website-design-page .free-website-design-hero__benefit,
html[data-theme="dark"] body.free-website-design-page .free-website-design-hero__availability { color: #FFFFFF !important; }
html[data-theme="dark"] body.free-website-design-page .free-website-design-hero__benefit-icon,
html[data-theme="dark"] body.free-website-design-page .free-website-design-hero__availability-icon { color: #FFFFFF !important; }
html[data-theme="dark"] body.free-website-design-page .free-website-design-hero__benefit-icon .host-icon,
html[data-theme="dark"] body.free-website-design-page .free-website-design-hero__availability-icon .host-icon { color: #FFFFFF !important; }
html[data-theme="dark"] body.free-website-design-page .hr-header.is-scroll-solid,
html[data-theme="dark"] body.free-website-design-page .hr-header.is-scroll-solid .hr-header__inner {
  background: #000000 !important; color: #FFFFFF !important; border-bottom-color: #292929 !important;
}
html[data-theme="dark"] body.free-website-design-page .hr-header.is-scroll-solid .hr-header__logo,
html[data-theme="dark"] body.free-website-design-page .hr-header--light-top:not(.is-scroll-solid) .hr-header__logo { content: url('/design-system/media-library/logos/hostrend-full-white-logo-design.webp'); }
html[data-theme="dark"] body.free-website-design-page .hostrend-canva-footer {
  --hf-bg: #000000; --hf-ink: #FFFFFF; --hf-text: #D4D4D4; --hf-muted: #BDBDBD; --hf-border: #292929;
  background: #000000 !important; color: #D4D4D4 !important; border-top-color: #292929 !important;
}
html[data-theme="dark"] body.free-website-design-page .hr-navigation__mobile-drawer,
html[data-theme="dark"] body.free-website-design-page .host-mega-menu,
html[data-theme="dark"] body.free-website-design-page .host-mega-menu__panel,
html[data-theme="dark"] body.free-website-design-page .hr-navigation__mobile-submenu { background: #000000 !important; color: #FFFFFF !important; border-color: #292929 !important; }

/* Design System live test page only. */
.hr-theme-lab { margin:0; padding:clamp(24px,4vw,56px) clamp(16px,4vw,40px); background:var(--theme-page); color:var(--theme-text); font-family:var(--font-primary,"Be Vietnam Pro",sans-serif); }
.hr-theme-lab__inner { width:min(100%,1200px); margin-inline:auto; }
.hr-theme-lab__eyebrow { margin:0 0 8px; color:var(--theme-text-muted); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.hr-theme-lab h1 { margin:0 0 10px; color:var(--theme-text); font-size:clamp(28px,4vw,44px); line-height:1.1; letter-spacing:-.035em; }
.hr-theme-lab__intro { max-width:720px; margin:0 0 20px; color:var(--theme-text-muted); font-size:14px; line-height:1.65; }
.hr-theme-lab__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hr-theme-lab__card { min-width:0; padding:18px; border:1px solid var(--theme-border); border-radius:14px; background:var(--theme-surface); color:var(--theme-text); box-shadow:var(--theme-shadow); }
.hr-theme-lab__card h2 { margin:0 0 8px; color:var(--theme-text); font-size:17px; }
.hr-theme-lab__card p { margin:0 0 14px; color:var(--theme-text-muted); font-size:13px; line-height:1.55; }
.hr-theme-lab__button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 12px; border:1px solid var(--theme-border); border-radius:8px; background:var(--theme-surface); color:var(--theme-text); font:600 12px/1 var(--font-primary,sans-serif); cursor:pointer; }
.hr-theme-lab__button--primary { border-color:#2119FF; background:#2119FF; color:#FFFFFF; }
.hr-theme-lab__field { display:block; width:100%; min-height:40px; margin-top:9px; padding:0 11px; border:1px solid var(--theme-border); border-radius:8px; background:var(--theme-surface); color:var(--theme-text); font:14px var(--font-primary,sans-serif); }
.hr-theme-lab__token-row,.hr-theme-lab__status,.hr-theme-lab__mode-controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.hr-theme-lab__token,.hr-theme-lab__badge { display:inline-flex; align-items:center; gap:7px; padding:6px 9px; border:1px solid var(--theme-border); border-radius:999px; color:var(--theme-text-muted); font-size:11px; }
.hr-theme-lab__swatch { width:11px; height:11px; flex:0 0 11px; border:1px solid var(--theme-border); border-radius:50%; background:var(--theme-surface); }
.hr-theme-lab__swatch--page { background:var(--theme-page); }
.hr-theme-lab__swatch--text { background:var(--theme-text); }
.hr-theme-lab__swatch--border { background:var(--theme-border); }
.hr-theme-lab__button.is-active { outline:2px solid var(--theme-focus); outline-offset:2px; }
@media (max-width:820px) { .hr-theme-lab__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .hr-theme-lab__grid { grid-template-columns:minmax(0,1fr); } .hr-theme-lab__card { padding:15px; } }

/* Dark-mode header and sticky section navigation refinements on theme-enabled pages. */
html[data-theme="dark"] .hr-header {
  --hr-header-top-text: #FFFFFF;
  --hr-header-solid-text: #FFFFFF;
  --hr-header-surface: #000000;
  --hr-header-border: #292929;
  --hr-header-shadow: 0 8px 24px rgba(0,0,0,.60);
}
html[data-theme="dark"] .hr-header.is-scroll-solid,
html[data-theme="dark"] .hr-header.is-scroll-solid .hr-header__inner {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid #292929 !important;
}
html[data-theme="dark"] .hr-header.is-scroll-solid .hr-header__logo,
html[data-theme="dark"] .hr-header--light-top:not(.is-scroll-solid) .hr-header__logo {
  content: url('/design-system/media-library/logos/hostrend-full-white-logo-design.webp');
}
html[data-theme="dark"] .free-website-design-hero__nav-slot .host-section-navigation__bar,
html[data-theme="dark"] .free-website-design-hero__nav-slot .host-section-navigation__viewport,
html[data-theme="dark"] .free-website-design-hero__nav-slot .host-section-navigation.is-stuck .host-section-navigation__bar {
  background: #000000 !important;
  border-color: #292929 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .free-website-design-hero__nav-slot .host-section-navigation__link:not(.is-active) {
  background: #000000 !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] .free-website-design-hero__visual::after,
html[data-theme="dark"] .free-website-design-value__visual-glow,
html[data-theme="dark"] .host-service-cta__glow {
  opacity: 0 !important;
}


/* Keep the internal live-test preview coherent in pure-black mode as well. */
html[data-theme="dark"] body.hr-theme-test-page main > section:not(.hr-theme-lab) {
  background: #000000 !important;
  background-image: none !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] body.hr-theme-test-page main > section:not(.hr-theme-lab) :is(h1,h2,h3,h4,h5,h6,p,li,label,small,figcaption) {
  color: #FFFFFF !important;
}
html[data-theme="dark"] body.hr-theme-test-page main > section:not(.hr-theme-lab) :is(.logo-design-review-card,.free-website-design-benefits__card,.free-website-design-portfolio__card,.host-service-cta__panel,.free-website-design-faq__item) {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-color: #292929 !important;
}


/* v278.06 hero-benefit contrast lock: keep the hero benefit copy/icons white on the blue hero. */
html[data-theme] body.free-website-design-page main .free-website-design-hero .free-website-design-hero__benefit-text,
html[data-theme] body.free-website-design-page main .free-website-design-hero .free-website-design-hero__benefit,
html[data-theme] body.free-website-design-page main .free-website-design-hero .free-website-design-hero__availability {
  color: var(--free-website-design-hero-benefit-text, var(--color-white)) !important;
}
html[data-theme] body.free-website-design-page main .free-website-design-hero .free-website-design-hero__benefit-icon,
html[data-theme] body.free-website-design-page main .free-website-design-hero .free-website-design-hero__availability-icon,
html[data-theme] body.free-website-design-page main .free-website-design-hero .free-website-design-hero__benefit-icon .host-icon,
html[data-theme] body.free-website-design-page main .free-website-design-hero .free-website-design-hero__availability-icon .host-icon {
  color: var(--free-website-design-hero-benefit-icon, var(--color-white)) !important;
}