/* Light is the default, including when JavaScript or storage is unavailable. */
:root:not([data-theme="dark"]) {
  --bg: #fafaf8;
  --surface: #ffffff;
  --raised: #f0f1ed;
  --text: #20231e;
  --muted: #62665d;
  --line: #daddd4;
  --accent: #af0908;
  --accent-ink: #af0908;
  --accent-soft: #f9e5e4;
  --accent-border: #dba6a4;
  color-scheme: light;
}

.logo .logo-dark {
  display: none;
}
[data-theme="dark"] .logo .logo-dark {
  display: block;
}
[data-theme="dark"] .logo .logo-light {
  display: none;
}
.theme-toggle {
  display: grid;
  place-items: center;
  width: 52px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle[hidden] {
  display: none;
}
.theme-toggle-track {
  display: block;
  width: 52px;
  height: 32px;
  padding: 3px;
  border-radius: 999px;
  background: #555558;
  box-shadow: inset 0 0 0 1px #00000008;
  transition: background 180ms ease;
}
.theme-toggle-thumb {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #555558;
  box-shadow:
    0 2px 4px #0003,
    0 1px 2px #0002;
  transition: transform 180ms ease;
}
.theme-toggle[aria-checked="true"] .theme-toggle-track {
  background: var(--accent);
}
.theme-toggle[aria-checked="true"] .theme-toggle-thumb {
  transform: translateX(20px);
  color: var(--accent);
}
.theme-toggle svg {
  width: 15px;
  height: 15px;
}
.theme-toggle .theme-sun {
  display: none;
}
.theme-toggle[aria-checked="true"] .theme-sun {
  display: block;
}
.theme-toggle[aria-checked="true"] .theme-moon {
  display: none;
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-track,
  .theme-toggle-thumb {
    transition: none;
  }
}

/* Shared typography and details on light surfaces. */
:root:not([data-theme="dark"]) .nav-links a,
:root:not([data-theme="dark"]) .hero-trust,
:root:not([data-theme="dark"]) .art-coordinate,
:root:not([data-theme="dark"]) .trust-strip span,
:root:not([data-theme="dark"]) .filter,
:root:not([data-theme="dark"]) .solution-list > a > span,
:root:not([data-theme="dark"]) .setup-tabs button,
:root:not([data-theme="dark"]) .footer-bottom,
:root:not([data-theme="dark"]) .category-small svg {
  color: var(--muted);
}
:root:not([data-theme="dark"]) .nav-links a:hover,
:root:not([data-theme="dark"]) .product a,
:root:not([data-theme="dark"]) .contact-grid .text-link,
:root:not([data-theme="dark"]) .setup-tabs button.active {
  color: var(--accent);
}
:root:not([data-theme="dark"]) .button-primary {
  background: var(--accent);
  color: #ffffff;
}
:root:not([data-theme="dark"]) .button-primary:hover {
  background: var(--accent-hover);
}
:root:not([data-theme="dark"]) .button-outline {
  background: #ffffff80;
  border-color: #b9beb1;
}
:root:not([data-theme="dark"]) .button-outline:hover {
  background: #eceee7;
  border-color: #7b826f;
}
:root:not([data-theme="dark"]) .button-light {
  background: #fafaf8;
  color: #20231e;
}
:root:not([data-theme="dark"]) .skip-link {
  background: var(--accent);
  color: #ffffff;
}
:root:not([data-theme="dark"]) ::selection {
  background: #f0bbb8;
  color: #20231e;
}

/* Header and hero. */
:root:not([data-theme="dark"]) .site-header {
  background: #fafaf8;
  border-color: var(--line);
}
:root:not([data-theme="dark"]) .site-header.scrolled {
  background: #fafaf8;
}
:root:not([data-theme="dark"]) .nav-whatsapp {
  background: #edf2e8;
  border-color: #c7d3bb;
  color: #35522c;
}
:root:not([data-theme="dark"]) .nav-whatsapp svg {
  color: #35522c;
}
:root:not([data-theme="dark"]) .hero-visual {
  background: radial-gradient(ellipse at 58% 48%, #af09080c, transparent 65%);
}
:root:not([data-theme="dark"]) .hero-art img {
  filter: drop-shadow(0 25px 30px #39272726);
}
:root:not([data-theme="dark"]) .orbit {
  border-color: #747b641c;
}
:root:not([data-theme="dark"]) .art-label {
  background: #fffffff0;
  border-color: #d8dcd0;
  color: #494e41;
  box-shadow: 0 8px 25px #333b2210;
}
:root:not([data-theme="dark"]) .trust-strip {
  background: #eef0e9;
}
:root:not([data-theme="dark"]) .brands-marquee-section {
  background: #f3f4ef;
}
:root:not([data-theme="dark"]) .brands-marquee-header .brands-eyebrow {
  color: #72776c;
}
:root:not([data-theme="dark"]) .brand-item {
  opacity: 0.88;
}
:root:not([data-theme="dark"]) .brand-item:hover,
:root:not([data-theme="dark"]) .brand-item:focus-visible {
  opacity: 1;
}

/* Authentic Brand Colors - Light Mode */
:root:not([data-theme="dark"]) .brand-item-apple {
  color: #111111;
}
:root:not([data-theme="dark"]) .brand-item-samsung {
  color: #0a56cc;
}
:root:not([data-theme="dark"]) .brand-item-motorola {
  color: #0062a8;
}
:root:not([data-theme="dark"]) .brand-item-dell {
  color: #006b9e;
}
:root:not([data-theme="dark"]) .brand-item-hp {
  color: #007ea8;
}
:root:not([data-theme="dark"]) .brand-item-lenovo {
  color: #cf1810;
}
:root:not([data-theme="dark"]) .brand-item-asus {
  color: #0c61db;
}
:root:not([data-theme="dark"]) .brand-item-acer {
  color: #5e9405;
}
:root:not([data-theme="dark"]) .brand-item-sony {
  color: #111111;
}
:root:not([data-theme="dark"]) .brand-item-msi {
  color: #cc1414;
}
:root:not([data-theme="dark"]) .brand-item-razer {
  color: #008f1f;
}
:root:not([data-theme="dark"]) .brand-item-intel {
  color: #0065b8;
}
:root:not([data-theme="dark"]) .brand-item-nvidia {
  color: #558800;
}
:root:not([data-theme="dark"]) .brand-item-playstation {
  color: #004ea8;
}

/* Product discovery and selection. Photo overlays keep light lettering. */
:root:not([data-theme="dark"]) .category,
:root:not([data-theme="dark"]) .solution-photo,
:root:not([data-theme="dark"]) .condition-panel,
:root:not([data-theme="dark"]) .setup-scene,
:root:not([data-theme="dark"]) .image-caption,
:root:not([data-theme="dark"]) .product-image > span {
  color: #f4f3ef;
}
:root:not([data-theme="dark"]) .category-small a {
  background: #fff;
  border-color: var(--line);
}
:root:not([data-theme="dark"]) .category-small a:hover {
  background: #f8eded;
  color: var(--accent);
}
:root:not([data-theme="dark"]) .featured-section {
  background: #f0f1ed;
  border-color: var(--line);
}
:root:not([data-theme="dark"]) .filter:hover {
  color: var(--text);
}
:root:not([data-theme="dark"]) .filter.active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}
:root:not([data-theme="dark"]) .product-image {
  background: #e6e8e1;
}
:root:not([data-theme="dark"]) .product-image img {
  filter: none;
}

/* Credibility and support. */
:root:not([data-theme="dark"]) .why-section {
  background: #faf0ef;
  border-color: #ead1cf;
}
:root:not([data-theme="dark"]) .why-intro h2 span,
:root:not([data-theme="dark"]) .journey-number {
  color: var(--accent);
}
:root:not([data-theme="dark"]) .journey article {
  border-color: var(--accent-border);
}
:root:not([data-theme="dark"]) .journey article:before {
  background: var(--accent);
}
:root:not([data-theme="dark"]) .experience {
  border-color: var(--accent-border);
}
:root:not([data-theme="dark"]) .experience-number {
  color: var(--accent);
}
:root:not([data-theme="dark"]) .support-section {
  background: #f0f1ed;
}
:root:not([data-theme="dark"]) .steps article > span {
  color: #9e4441;
}

/* Form, including native controls, feedback and autofill. */
:root:not([data-theme="dark"]) .enquiry-section {
  background: #faf0ef;
  border-color: #ead1cf;
}
:root:not([data-theme="dark"]) .enquiry-copy h2 span,
:root:not([data-theme="dark"]) .enquiry-note > svg,
:root:not([data-theme="dark"]) .enquiry-note .text-link {
  color: var(--accent);
}
:root:not([data-theme="dark"]) .enquiry-form {
  background: #fff;
  border-color: var(--accent-border);
}
:root:not([data-theme="dark"]) .form-grid label {
  color: #4a403e;
}
:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea {
  background: #fdfafa;
  color: #231f1e;
  border-color: #d6bfbd;
}
:root:not([data-theme="dark"]) input::placeholder,
:root:not([data-theme="dark"]) textarea::placeholder {
  color: #776b69;
}
:root:not([data-theme="dark"]) input:focus,
:root:not([data-theme="dark"]) select:focus,
:root:not([data-theme="dark"]) textarea:focus {
  border-color: var(--accent);
}
:root:not([data-theme="dark"]) .form-status {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
:root:not([data-theme="dark"]) .form-status p,
:root:not([data-theme="dark"]) .form-status .status-icon {
  color: #6f2825;
}
:root:not([data-theme="dark"]) .footer-bottom {
  border-color: var(--line);
}

/* Reviews Light Mode */
:root:not([data-theme="dark"]) .reviews-summary-bar {
  background: #ffffff;
  border-color: #e5e5dc;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}
:root:not([data-theme="dark"]) .review-card {
  background: #ffffff;
  border-color: #e5e5dc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}
:root:not([data-theme="dark"]) .review-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}
:root:not([data-theme="dark"]) .review-highlight {
  color: var(--accent);
}
:root:not([data-theme="dark"]) .reviewer-avatar {
  background: #f4f5f0;
  color: var(--accent);
}
:root:not([data-theme="dark"]) .reviews-callout {
  background: #f0f1ed;
  border-color: #dedfd7;
}

/* Persistent chat affordance. */
:root:not([data-theme="dark"]) .widget-button {
  background: #e2ecd8;
  color: #35522c;
  border-color: #acbd98;
  box-shadow: 0 5px 24px #38432b1f;
}
:root:not([data-theme="dark"]) .widget-popover {
  background: #fff;
  border-color: #c7d3bb;
  box-shadow: 0 6px 25px #38432b15;
}
:root:not([data-theme="dark"]) .widget-popover p {
  color: #62665d;
}
:root:not([data-theme="dark"]) .widget-popover a {
  color: #35522c;
}

@media (max-width: 800px) {
  :root:not([data-theme="dark"]) .nav-links {
    background: #fafaf8;
  }
  .nav {
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .nav {
    gap: 9px;
  }
  .nav-whatsapp {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 8px;
  }
  .nav-whatsapp > span {
    display: none;
  }
  .menu-toggle {
    flex-shrink: 0;
  }
}
:root:not([data-theme="dark"]) .condition-panel .eyebrow {
  color: #d6d8cf;
}
:root:not([data-theme="dark"]) .category:hover .round-arrow {
  background: var(--accent);
  border-color: var(--accent);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .nav-actions {
    gap: 9px;
  }
}