/* ==========================================================
   STRATUM host package: Dark/Light theme + logo system
   ========================================================== */

:root[data-theme="light"] {
  --accent: #9a6831;
  --accent-strong: #7f5327;
  --accent-2: #9a6831;
  --hero-accent: #9a6831;

  --bg-0: #edf0f3;
  --bg-1: #f7f8f9;
  --bg-2: #eef1f3;
  --bg-3: #e5e9ed;
  --bg-4: #d9dee4;
  --bg-5: #cdd4dc;

  --w-02: rgba(12, 18, 30, 0.02);
  --w-03: rgba(12, 18, 30, 0.03);
  --w-04: rgba(12, 18, 30, 0.04);
  --w-06: rgba(17, 24, 32, 0.08);
  --w-08: rgba(17, 24, 32, 0.1);
  --w-12: rgba(17, 24, 32, 0.13);
  --w-15: rgba(17, 24, 32, 0.18);
  --w-25: rgba(12, 18, 30, 0.25);
  --w-35: rgba(17, 24, 32, 0.46);
  --w-45: rgba(17, 24, 32, 0.58);
  --w-60: rgba(17, 24, 32, 0.68);
  --w-75: rgba(17, 24, 32, 0.82);
  --w-85: rgba(17, 24, 32, 0.88);
  --w-92: rgba(17, 24, 32, 0.94);

  --fx-white-14: rgba(12, 18, 30, 0.14);
  --fx-white-17: rgba(12, 18, 30, 0.17);
  --fx-white-20: rgba(12, 18, 30, 0.2);
  --fx-white-28: rgba(12, 18, 30, 0.28);
  --fx-white-30: rgba(12, 18, 30, 0.3);
  --fx-white-34: rgba(12, 18, 30, 0.34);

  --fx-black-34: rgba(166, 176, 188, 0.3);
  --fx-black-56: rgba(166, 176, 188, 0.48);
  --fx-panel-deep: rgba(249, 250, 251, 0.98);
  --fx-panel-base: rgba(239, 242, 245, 0.96);

  --bg-card: rgba(17, 24, 32, 0.035);
  --panel-surface: rgba(17, 24, 32, 0.035);
  --panel-surface-strong: rgba(255, 255, 255, 0.68);
  --panel-border: rgba(17, 24, 32, 0.11);
  --technical-line: rgba(17, 24, 32, 0.085);
  --technical-line-strong: rgba(17, 24, 32, 0.16);
  --border: var(--technical-line);
  --shadow: 0 18px 46px rgba(17, 24, 32, 0.1);

  --field-surface: #f0f2f4;
  --field-text: rgba(17, 24, 32, 0.94);
  --field-border-color: rgba(17, 24, 32, 0.16);
  --field-focus-color: rgba(154, 104, 49, 0.44);
  --field-control-shadow: none;
  --field-popover-shadow: 0 18px 34px rgba(17, 24, 32, 0.14);
}

body[data-theme="light"] .global-scan {
  background: linear-gradient(90deg, transparent, rgba(12, 18, 30, 0.08), transparent);
}

body[data-theme="light"] .button-primary {
  color: #f7f9fc;
  background: var(--accent);
}

body[data-theme="light"] .button-primary:hover,
body[data-theme="light"] .button-primary:focus-visible {
  background: var(--accent-strong);
}

body[data-theme="light"] .button-secondary {
  border-color: rgba(12, 18, 30, 0.24);
}

body[data-theme="light"] .lang-link.is-active {
  color: #f7f9fc;
  background: #111820;
}

body[data-theme="light"] .topbar {
  background: color-mix(in srgb, #f7f8f9 92%, transparent);
}

body[data-theme="light"] .top-contact {
  color: rgba(12, 18, 30, 0.68);
}

body[data-theme="light"] .field span,
body[data-theme="light"] .material-inline-hint,
body[data-theme="light"] .form-note,
body[data-theme="light"] .case-meta li {
  color: var(--muted);
}

body[data-theme="light"] .field select {
  color-scheme: light;
  background-color: var(--field-surface);
}

body[data-theme="light"] .field select option,
body[data-theme="light"] .field select optgroup {
  color: var(--field-text);
  background-color: var(--field-surface);
}

body[data-theme="light"] .field select option:checked,
body[data-theme="light"] .field select option:hover,
body[data-theme="light"] .field select option:focus {
  color: var(--field-text);
  background-color: var(--field-surface);
}

body[data-theme="light"] .custom-select {
  --select-surface: var(--field-surface);
  --select-text: var(--field-text);
}

body[data-theme="light"] .field .custom-select,
body[data-theme="light"] .field .custom-select-value,
body[data-theme="light"] .field .custom-select-list {
  color: var(--select-text);
}

body[data-theme="light"] .custom-select-trigger {
  background: var(--select-surface);
  color: var(--select-text);
}

body[data-theme="light"] .custom-select-trigger:hover,
body[data-theme="light"] .custom-select-trigger:focus-visible,
body[data-theme="light"] .custom-select.is-open .custom-select-trigger {
  border-color: var(--field-focus-color);
  background: var(--select-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--field-focus-color) 38%, transparent);
}

body[data-theme="light"] .custom-select-list {
  border-color: var(--field-border-color);
  background: var(--select-surface);
  box-shadow: var(--field-popover-shadow);
}

body[data-theme="light"] .custom-select-option {
  color: var(--select-text);
}

body[data-theme="light"] .custom-select-option:hover,
body[data-theme="light"] .custom-select-option:focus-visible {
  background: transparent;
  color: var(--select-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--field-focus-color) 42%, transparent);
}

body[data-theme="light"] .custom-select-option.is-selected {
  background: transparent;
  color: var(--select-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--field-focus-color) 46%, transparent);
}

body[data-theme="light"] .marquee-item {
  color: rgba(12, 18, 30, 0.78);
}

body[data-theme="light"] .hero-secondary-cta {
  color: rgba(12, 18, 30, 0.62);
  border-color: rgba(12, 18, 30, 0.2);
}

body[data-theme="light"] .eyebrow,
body[data-theme="light"] .card-index {
  color: var(--accent);
}

body[data-theme="light"] .eyebrow::before {
  background: repeating-linear-gradient(
    0deg,
    color-mix(in srgb, var(--accent) 58%, transparent) 0,
    color-mix(in srgb, var(--accent) 58%, transparent) 1.5px,
    transparent 1.5px,
    transparent 3.5px
  );
}

body[data-theme="light"] .case-media img {
  background: #eef3f8;
}

body[data-theme="light"] .form-printing-overlay {
  background: rgba(244, 248, 252, 0.92);
}

body[data-theme="light"] .form-printing-label {
  color: rgba(12, 18, 30, 0.6);
}

body[data-theme="light"] .layer-viz-wrap {
  background: rgba(12, 18, 30, 0.04);
  border-color: rgba(12, 18, 30, 0.14);
}

body[data-theme="light"] .layer-viz-label {
  color: rgba(12, 18, 30, 0.68);
}

body[data-theme="light"] .viz-btn {
  color: rgba(12, 18, 30, 0.72);
  border-color: rgba(12, 18, 30, 0.18);
}

body[data-theme="light"] .viz-btn:hover,
body[data-theme="light"] .viz-btn:focus-visible {
  color: rgba(12, 18, 30, 0.92);
  border-color: rgba(12, 18, 30, 0.32);
}

body[data-theme="light"] .mobile-sticky-cta {
  background: #111820;
  color: #f6f9fd;
}

.brand-system {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.brand-logo-primary {
  display: block;
  width: clamp(144px, 22vw, 198px);
  height: auto;
}

.brand-logo-light,
.footer-logo-light {
  display: none;
}

body[data-theme="light"] .brand-logo-dark,
body[data-theme="light"] .footer-logo-dark {
  display: none;
}

body[data-theme="light"] .brand-logo-light,
body[data-theme="light"] .footer-logo-light {
  display: block;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: var(--w-15);
  background: var(--w-02);
  color: var(--text);
  outline: none;
}

body[data-theme="light"] .theme-toggle {
  border-color: var(--panel-border);
}

body[data-theme="light"] .theme-toggle:hover,
body[data-theme="light"] .theme-toggle:focus-visible {
  border-color: var(--w-15);
}

body[data-theme="light"] .funnel-step span {
  color: var(--accent);
}

body[data-theme="light"] .contact-points a {
  color: var(--accent);
}

body[data-theme="light"] .contact-copy .eyebrow {
  color: var(--accent);
}

body[data-theme="light"] .printer-hud {
  color: rgba(12, 18, 30, 0.9);
  background: rgba(248, 250, 253, 0.86);
  border-color: rgba(12, 18, 30, 0.14);
  box-shadow: 0 12px 32px rgba(12, 18, 30, 0.14);
}

body[data-theme="light"] .printer-hud .h-lbl {
  color: rgba(12, 18, 30, 0.58);
}

body[data-theme="light"] .printer-hud .h-val {
  color: rgba(12, 18, 30, 0.92);
}

body[data-theme="light"] .layer-viz-wrap {
  background: rgba(12, 18, 30, 0.03);
  border-color: rgba(12, 18, 30, 0.1);
}

body[data-theme="light"] .layer-viz-label,
body[data-theme="light"] .viz-btn,
body[data-theme="light"] .upload-info {
  color: rgba(12, 18, 30, 0.62);
}

body[data-theme="light"] .viz-btn {
  border-color: rgba(12, 18, 30, 0.18);
}

body[data-theme="light"] .viz-btn:hover,
body[data-theme="light"] .viz-btn:focus-visible {
  color: rgba(12, 18, 30, 0.82);
  border-color: rgba(12, 18, 30, 0.28);
}

body[data-theme="light"] #materialCanvas {
  background: rgba(12, 18, 30, 0.025);
  border-color: rgba(12, 18, 30, 0.08);
}

body[data-theme="light"] .service-card::before,
body[data-theme="light"] .glass-card::before,
body[data-theme="light"] .funnel-step::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(12, 18, 30, 0.34) 0,
    rgba(12, 18, 30, 0.34) 2px,
    transparent 2px,
    transparent 6px
  );
}

body[data-theme="light"] .service-card::after,
body[data-theme="light"] .glass-card::after,
body[data-theme="light"] .funnel-step::after {
  background: rgba(12, 18, 30, 0.16);
}

body[data-theme="light"] .case-media::after {
  background: repeating-linear-gradient(
    0deg,
    rgba(12, 18, 30, 0.09) 0,
    rgba(12, 18, 30, 0.09) 1.5px,
    transparent 1.5px,
    transparent 4px
  );
}

body[data-theme="light"] .upload-progress {
  background: rgba(12, 18, 30, 0.04);
  border-color: rgba(12, 18, 30, 0.08);
}

body[data-theme="light"] .form-printing-overlay {
  background: rgba(248, 250, 253, 0.92);
}

body[data-theme="light"] .form-printing-label {
  color: rgba(12, 18, 30, 0.62);
}

body[data-theme="light"] .form-printing-progress {
  background: rgba(12, 18, 30, 0.08);
}

.footer-brand-link {
  display: inline-flex;
  align-items: center;
}

.footer-logo {
  width: clamp(144px, 22vw, 198px);
  height: auto;
}

@media (max-width: 720px) {
  .brand-logo-primary {
    width: 144px;
  }

  .theme-toggle {
    width: 92px;
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.65rem;
  }
}