/* Color-only experiment. Layout, imagery and behavior come from system-test. */
:root {
  --canvas: #F7F8FA;
  --paper: #FFFFFF;
  --ink: #111318;
  --muted: #68707D;
  --hairline: #E2E6EC;
  --construction: #C9D2DC;
  --accent: #2457F5;
  --accent-hover: #1742CF;
  --accent-soft: #EDF2FF;
  --product-dark: #121720;
  --primary-cta: #111318;
  --primary-cta-hover: #242A33;
}

.button-primary {
  background-color: var(--primary-cta);
  color: var(--paper);
}

.button-primary:hover {
  background-color: var(--primary-cta-hover);
}

#product-dialog::backdrop {
  background-color: rgb(17 19 24 / 65%);
}

/* Accent denotes an action or an event/time relationship, never a canvas. */
.quiet-action,
.header-account [aria-hidden],
.site-header nav [aria-hidden],
.event-fragment-label [aria-hidden] {
  color: var(--accent);
}

.quiet-action:hover {
  color: var(--accent-hover);
}

.scene-handoff path {
  stroke: var(--accent);
}

.mode-controls button[aria-pressed=true] {
  background-color: var(--accent-soft);
  color: var(--accent);
}

.mode-controls button:hover:not([aria-pressed=true]) {
  background-color: var(--canvas);
  color: var(--accent-hover);
}