/* Satellite's brand palette, sampled from the supplied JPEG logo.
   The source is photographic/compressed: these are actual dominant pixel values,
   not a claim about the original vector artwork's color definitions. */
:root {
  color-scheme: dark;
  --brand-black: #000000;
  --brand-white: #FFFFFF;
  --brand-blue: #1B3766;
  --brand-gold: #FAFA5C;
  --brand-silver: #BFBFBF;

  --surface-base: #080808;
  --surface-sidebar: #0E0E0E;
  --surface-input: #0A0A0A;
  --surface-panel: #161616;
  --surface-raised: #202020;
  --surface-hover: #2A2A2A;
  --surface-selected: #2C2C2C;
  --surface-control: #333333;
  --line: #353535;
  --line-strong: #777777;
  --text: var(--brand-white);
  --text-secondary: var(--brand-silver);
  --text-muted: #ABABAB;
  --text-faint: #949494;
  --on-accent: var(--brand-black);
  --platinum: #E5E4E2;
  --gold-muted: #BABA50;
  --gold-surface: #242517;
  --gold-line: #62632F;
  --danger: #EFA59E;
  --danger-surface: #352327;
  --danger-line: #82534F;
  --accent: var(--brand-gold);
  --muted: var(--text-muted);

  /* Extra steps keep the Command Center's pixel art dimensional. */
  --scene-floor: #141414;
  --scene-tile: #1C1C1C;
  --scene-tile-light: #242424;
  --scene-metal: #454545;
  --scene-metal-light: #6A6A69;
  --scene-highlight: #A6A6A3;
}

::selection { background: var(--brand-gold); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; }
html { background: var(--surface-base); accent-color: var(--brand-gold); }
body { background: var(--surface-base); }

/* Display the supplied artwork itself. CSS frames the rings without changing
   the original image; screen blending lets its black background recede. */
.satellite-brandmark,
.sidebar .mark.satellite-brandmark,
.mobile-header .mark.satellite-brandmark {
  display: inline-block;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url('/static/brand-logo.jpg') center / 166.6667% no-repeat;
  mix-blend-mode: screen;
  vertical-align: middle;
}
#welcome .satellite-brandmark { width: 104px; height: 104px; margin-bottom: 8px; }
.studio-orb.satellite-brandmark {
  width: 100px;
  height: 100px;
  box-shadow: none;
}
.sound-art .satellite-brandmark { position: static; width: 194px; height: 194px; }

/* Give navigation and the transport the clearest brand cues. */
body .sidebar { background: var(--surface-sidebar); }
.sidebar .nav.active { background: var(--surface-selected); color: var(--brand-white); }
.sidebar .nav.active [data-nav-icon] { color: var(--brand-gold); }
.sidebar .nav.active::before { background: var(--brand-gold); }
.sidebar .nav.active .count { background: var(--surface-control); color: var(--brand-white); }
.sidebar .cc-mode-toggle { background: var(--surface-input); border-color: var(--line); }
.cc-mode-toggle button[aria-pressed=true] { background: var(--surface-control); color: var(--brand-white); }
.mobile-header { background: color-mix(in srgb, var(--surface-sidebar) 96%, transparent); }
.brand small { color: var(--text-secondary); border-color: var(--line-strong); }
#chat-form:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--platinum) 12%, transparent); }
#chat-view .message.user .message-content { background: var(--surface-selected); }
.primary, #send, .satellite-player .player-play { background: var(--brand-gold); color: var(--on-accent); }
.satellite-player .player-play { border-color: transparent; }
.secondary:hover, .beat-row-actions button:hover { border-color: var(--line-strong); }
#global-player { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface-panel) 97%, transparent); }
.beat-details-tabs [aria-selected=true], .settings-tabs button.active { background: var(--surface-control); color: var(--brand-white); }

/* Preserve distinct operational signals within the branded scene. */
#command-center-view .cc-station[data-status=waiting] .cc-station-state,
#command-center-view .cc-station[data-status=queued] .cc-station-state,
#command-center-view .cc-status[data-status=waiting],
#command-center-view .cc-status[data-status=queued] { color: var(--platinum); fill: var(--platinum); }
#command-center-view .cc-station[data-status=failed] .cc-station-state,
#command-center-view .cc-station.cc-has-issue .cc-station-light,
#command-center-view .cc-beat-collection[data-status=failed] .cc-file-paper { fill: var(--danger); }
#command-center-view .cc-status[data-status=failed],
#command-center-view .cc-status.failed { color: var(--danger); background: var(--danger-surface); border-color: var(--danger-line); }

@media (max-width: 760px) {
  .mobile-header .mark.satellite-brandmark { width: 36px; height: 36px; }
  #welcome .satellite-brandmark { width: 88px; height: 88px; }
}
@media (max-width: 370px) {
  .site-header .satellite-brandmark { width: 32px; height: 32px; }
}