/*
 * Storefront dark theme. Active when <html data-theme="dark">, which theme.js sets
 * from the visitor's choice (Light / Dark / Auto = follow the device). Loaded after
 * every other storefront stylesheet so these overrides win. Text colours were checked
 * for WCAG AA contrast (4.5:1 or better) against the dark backgrounds.
 */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Light blue for text, links, icons and borders; solid surfaces stay deep blue so white text on them reads well. */
  --color-brand: #5ea8f0;
  --color-brand-dark: #8cc2f5;
  --color-brand-fill: #1d6fc4;
  --color-brand-fill-dark: #185da6;
  --color-accent: #5ea8f0;
  --color-accent-light: #16304a;

  --color-bg: #0e1621;
  --color-bg-subtle: #141e2b;
  --color-bg-muted: #1b2737;
  --color-border: #2a3a4d;
  --color-text: #e6edf5;
  --color-text-muted: #9fb0c2;

  --color-success: #4cc483;
  --color-danger: #ff7b6e;
  --color-warning: #e2b33c;
  --color-price-strike: #7d8c9b;

  --color-hero-from: #13253b;
  --color-hero-to: #0f1d30;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Logo: its blue lettering sits on a small white backing so it stays readable. */
:root[data-theme="dark"] .site-header__logo img {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

/* Inputs and selects follow the theme. */
:root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: var(--color-bg-subtle);
  color: var(--color-text);
  border-color: var(--color-border);
}

:root[data-theme="dark"] ::placeholder {
  color: #7f91a5;
}

:root[data-theme="dark"] .form-field.has-error input,
:root[data-theme="dark"] .form-field.has-error select,
:root[data-theme="dark"] .form-field.has-error textarea {
  background-color: #2a1715;
}

/* Success / notice boxes */
:root[data-theme="dark"] .form-flash,
:root[data-theme="dark"] .listing-flash,
:root[data-theme="dark"] .summary-coupon__applied,
:root[data-theme="dark"] .summary-credit,
:root[data-theme="dark"] .account-nav__badge {
  background: #12301f;
  border-color: #1f5a37;
  color: #6fd69b;
}

:root[data-theme="dark"] .form-errors {
  background: #351816;
  border-color: #6b2a24;
}

:root[data-theme="dark"] .brochure-ready,
:root[data-theme="dark"] .pay-timer.is-low,
:root[data-theme="dark"] .pay-expired {
  background: #35200f;
  border-color: #6b3c1a;
}

:root[data-theme="dark"] .otp-dev {
  background: #322a10;
  border-color: #7a6315;
  color: #f2d06b;
}

:root[data-theme="dark"] .credit-hero {
  background: linear-gradient(120deg, #12301f, var(--color-bg));
  border-color: #1f5a37;
}

/* Order / ticket status pills */
:root[data-theme="dark"] .status-pending,
:root[data-theme="dark"] .status-requested { background: #3a3110; color: #f2d06b; }
:root[data-theme="dark"] .status-confirmed,
:root[data-theme="dark"] .status-under_review,
:root[data-theme="dark"] .status-in_progress { background: #162d55; color: #9cc0ff; }
:root[data-theme="dark"] .status-packed { background: #2e1d50; color: #c9a8ff; }
:root[data-theme="dark"] .status-shipped { background: #10314a; color: #86cdf7; }
:root[data-theme="dark"] .status-out_for_delivery { background: #3d2412; color: #ffb07a; }
:root[data-theme="dark"] .status-delivered,
:root[data-theme="dark"] .status-approved,
:root[data-theme="dark"] .status-resolved,
:root[data-theme="dark"] .status-sent { background: #12301f; color: #6fd69b; }
:root[data-theme="dark"] .status-cancelled,
:root[data-theme="dark"] .status-rejected,
:root[data-theme="dark"] .status-failed { background: #3a1716; color: #ff9a90; }
:root[data-theme="dark"] .status-open { background: #3a1d12; color: #ff9f7a; }
:root[data-theme="dark"] .status-refund_processed,
:root[data-theme="dark"] .status-closed { background: #222c38; color: #b7c3d0; }

:root[data-theme="dark"] .ticket-msg--customer {
  border-color: #24456b;
}

/* Home: hero cards and chips */
:root[data-theme="dark"] .hero-card--blue { background: #13263c; border-color: #24456b; }
:root[data-theme="dark"] .hero-card--green { background: #12301f; border-color: #1f5a37; }
:root[data-theme="dark"] .hero-card--green h3 { color: #6fd69b; }
:root[data-theme="dark"] .hero-card--orange { background: #35200f; border-color: #6b3c1a; }
:root[data-theme="dark"] .hero__chip,
:root[data-theme="dark"] .hero__actions .btn-outline {
  background: var(--color-bg);
}

:root[data-theme="dark"] .hero-slider__arrow {
  background: rgba(20, 30, 43, 0.92);
  color: var(--color-text);
}

:root[data-theme="dark"] .hero-slider__arrow:hover {
  background: var(--color-bg-muted);
}

/* Product cards, cart, footer */
:root[data-theme="dark"] a.product-card__wish {
  background: var(--color-bg-subtle);
}

:root[data-theme="dark"] .ship-progress__bar {
  background: var(--color-bg-muted);
}

:root[data-theme="dark"] .newsletter-form input {
  background: #0e1621;
  color: var(--color-text);
}

/* Password strength meter */
:root[data-theme="dark"] .pw-meter[data-level="1"] .pw-meter__label,
:root[data-theme="dark"] .pw-rules li.is-missing { color: #ff7b6e; }
:root[data-theme="dark"] .pw-meter[data-level="2"] .pw-meter__label { color: #ffa25c; }
:root[data-theme="dark"] .pw-meter[data-level="3"] .pw-meter__label { color: #e2b33c; }
:root[data-theme="dark"] .pw-meter[data-level="5"] .pw-meter__label,
:root[data-theme="dark"] .pw-rules li.is-met { color: #4cc483; }
:root[data-theme="dark"] .pw-rules li::before { border-color: #50637a; }

/* Theme switch menu (header) */
:root[data-theme="dark"] .theme-switch__menu {
  box-shadow: var(--shadow-lg);
}