/* Rules the reference stylesheets have no equivalent for. Everything else in
   the creator area comes from the files beside this one, unmodified. */

/* ---- dark theme ----
   The reference ships light only. Its colours all run through the --color-*
   variables below, so dark is mostly a second set of values, switched on by
   data-theme on <html> (set from the creator's saved preference). */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-ground: #0f0d14;
  --color-surface: #18151f;
  --color-sunken: #221e2b;
  --color-ink: #f5f2f7;
  --color-ink-2: #d2ccd9;
  --color-muted: #9d96a9;
  --color-line: #2c2735;
  --color-line-2: #3d3748;

  --color-accent-2: #ff6aa9;
  --color-accent-soft: #3a1529;
  --color-gold: #e2b23c;
  --color-gold-soft: #372b10;
  --color-good: #2fcf8b;
  --color-good-soft: #113024;
  --color-risk: #ff6b64;
  --color-risk-soft: #3b1716;
  --color-warn: #f0a63a;
  --color-warn-soft: #38270d;
  --color-info: #7aa2ff;
  --color-info-soft: #16223f;
}

/* The rest are the rules that hardcode a light colour instead of using a
   variable, so the values above cannot reach them. */

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

html[data-theme="dark"] .input {
  background: var(--color-sunken);
}

html[data-theme="dark"] .input::placeholder {
  color: #6f6880;
}

/* `bg-ink` is used as "a dark block with white text on it" (the invite hero,
   step numbers, the video letterbox). With ink now a light colour that would
   invert, so pin it to a raised dark instead. */
html[data-theme="dark"] .bg-ink {
  background-color: #2b2634;
}

/* A white button keeps dark text. */
html[data-theme="dark"] .bg-white.text-ink {
  color: #14121a;
}

/* The solid black button becomes a solid light one. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .lw-chip[aria-pressed="true"] {
  color: #14121a;
  -webkit-text-fill-color: #14121a;
}

html[data-theme="dark"] .btn-primary:hover {
  background: #fff;
}

html[data-theme="dark"] .lw-big {
  background: var(--color-surface);
}

html[data-theme="dark"] .cr-screen,
html[data-theme="dark"] .cr-jackpot-bg {
  background: var(--color-ground);
}

html[data-theme="dark"] .cr-jackpot {
  --cr-ink: var(--color-ink);
  color: var(--color-ink);
}

html[data-theme="dark"] .cr-tile {
  background: var(--color-surface);
}

html[data-theme="dark"] .cr-btn-ghost:hover {
  background: var(--color-sunken);
}

html[data-theme="dark"] .cr-ring-3 {
  border-color: #ffffff59;
}

/* The selected board tab sits on an ink-coloured pill, which is light here. */
html[data-theme="dark"] .board-tabs button[aria-selected="true"] {
  color: #14121a;
}