/* Shared monochrome interface. Spacecraft and gameplay retain their colours. */
html[data-theme="dark"],
html[data-theme="dark"] body {
  color-scheme: dark;
  --paper: #0b0b0b;
  --ink: #f3efe6;
  --muted: #b6b6b6;
  --steel: #b6b6b6;
  --line: #353535;
  --control-border: #777777;
  --action-border: #f3efe6;
  --hover-surface: #202020;
}

html[data-theme="light"],
html[data-theme="light"] body {
  color-scheme: light;
  --paper: #f3efe6;
  --ink: #0b0b0b;
  --muted: #595959;
  --steel: #595959;
  --line: #c9c7c2;
  --control-border: #777777;
  --action-border: #777777;
  --hover-surface: #e7e3db;
}

html[data-theme],
html[data-theme] body {
  /* Neutral aliases also cover the shared base styles and legal links. */
  --blue: var(--ink);
  --accent: var(--ink);
  --accent-ink: var(--ink);
  --accent-hover: #ffffff;
  --focus: var(--ink);
  --obsidian: #0b0b0b;
  --action-background: #f3efe6;
  --action-hover: #ffffff;
  --action-text: #0b0b0b;
  background: var(--paper);
}

html[data-theme] body {
  background: var(--paper);
  color: var(--ink);
}

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

/* Every page section follows the selected theme; media stays untouched. */
html[data-theme] :is(.site-header, .studio-hero-surface, .project-section,
  .studio-about, .contact-section, .site-footer, .g-hero, .g-gameplay,
  .g-details, .g-coming) {
  background: var(--paper);
  color: var(--ink);
  --focus: var(--ink);
}

html[data-theme] :is(.site-header, .nav-links, .hero-bottom, .contact-bottom,
  .project-bottom, .g-hero-bottom, .g-play-facts,
  .g-details, .g-detail-list > p, .site-footer) {
  border-color: var(--line);
}

html[data-theme] :is(.hero-topline, .project-status, .project-bottom,
  .g-release-line, .g-hero-bottom, .g-hero-bottom p:last-child) {
  color: var(--muted);
}

html[data-theme] :is(.hero-bottom .text-link span,
  .g-section-heading h2 span) {
  color: var(--ink);
}

html[data-theme] :is(.project-cta > span, .g-hero-bottom p > span,
  .g-coming-bottom .text-link > span) {
  color: var(--accent-ink);
}

html[data-theme] :is(.nav-toggle, .g-arrow) {
  color: var(--ink);
  border-color: var(--control-border);
}

html[data-theme] :is(.hero-bottom .text-link, .project-cta) {
  border-color: var(--control-border);
}

/* Ecru actions have dark text and stay neutral in both themes. */
html[data-theme] :is(.button-accent, .skip) {
  background: var(--action-background);
  border-color: var(--action-border);
  color: var(--action-text);
}

html[data-theme] .button-accent:hover,
html[data-theme] .g-arrow:hover {
  background: var(--action-hover);
  border-color: var(--action-border);
  color: var(--action-text);
}

html[data-theme] .button-accent:focus-visible,
html[data-theme] :is(button, a, input):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 5px;
}



html[data-theme] .g-thumbnail[aria-pressed="true"] img {
  outline-color: var(--accent-ink);
}

html[data-theme] .g-thumbnails {
  scrollbar-color: var(--control-border) transparent;
}

/* Gameplay screenshots retain their complete frame. */
html[data-theme] .g-phone-display > .g-shot-view {
  background: #000;
}

html[data-theme] :is(.project-image, .g-hero-art) {
  background: transparent;
}

html[data-theme] .g-hero-art {
  mix-blend-mode: normal;
}

/* Preserve the supplied mark and lettering; remove only their coloured reflections. */
html[data-theme] :is(.brand-symbol, .hero-brand) {
  filter: grayscale(1);
}

/* Hero proportions and positioning are shared by both themes in game.css. */

/* Compact segmented control; the active option is also marked by a line. */
.theme-switch {
  display: inline-flex;
  align-items: stretch;
  align-self: center;
  flex-shrink: 0;
  border: 1px solid var(--control-border);
  background: transparent;
  color: var(--ink);
}

.theme-switch [data-theme-choice] {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 52px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 500 12px/1 Arial, Helvetica, sans-serif;
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.theme-switch [data-theme-choice] + [data-theme-choice] {
  border-left: 1px solid var(--line);
}

.theme-switch [data-theme-choice]:hover {
  background: var(--hover-surface);
  color: var(--ink);
}

.theme-switch [data-theme-choice][aria-pressed="true"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}

.theme-switch [data-theme-choice]:focus-visible {
  z-index: 1;
}

@media (max-width: 760px) {
  .theme-switch {
    align-self: flex-start;
    margin-top: 12px;
    margin-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch [data-theme-choice] {
    transition: none;
  }
}

/* Keep the studio headline in its requested red across both themes. */
html[data-theme] .hero-intro > p,
html[data-theme] .hero-intro em { color: rgb(156, 31, 21); }