/* Dark appearance only. Disabling this stylesheet restores the captured light theme. */
:root:root {
  color-scheme: dark;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  --bg: #101010;
  --bg-2: #181818;
  --bg-3: #242424;
  --fg: #f2f2f2;
  --fg-2: #c9c9c9;
  --muted: #a3a3a3;
  --line: #343434;
  --line-2: #707070;
  --accent: #f2f2f2;
  --accent-2: #dedede;
  --accent-3: #c9c9c9;
  --accent-deep: #f2f2f2;
  --grad: linear-gradient(#f2f2f2, #f2f2f2);
  --grad-soft: linear-gradient(#242424, #242424);
  --glass: #181818;
  --shadow: none;
  --shadow-lg: none;
  --up: #69d49a;
  --down: #ff8989;
  --surface: var(--bg-2);
  --card: var(--bg-2);
  --border: var(--line);
  --theme-action-hover: #dedede;
  --theme-overlay: #000000b8;
}

:root body {
  background: var(--bg);
  color: var(--fg);
}

:root ::selection {
  background: var(--fg);
  color: var(--bg);
}

/* Explicit white surfaces in CallScreen: controls, coin cards and chat bubbles. */
:root .bg-white {
  background-color: var(--bg-2);
}

/* The foreground token becomes light; its formerly white labels must invert too. */
:root [class~="bg-[var(--fg)]"][class~="text-white"] {
  color: var(--bg);
}

/* Keep the large homepage CTA as a raised dark panel, with its white copy button. */
:root .reveal[class~="bg-[var(--fg)]"] {
  background-color: var(--bg-3);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line);
}

:root .reveal[class~="bg-[var(--fg)]"] [class~="text-white/55"],
:root .reveal[class~="bg-[var(--fg)]"] [class~="text-white/70"] {
  color: var(--fg-2);
}

/* Search keeps a dark backdrop rather than reusing an inverted foreground. */
:root [class~="bg-black/50"] {
  background-color: var(--theme-overlay);
}

:root .dots {
  background-image: radial-gradient(#ffffff1a 1px, transparent 1.4px);
}

@media (hover: hover) {
  :root .btn-primary:hover,
  :root [class~="bg-[var(--fg)]"][class~="hover:bg-[#2a2a2a]"]:hover {
    background-color: var(--theme-action-hover);
    border-color: var(--theme-action-hover);
    color: var(--bg);
  }
}

/* A light-theme hover must not leave dark text against the old #2a2a2a fill. */
@media (hover: none) {
  :root .btn-primary:hover {
    background-color: var(--fg);
    color: var(--bg);
  }
}

:root :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

:root :is(input, select, textarea) {
  accent-color: var(--fg);
}

/* Server-rendered setup/token pages use standalone styles instead of the bundle. */
:root body > main:not([class]) .box {
  background: var(--bg-2);
  border-color: var(--line);
}

:root body > main:not([class]) a,
:root body > main:not([class]) code {
  color: var(--fg);
}

:root body > main:not([class]) small {
  color: var(--muted);
}

/* These small runtime panels set their colors inline; keep their layout intact. */
:root :is(#local-review, #local-site-ca, #local-ca-notice) {
  background: var(--bg-2) !important;
  color: var(--fg) !important;
  border-color: var(--line-2) !important;
}

:root #local-site-ca button {
  background: var(--bg-3) !important;
  color: var(--fg) !important;
  border-color: var(--line-2) !important;
}

:root #local-review a {
  color: var(--fg) !important;
}