/* Optional dark theme. Product screenshots retain their original colors. */
html[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #10141d;
  --surface-section: #151b26;
  --surface-card: #1a2230;
  --surface-raised: #263450;
  --surface-hover: #222e42;
  --surface-field: #111925;
  --surface-contact: #182131;
  --text-primary: #f1f3f8;
  --text-secondary: #a9b2c4;
  --text-on-frame: #d7dfed;
  --text-accent: #89a1ff;
  --text-accent-hover: #bdccff;
  --border-subtle: #343e51;
  --border-card: #53627c;
  --border-control: #8492ad;
  --action-background: #e5ebfa;
  --action-hover: #cbd8ff;
  --action-active: #b6c8fa;
  --action-text: #10141d;
  --frame-one: #303d54;
  --frame-arcarium: #3a3832;
  --frame-creator: #373148;
  --frame-pdv: #2c3d35;
  --error-text: #ffb4ab;
  --error-surface: #412b31;
  --shadow-color: #0008;
  /* Existing components inherit the same semantic theme. */
  --paper: var(--surface-page);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --blue: var(--text-accent);
  --blue-light: var(--surface-raised);
}

html[data-theme="dark"] ::selection {
  background: var(--text-accent);
  color: var(--action-text);
}

html[data-theme="dark"] :focus-visible {
  outline-color: var(--text-accent);
}

html[data-theme="dark"] .button-dark,
html[data-theme="dark"] .skip-link {
  background: var(--action-background);
  color: var(--action-text);
}

html[data-theme="dark"] .button-dark:hover:not(:disabled) {
  background: var(--action-hover);
  box-shadow: 0 4px 12px var(--shadow-color);
}

html[data-theme="dark"] .button-dark:active:not(:disabled) {
  background: var(--action-active);
}

html[data-theme="dark"] .button-dark:disabled {
  background: var(--action-background);
  color: var(--action-text);
  box-shadow: none;
}

/* Navigation and the compact controls keep a visible boundary. */
html[data-theme="dark"] .site-header {
  background: #10141df2;
  border-color: var(--border-subtle);
}

html[data-theme="dark"] .wordmark-name {
  border-color: var(--border-control);
}

html[data-theme="dark"] #site-nav > a:not(.button) {
  color: var(--text-secondary);
}

html[data-theme="dark"] #site-nav > a:not(.button):hover {
  color: var(--text-accent-hover);
}

html[data-theme="dark"] .menu-toggle,
html[data-theme="dark"] .theme-toggle {
  background: var(--surface-card);
  border-color: var(--border-control);
  color: var(--text-primary);
}

html[data-theme="dark"] .menu-toggle:hover,
html[data-theme="dark"] .menu-toggle[aria-expanded="true"],
html[data-theme="dark"] .theme-toggle:hover {
  background: var(--surface-hover);
  border-color: var(--text-accent);
}

html[data-theme="dark"] .text-link:hover,
html[data-theme="dark"] .back-top:hover {
  color: var(--text-accent-hover);
}

html[data-theme="dark"] .location-mark,
html[data-theme="dark"] .back-top > span {
  border-color: var(--border-control);
}

html[data-theme="dark"] .status-dot {
  box-shadow: 0 0 0 4px #89a1ff15;
}

/* The hero uses a lighter frame to separate the dark product artwork. */
html[data-theme="dark"] .hero-scene {
  background: linear-gradient(135deg, #1c2639, #293750);
  border-color: var(--border-card);
}

html[data-theme="dark"] .scene-grid {
  background-image:
    linear-gradient(#a5b8e012 1px, transparent 1px),
    linear-gradient(90deg, #a5b8e012 1px, transparent 1px);
}

html[data-theme="dark"] .scene-ring {
  border-color: #8492ad45;
}

html[data-theme="dark"] .scene-label,
html[data-theme="dark"] .scene-coordinate {
  color: var(--text-on-frame);
}

html[data-theme="dark"] .hero-window {
  background: var(--frame-one);
  border-color: var(--border-control);
  box-shadow: 0 24px 42px -20px var(--shadow-color);
}

html[data-theme="dark"] .window-chrome {
  background: #28344a;
  border-color: var(--border-card);
  color: var(--text-on-frame);
}

html[data-theme="dark"] .window-dots i {
  background: var(--border-control);
}

html[data-theme="dark"] .scene-small-window {
  background: #29364a;
  border-color: var(--border-control);
  color: var(--text-primary);
  box-shadow: 0 14px 35px -15px var(--shadow-color);
}

html[data-theme="dark"] .small-window-label small {
  color: var(--text-on-frame);
}

html[data-theme="dark"] .small-project-symbol {
  color: #e4cf96;
  border-color: #b7a779;
}

html[data-theme="dark"] .hero-footnote i,
html[data-theme="dark"] .development-label > span {
  background: var(--text-secondary);
}

/* Main surfaces and product-specific gallery frames. */
html[data-theme="dark"] .solutions,
html[data-theme="dark"] .process,
html[data-theme="dark"] .site-footer {
  background: var(--surface-section);
  border-color: var(--border-subtle);
}

html[data-theme="dark"] .solution,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .contact-form-wrap {
  background: var(--surface-card);
  border-color: var(--border-card);
  box-shadow: 0 8px 28px -18px var(--shadow-color);
}

html[data-theme="dark"] .solution:hover {
  background: var(--surface-hover);
  border-color: var(--text-accent);
}

html[data-theme="dark"] .solution-icon {
  background: var(--surface-raised);
  border-color: var(--border-card);
}

html[data-theme="dark"] .solution-icon svg {
  stroke: var(--text-accent-hover);
}

html[data-theme="dark"] .round-arrow {
  border-color: var(--border-control);
}

html[data-theme="dark"] .solution:hover .round-arrow {
  background: var(--text-accent);
  border-color: var(--text-accent);
  color: var(--action-text);
}

html[data-theme="dark"] .badge-blue {
  background: #283d66;
  color: #c1d0ff;
}

html[data-theme="dark"] .badge-blue > span {
  background: #c1d0ff;
}

html[data-theme="dark"] .badge-neutral {
  background: #3b3830;
  color: #e4dac1;
}

html[data-theme="dark"] .project-creator .badge-neutral {
  background: #3d3150;
  color: #dfcff7;
}

html[data-theme="dark"] .project-visual {
  background: var(--frame-one);
  border-color: var(--border-control);
}

html[data-theme="dark"] .project-arcarium .project-visual {
  background: var(--frame-arcarium);
  border-color: var(--border-control);
}

html[data-theme="dark"] .project-creator .project-visual {
  background: var(--frame-creator);
  border-color: var(--border-control);
}

html[data-theme="dark"] .project-pdv .project-visual {
  background: var(--frame-pdv);
  border-color: var(--border-control);
}

html[data-theme="dark"] .spotlight::after {
  background: radial-gradient(
    360px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
    #89a1ff0a,
    transparent 72%
  );
}

html[data-theme="dark"] .gallery-track {
  background: #202b3d;
  border-color: var(--border-control);
  scrollbar-color: var(--border-control) transparent;
  box-shadow: 0 16px 32px -16px var(--shadow-color);
}

html[data-theme="dark"] .project-arcarium .gallery-track {
  background: #282721;
}

html[data-theme="dark"] .project-creator .gallery-track {
  background: #272232;
}

html[data-theme="dark"] .project-pdv .gallery-track {
  background: #212e28;
}

html[data-theme="dark"] .gallery-label,
html[data-theme="dark"] .gallery-controls [data-gallery-count],
html[data-theme="dark"] .gallery-single {
  color: var(--text-on-frame);
}

html[data-theme="dark"] .gallery-controls button,
html[data-theme="dark"] .icon-button {
  background: transparent;
  border-color: var(--border-control);
  color: var(--text-primary);
}

html[data-theme="dark"] .gallery-controls button:hover:not(:disabled),
html[data-theme="dark"] .icon-button:hover:not(:disabled) {
  background: var(--surface-card);
  border-color: var(--text-accent-hover);
  color: var(--text-accent-hover);
}

html[data-theme="dark"] .gallery-controls button:disabled,
html[data-theme="dark"] .icon-button:disabled {
  opacity: 0.4;
}

html[data-theme="dark"] .zoom-hint {
  background: var(--surface-page);
  color: var(--text-primary);
  border-color: var(--border-control);
}

/* Paired light and dark edges stay visible over every screenshot. */
html[data-theme="dark"] .image-open:focus-visible {
  outline-color: var(--text-primary);
}

html[data-theme="dark"] .image-open:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 3px solid var(--surface-page);
  outline: 3px solid var(--text-primary);
  outline-offset: -6px;
}

/* Founder information uses the same text and surface hierarchy. */
html[data-theme="dark"] .founder-card {
  background: var(--surface-card);
  border-color: var(--border-card);
  color: var(--text-primary);
}

html[data-theme="dark"] .founder-topline,
html[data-theme="dark"] .founder-caption,
html[data-theme="dark"] .founder-roles {
  color: var(--text-secondary);
}

html[data-theme="dark"] .founder-emblem {
  background: var(--surface-raised);
  border-color: var(--border-control);
  color: var(--text-primary);
}

html[data-theme="dark"] .founder-statement,
html[data-theme="dark"] .founder-caption h3 {
  color: var(--text-primary);
}

html[data-theme="dark"] .founder-roles {
  border-color: var(--border-subtle);
}

html[data-theme="dark"] .founder-link {
  color: var(--text-accent);
  border-color: var(--border-control);
}

html[data-theme="dark"] .founder-link:hover {
  color: var(--text-accent-hover);
  border-color: var(--text-accent-hover);
}

html[data-theme="dark"] .faq-list summary:hover,
html[data-theme="dark"] .faq-list details[open] summary > span {
  color: var(--text-accent-hover);
}

/* Forms: default, hover, selected, invalid, focused and completed. */
html[data-theme="dark"] .contact {
  background: var(--surface-contact);
  border-color: var(--border-subtle);
}

html[data-theme="dark"] .contact-promise,
html[data-theme="dark"] .form-label {
  color: var(--text-secondary);
}

html[data-theme="dark"] .contact-placeholders {
  border-color: var(--border-subtle);
}

html[data-theme="dark"] .campo__entrada,
html[data-theme="dark"] .opcao {
  background: var(--surface-field);
  border-color: var(--border-control);
  color: var(--text-primary);
  caret-color: var(--text-primary);
}

html[data-theme="dark"] .campo__entrada::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

html[data-theme="dark"]
  .campo__entrada:hover:not(:disabled):not([aria-invalid="true"]),
html[data-theme="dark"] .opcao:hover {
  border-color: var(--text-accent-hover);
}

html[data-theme="dark"] .opcao:hover {
  background: var(--surface-hover);
}

html[data-theme="dark"] .opcao__radio:checked + .opcao {
  background: var(--surface-raised);
  border-color: var(--text-accent);
  color: var(--text-accent-hover);
}

html[data-theme="dark"] .tem-erro .campo__entrada,
html[data-theme="dark"] .tem-erro .opcao {
  border-color: var(--error-text);
}

html[data-theme="dark"] .campo__entrada:focus {
  border-color: var(--text-accent);
  outline: 2px solid var(--text-accent);
  outline-offset: 2px;
}

html[data-theme="dark"] .tem-erro .campo__entrada:focus {
  border-color: var(--error-text);
}

html[data-theme="dark"] .campo__erro,
html[data-theme="dark"] .envio-erro {
  color: var(--error-text);
}

html[data-theme="dark"] .envio-erro {
  background: var(--error-surface);
  border-color: var(--error-text);
}

html[data-theme="dark"] .campo__entrada:disabled,
html[data-theme="dark"] .opcao__radio:disabled + .opcao {
  background: var(--surface-card);
  color: var(--text-secondary);
  border-color: var(--border-card);
  cursor: default;
  opacity: 0.65;
}

html[data-theme="dark"] .campo__entrada:autofill {
  background: var(--surface-raised);
  color: var(--text-primary);
}

html[data-theme="dark"] .campo__entrada:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  box-shadow: inset 0 0 0 1000px var(--surface-raised);
  caret-color: var(--text-primary);
}

html[data-theme="dark"] .received pre {
  background: var(--surface-field);
  border-color: var(--border-card);
  color: var(--text-primary);
}

html[data-theme="dark"] .received-mark {
  background: var(--surface-raised);
  border-color: var(--text-accent);
  color: var(--text-accent-hover);
}

/* Dialog chrome also separates the original screenshot from the backdrop. */
html[data-theme="dark"] .image-dialog {
  background: var(--surface-card);
  border-color: var(--border-control);
  color: var(--text-primary);
  box-shadow: 0 30px 100px #000a;
}

html[data-theme="dark"] .image-dialog::backdrop {
  background: #070b13e6;
}

html[data-theme="dark"] .dialog-toolbar {
  border-color: var(--border-card);
}

html[data-theme="dark"] .dialog-image-wrap {
  background: var(--frame-one);
}

html[data-theme="dark"] .dialog-bottom {
  color: var(--text-on-frame);
}