/* Hand-tuned exceptions for the dark theme. Loaded after the generated dark.css.
   The palette is the Opus design's: graphite surfaces, bone text, orange accent. */

/* text and ticks that sit on the orange accent use dark ink, as Opus did */
:root[data-theme="dark"] .button-primary,
:root[data-theme="dark"] .button-primary:hover,
:root[data-theme="dark"] .pick input:checked+.pick-box,
:root[data-theme="dark"] .thumb .selected-mark {
  color:#190c04;
}

:root[data-theme="dark"] .thumb .selected-mark {
  background:var(--accent);
}

:root[data-theme="dark"] .button-primary .loading-spinner {
  border-color:#190c0455;
  border-top-color:#190c04;
}

:root[data-theme="dark"] .button-primary {
  box-shadow:none;
}

/* media sits on the darkest plane */
:root[data-theme="dark"] .video-stage,
:root[data-theme="dark"] .image-stage,
:root[data-theme="dark"] .contact-stage,
:root[data-theme="dark"] .frames,
:root[data-theme="dark"] .sample-visual {
  background:#040405;
}

:root[data-theme="dark"] .text-stage {
  background:#16191d;
}

:root[data-theme="dark"] .doc-stage {
  background:#0b0c0e;
}

:root[data-theme="dark"] .doc-page,
:root[data-theme="dark"] .page-fan img {
  box-shadow:0 8px 26px #000000a0;
}

/* floating layers are raised surfaces with a hairline, not navy slabs */
:root[data-theme="dark"] .toast,
:root[data-theme="dark"] .draft-inner,
:root[data-theme="dark"] .release-inner {
  background:#1c2025;
  border:1px solid #343a42;
  color:var(--ink);
  box-shadow:0 14px 40px #000000b0;
}

:root[data-theme="dark"] .release-inner .button:focus-visible {
  outline-color:var(--ink);
}

:root[data-theme="dark"] .draft-text span {
  color:var(--body);
}

:root[data-theme="dark"] .draft-inner .button:not(.button-primary) {
  border-color:#4d545e;
  color:var(--ink);
}

:root[data-theme="dark"] .modal-layer,
:root[data-theme="dark"] .drawer-scrim {
  background:#000000a8;
}

:root[data-theme="dark"] .modal {
  box-shadow:0 25px 100px #000000c0;
}

:root[data-theme="dark"] .sidebar {
  box-shadow:none;
}

@media(hover:hover) {
  :root[data-theme="dark"] .dataset-card:hover {
    box-shadow:0 7px 20px #00000070;
  }
}

:root[data-theme="dark"] mark {
  background:#5c3a12;
  color:#ffe6bd;
}

:root[data-theme="dark"] ::selection {
  background:#ff7a3352;
}

:root[data-theme="dark"] .gate-mark,
:root[data-theme="dark"] .step-dot {
  background:#101215;
}

:root[data-theme="dark"] .gate-done .gate-mark,
:root[data-theme="dark"] .step-done .step-dot {
  background:#3f9a76;
  border-color:#3f9a76;
  color:#06130d;
}

:root[data-theme="dark"] .gate-failed .gate-mark {
  background:#c95a6e;
  border-color:#c95a6e;
  color:#1a0508;
}

:root[data-theme="dark"] .region text {
  stroke:#040405;
}

:root[data-theme="dark"] .banner-strong {
  background:#231a0b;
  border-color:#5a4520;
  color:#e6cf9c;
}

:root[data-theme="dark"] .banner-strong strong {
  color:#f3dfb2;
}

:root[data-theme="dark"] ::placeholder,
:root[data-theme="dark"] .composer textarea::placeholder {
  color:#9a968d;
  opacity:1;
}

:root[data-theme="dark"] .text-stage .turn.v {
  color:#8fd0c4;
}

:root[data-theme="dark"] .owned-tag {
  color:#93d1a0;
}

:root[data-theme="dark"] .button[aria-disabled="true"]:hover {
  background:#101215;
}

:root[data-theme="dark"] .button-primary[aria-disabled="true"]:hover {
  background:var(--accent);
}

/* pictures shown whole sit on the darkest plane */
:root[data-theme="dark"] .poster-row {
  background:#0b0c0e;
}

:root[data-theme="dark"] .tag-canada {
  background:#2b1418;
  border-color:#5a2a35;
  color:#f09aa8;
}

:root[data-theme="dark"] .badge-purple {
  background:#221c36;
  color:#c9bdf2;
}

/* the explanation of a term (js/glossary.js): a plain shadow, not the orange the generator maps the light one to */
:root[data-theme="dark"] .term-bubble {
  border-color:#3a3f47;
  box-shadow:0 10px 28px #000000a0;
}

/* the overview's step strip: the customer's steps are filled with the accent, Talven's hollow (the .step-dot fill above) */
:root[data-theme="dark"] .overview-steps .step-dot {
  border-color:var(--accent);
}

:root[data-theme="dark"] .overview-steps .step-you .step-dot {
  background:var(--accent);
}