/*
 * Global theme engine
 * The public layout loads this structural layer and exactly one preset file.
 * All values originate from the server-side allowlisted ThemeConfiguration.
 */
html[data-theme] {
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --blue: var(--theme-primary);
  --blue-dark: var(--theme-deep);
  --cyan: var(--theme-accent);
  --soft: var(--theme-soft);
  --panel: var(--theme-surface);
  --radius-sm: var(--theme-radius-sm);
  --radius-md: var(--theme-radius-md);
  --radius-lg: var(--theme-radius-lg);
  --shadow-sm: var(--theme-shadow-sm);
  --shadow-md: var(--theme-shadow-md);
  --shadow-lg: var(--theme-shadow-lg);
  font-size: calc(16px * var(--theme-font-scale, 1));
}

html[data-theme] body {
  color: var(--theme-text);
  font-family: var(--theme-body-font, "Noto Sans TC", "Microsoft JhengHei", sans-serif);
  background: var(--theme-body-bg, var(--theme-background));
}

html[data-theme] :where(h1, h2, h3, h4, h5, h6, .section-title, .footer-intro h2) {
  font-family: var(--theme-heading-font, inherit);
}

html[data-heading="sans"] :where(h1, h2, h3, h4, h5, h6, .section-title, .footer-intro h2) {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
}

html[data-heading="serif"] :where(h1, h2, h3, h4, h5, h6, .section-title, .footer-intro h2) {
  font-family: "Noto Serif TC", "Source Han Serif TC", "PMingLiU", serif;
}

html[data-theme] ::selection {
  color: var(--theme-primary-contrast);
  background: var(--theme-primary);
}

html[data-theme] .skip-link {
  color: #fff;
  background: #111827;
}

html[data-theme] a {
  color: var(--theme-link, var(--theme-primary));
}

html[data-theme] a:hover {
  color: var(--theme-link-hover, var(--theme-accent));
}

html[data-theme] :where(a, button, input, textarea, select, summary):focus-visible {
  outline-color: color-mix(in srgb, var(--theme-accent) 72%, white);
}

/* Layout scale controls */
html[data-width="compact"] .container {
  max-width: 1120px;
}

html[data-width="standard"] .container {
  max-width: 1320px;
}

html[data-width="wide"] .container {
  max-width: 1480px;
}

html[data-spacing="compact"] .section {
  padding-block: clamp(3.5rem, 6vw, 5rem);
}

html[data-spacing="comfortable"] .section {
  padding-block: clamp(4.75rem, 8vw, 7rem);
}

html[data-spacing="spacious"] .section {
  padding-block: clamp(5.75rem, 10vw, 8.75rem);
}

html[data-corners="square"] {
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

html[data-corners="soft"] {
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

html[data-corners="rounded"] {
  --radius-sm: 16px;
  --radius-md: 26px;
  --radius-lg: 38px;
}

/* Global surfaces and typography */
html[data-theme] :where(.section-title, .article-content h2, .article-content h3, .article-layout > h2, .contact-panel h2) {
  color: var(--theme-heading);
}

html[data-theme] :where(.section-copy, .lead, .article-content, .feature-tile p, .solution-card p, .news-card p) {
  color: var(--theme-muted);
}

html[data-theme] .eyebrow {
  color: var(--theme-eyebrow, var(--theme-accent));
}

html[data-theme] .section-soft,
html[data-theme] .catalog-section {
  background: var(--theme-soft-bg, var(--theme-soft));
}

html[data-theme] .section-soft::before,
html[data-theme] .seo-section::before {
  background: var(--theme-soft-pattern, none);
}

html[data-theme] :where(.product-lab, .section-dark, .cta-band) {
  color: var(--theme-dark-text);
  background: var(--theme-dark-bg);
}

html[data-theme] :where(.product-lab, .section-dark, .cta-band) :where(.section-title, h2, h3) {
  color: var(--theme-dark-text);
}

html[data-theme] :where(.product-lab, .section-dark, .cta-band) p {
  color: var(--theme-dark-muted);
}

html[data-theme] :where(.product-lab, .section-dark, .cta-band) .eyebrow {
  color: color-mix(in srgb, var(--theme-dark-text) 86%, var(--theme-primary));
}

html[data-theme] :where(.product-lab, .section-dark, .cta-band) .impact-list span {
  color: color-mix(in srgb, var(--theme-dark-text) 86%, var(--theme-primary));
}

/* Buttons */
html[data-theme] .btn-primary {
  color: var(--theme-primary-contrast);
  border-color: var(--theme-primary);
  background: var(--theme-primary);
  box-shadow: var(--theme-button-shadow, 0 14px 32px color-mix(in srgb, var(--theme-primary) 24%, transparent));
}

html[data-theme] .btn-primary:hover,
html[data-theme] .btn-primary:focus-visible {
  color: var(--theme-primary-contrast);
  border-color: var(--theme-primary);
  background: var(--theme-primary);
  filter: brightness(.88);
}

html[data-theme] .btn-outline-primary {
  color: var(--theme-link, var(--theme-primary));
  border-color: color-mix(in srgb, var(--theme-primary) 42%, transparent);
  background: var(--theme-surface);
}

html[data-theme] .btn-outline-primary:hover {
  color: var(--theme-primary-contrast);
  border-color: var(--theme-primary);
  background: var(--theme-primary);
}

html[data-theme] .btn-light {
  color: var(--theme-deep);
  border-color: color-mix(in srgb, var(--theme-deep) 14%, white);
  background: #fff;
}

html[data-theme] .btn-light:hover,
html[data-theme] .btn-light:focus-visible {
  color: var(--theme-deep);
  border-color: color-mix(in srgb, var(--theme-deep) 28%, white);
  background: #f1f5f9;
}

/* Navigation */
html[data-theme] .site-navbar,
html[data-theme] .site-navbar.is-scrolled {
  border-color: var(--theme-nav-line);
  background: var(--theme-nav-bg) !important;
  box-shadow: var(--theme-nav-shadow);
  backdrop-filter: var(--theme-nav-filter, blur(20px));
}

html[data-theme] .site-navbar::before {
  background: var(--theme-nav-accent);
}

html[data-theme] .brand-copy strong {
  color: var(--theme-nav-text);
}

html[data-theme] .brand-copy small {
  color: var(--theme-nav-muted);
}

html[data-theme] .site-navbar .nav-link {
  color: var(--theme-nav-muted) !important;
}

html[data-theme] .site-navbar .nav-link::after {
  background: var(--theme-nav-link-accent, var(--theme-accent));
}

html[data-theme] .site-navbar .nav-link:hover,
html[data-theme] .site-navbar .nav-link.active {
  color: var(--theme-nav-text) !important;
}

html[data-theme] .site-navbar .navbar-toggler {
  border-color: var(--theme-nav-line);
  background: color-mix(in srgb, var(--theme-nav-text) 8%, transparent);
}

/* Hero and page banners */
html[data-theme] .hero {
  color: var(--theme-hero-text);
  background: var(--theme-hero-bg);
}

html[data-theme] .hero__bg-image,
html[data-theme] .page-banner__image {
  filter: var(--theme-image-filter, none);
}

html[data-theme] .hero::before {
  background: var(--theme-hero-overlay);
}

html[data-theme] .hero::after {
  background: var(--theme-hero-fade);
}

html[data-theme] .hero h1,
html[data-theme] .page-banner h1 {
  color: var(--theme-hero-text);
  text-shadow: var(--theme-hero-shadow, none);
}

html[data-theme] .hero__content > p:not(.eyebrow),
html[data-theme] .page-banner__content > p:not(.eyebrow) {
  color: var(--theme-hero-muted);
}

html[data-theme] :where(.hero, .page-banner) .eyebrow {
  color: color-mix(in srgb, var(--theme-hero-text) 78%, var(--theme-primary));
}

html[data-theme] .hero__proof {
  border-color: var(--theme-hero-line);
}

html[data-theme] .hero__proof div {
  border-color: var(--theme-hero-line);
}

html[data-theme] .hero__proof strong {
  color: var(--theme-hero-text);
}

html[data-theme] .hero__proof span {
  color: var(--theme-hero-muted);
}

html[data-theme] .page-banner::before {
  background: var(--theme-banner-overlay, var(--theme-hero-overlay));
}

html[data-theme] .page-banner::after {
  background: var(--theme-banner-accent, var(--theme-nav-accent));
}

html[data-theme] .breadcrumb-wrap {
  border-color: var(--theme-line);
  background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
  box-shadow: var(--theme-shadow-sm);
}

html[data-theme] .breadcrumb-item a {
  color: var(--theme-link, var(--theme-primary));
}

html[data-theme] .breadcrumb-item.active {
  color: var(--theme-muted);
}

/* Cards, panels and interactive modules */
html[data-theme] :where(
  .benefit-grid button,
  .benefit-panel,
  .solution-card,
  .news-card,
  .road-step,
  .seo-grid article,
  .faq-list details,
  .catalog-panel,
  .contact-panel,
  .form-surface,
  .detail-panel,
  .metric-tile,
  .feature-tile,
  .service-links,
  .not-found-panel,
  .about-values__rail button,
  .about-values__panel,
  .about-timeline__rail button,
  .about-branch-grid div
) {
  color: var(--theme-text);
  border-color: var(--theme-card-line, var(--theme-line));
  border-radius: var(--radius-md);
  background: var(--theme-card-bg, var(--theme-surface));
  box-shadow: var(--theme-card-shadow, var(--theme-shadow-sm));
}

html[data-theme] :where(.solution-card, .news-card)::before {
  background: var(--theme-card-accent, linear-gradient(90deg, var(--theme-primary), var(--theme-accent)));
}

html[data-theme] :where(.solution-card, .news-card):hover {
  border-color: color-mix(in srgb, var(--theme-primary) 38%, var(--theme-line));
  box-shadow: var(--theme-card-hover-shadow, var(--theme-shadow-md));
}

html[data-theme] :where(.solution-card__body, .news-card__body) {
  color: var(--theme-text);
  background: transparent;
}

html[data-theme] :where(.solution-card h2, .solution-card h3, .news-card h2, .news-card h3, .road-step h3, .seo-grid h3) {
  color: var(--theme-heading);
}

html[data-theme] .about-values__panel h3 {
  color: var(--theme-heading);
}

html[data-theme] .about-values__panel p:not(.eyebrow) {
  color: var(--theme-muted);
}

html[data-theme] :where(.solution-card__tags span, .module-checks span, .about-chip-row span) {
  color: var(--theme-chip-text, var(--theme-link, var(--theme-primary)));
  border-color: var(--theme-chip-line, color-mix(in srgb, var(--theme-accent) 30%, transparent));
  background: var(--theme-chip-bg, color-mix(in srgb, var(--theme-accent) 8%, var(--theme-surface)));
}

html[data-theme] .about-values__panel .about-chip-row span {
  color: var(--theme-chip-text, var(--theme-link, var(--theme-primary)));
  border-color: var(--theme-chip-line, color-mix(in srgb, var(--theme-accent) 30%, transparent));
  background: var(--theme-chip-bg, color-mix(in srgb, var(--theme-accent) 8%, var(--theme-surface)));
}

html[data-theme] :where(.solution-card__link, .news-card__body > a, .section-link) {
  color: var(--theme-link, var(--theme-primary));
}

html[data-theme] .section-link {
  border-color: var(--theme-line);
  background: var(--theme-input-bg, var(--theme-surface));
}

html[data-theme] .news-card time,
html[data-theme] :where(.road-step, .seo-grid article) > span {
  color: var(--theme-link, var(--theme-primary));
}

html[data-theme] :where(.benefit-grid strong, .benefit-panel strong, .catalog-panel__intro h2, .filter-toolbar strong) {
  color: var(--theme-heading);
}

html[data-theme] :where(.benefit-grid span, .benefit-panel span, .catalog-panel__intro p, .catalog-panel__stats span) {
  color: var(--theme-muted);
}

html[data-theme] .benefit-grid button.active,
html[data-theme] .benefit-grid button:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 42%, var(--theme-line));
  background: var(--theme-active-bg, color-mix(in srgb, var(--theme-primary) 8%, var(--theme-surface)));
}

html[data-theme] .benefit-grid button::before,
html[data-theme] .road-step::before {
  background: linear-gradient(180deg, var(--theme-primary), var(--theme-accent));
}

html[data-theme] .product-lab :where(.module-tabs button, .module-preview) {
  color: var(--theme-dark-text);
  border-color: color-mix(in srgb, var(--theme-dark-text) 20%, transparent);
  background: color-mix(in srgb, var(--theme-deep) 78%, var(--theme-primary));
  box-shadow: var(--theme-shadow-md);
}

html[data-theme] .product-lab .module-tabs button.active,
html[data-theme] .product-lab .module-tabs button:hover {
  border-color: color-mix(in srgb, var(--theme-dark-text) 42%, transparent);
  background: color-mix(in srgb, var(--theme-deep) 76%, var(--theme-primary));
}

html[data-theme] .product-lab .module-tabs span {
  color: var(--theme-primary-contrast);
  background: var(--theme-primary);
}

html[data-theme] .product-lab :where(.module-tabs strong, .module-preview h3) {
  color: var(--theme-dark-text);
}

html[data-theme] .product-lab :where(.module-tabs small, .module-preview p) {
  color: var(--theme-dark-muted);
}

html[data-theme] .product-lab .module-preview::after {
  border-color: color-mix(in srgb, var(--theme-dark-text) 20%, transparent);
}

html[data-theme] .product-lab .module-checks span {
  color: var(--theme-dark-text);
  border-color: color-mix(in srgb, var(--theme-dark-text) 28%, transparent);
  background: color-mix(in srgb, var(--theme-dark-text) 10%, transparent);
}

html[data-theme] .faq-list details[open] {
  border-color: color-mix(in srgb, var(--theme-accent) 46%, var(--theme-line));
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-md);
}

html[data-theme] .faq-list summary {
  color: var(--theme-heading);
}

html[data-theme] .faq-list p {
  color: var(--theme-muted);
}

html[data-theme] .faq-list summary::after {
  color: var(--theme-link, var(--theme-primary));
  background: var(--theme-active-bg);
}

html[data-theme] .faq-list details[open] summary::after {
  color: var(--theme-primary-contrast);
  background: var(--theme-primary);
}

/* Forms and articles */
html[data-theme] :where(.form-control, .form-select) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  border-radius: var(--radius-sm);
  background-color: var(--theme-input-bg, var(--theme-surface));
}

html[data-theme] :where(.form-control, .form-select):focus {
  color: var(--theme-text);
  border-color: var(--theme-accent);
  background-color: var(--theme-surface);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--theme-accent) 14%, transparent);
}

html[data-theme] :where(.form-control, .form-select)::placeholder {
  color: color-mix(in srgb, var(--theme-muted) 82%, transparent);
  opacity: 1;
}

html[data-theme] .form-label {
  color: var(--theme-heading);
}

html[data-theme] :where(.form-note, .captcha-row__question, .privacy-consent) {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-input-bg, var(--theme-soft));
}

html[data-theme] :where(.form-note strong, .captcha-row__question, .privacy-consent .form-check-label) {
  color: var(--theme-heading);
}

html[data-theme] .privacy-consent .form-check-label {
  color: var(--theme-heading);
}

html[data-theme] :where(.form-note span, .privacy-consent__help) {
  color: var(--theme-muted);
}

html[data-theme] .contact-panel h2,
html[data-theme] .contact-panel li strong,
html[data-theme] .service-links h2,
html[data-theme] .solution-gallery h2,
html[data-theme] .related-section > h2 {
  color: var(--theme-heading);
}

html[data-theme] .contact-panel li {
  color: var(--theme-text);
  border-color: var(--theme-line);
  background: var(--theme-input-bg, var(--theme-surface));
}

html[data-theme] .contact-panel li span {
  color: var(--theme-text);
}

html[data-theme] .contact-panel li strong {
  color: var(--theme-chip-text, var(--theme-link, var(--theme-primary)));
  border-color: var(--theme-chip-line, var(--theme-line));
  background: var(--theme-chip-bg, var(--theme-active-bg, var(--theme-soft)));
}

html[data-theme] .contact-panel li:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 28%, var(--theme-line));
  background: var(--theme-active-bg, color-mix(in srgb, var(--theme-primary) 8%, var(--theme-surface)));
}

html[data-theme] .service-links__grid a {
  color: var(--theme-link, var(--theme-primary));
  border-color: var(--theme-line);
  background: var(--theme-input-bg, var(--theme-surface));
}

html[data-theme] .service-links__grid a::after {
  color: currentColor;
}

html[data-theme] .article-content {
  color: var(--theme-article-text, var(--theme-text));
}

html[data-theme] .article-meta {
  color: var(--theme-muted);
  border-color: var(--theme-line);
}

/* Footer and floating contact */
html[data-theme] .site-footer {
  color: var(--theme-footer-text);
  background: var(--theme-footer-bg);
}

html[data-theme] .site-footer::before {
  background: var(--theme-footer-pattern, none);
}

html[data-theme] .footer-intro {
  border-color: var(--theme-footer-line);
}

html[data-theme] .footer-intro h2,
html[data-theme] .footer-brand strong,
html[data-theme] .footer-title {
  color: var(--theme-footer-heading);
}

html[data-theme] .footer-brand small {
  color: var(--theme-footer-muted);
}

html[data-theme] .site-footer :where(p, .footer-links li, .footer-links a, .footer-bottom, .footer-bottom a) {
  color: var(--theme-footer-muted);
}

html[data-theme] .site-footer :where(.footer-links a, .footer-bottom a):hover {
  color: var(--theme-footer-accent);
}

html[data-theme] .footer-title::after {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
}

html[data-theme] .floating-contact__item {
  color: var(--theme-floating-text);
  border-color: var(--theme-floating-line);
  border-radius: var(--radius-sm);
  background: var(--theme-floating-bg);
  box-shadow: var(--theme-shadow-md);
}

html[data-theme] .floating-contact__item:hover {
  color: var(--theme-primary-contrast);
  border-color: var(--theme-primary);
  background: var(--theme-primary);
}

/* Logged-in draft preview toolbar; deliberately stable across all themes. */
.theme-preview-bar {
  position: sticky;
  top: 0;
  z-index: 1200;
  color: #f8fafc;
  background: #111827;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .22);
}

.theme-preview-bar__inner {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .55rem;
}

.theme-preview-bar__inner > div:first-child {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem .75rem;
}

.theme-preview-bar__status {
  border-radius: 999px;
  padding: .22rem .55rem;
  color: #082f49;
  background: #67e8f9;
  font-size: .72rem;
  font-weight: 900;
}

.theme-preview-bar strong {
  color: #fff;
}

.theme-preview-bar small {
  color: #94a3b8;
}

.theme-preview-bar__actions,
.theme-preview-bar__actions form {
  display: flex;
  gap: .5rem;
  margin: 0;
}

.theme-preview-active .site-header {
  top: 58px;
}

/* Motion is a single global preference, never configured per page. */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: .12s !important;
  transition-duration: .12s !important;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition: none !important;
}

html[data-motion="off"] .reveal-on-scroll {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 767.98px) {
  .theme-preview-bar__inner,
  .theme-preview-bar__inner > div:first-child {
    align-items: flex-start;
    flex-direction: column;
  }

  .theme-preview-bar__inner {
    padding-block: .75rem;
  }

  .theme-preview-bar__actions {
    width: 100%;
  }

  .theme-preview-bar__actions .btn {
    min-height: 38px;
  }

  .theme-preview-active .site-header {
    top: 118px;
  }
}