/* Voltra: black, graphite and silver with the original orange accent. */
:root {
  color-scheme: dark;
  accent-color: var(--brand);
  --bg: #09090a;
  --bg-2: #0e0e10;
  --panel: #121214;
  --panel-2: #161618;
  --panel-3: #1c1c1f;
  --line: rgb(255 255 255 / 8%);
  --line-2: rgb(255 255 255 / 14%);
  --line-3: rgb(255 255 255 / 22%);
  --ink: #f4f4f2;
  --ink-2: #d4d4d8;
  --mute: #9b9ba1;
  --brand: #f3b43b;
  --brand-ink: #09090a;
  --control: var(--brand);
  --control-hover: var(--brand);
  --control-ink: #09090a;
  --moss: #c9c9cf;
  --up: #e9bf75;
  --down: #ef8b95;
  --warn: var(--brand);
  --danger-panel: color-mix(in srgb, var(--down) 7%, var(--panel));
  --danger-line: color-mix(in srgb, var(--down) 40%, transparent);
  --surface-glow: rgb(255 255 255 / 4%);
  --backdrop: #000000bd;

  /* Public pages and the private workspace share this palette. */
  --panel2: var(--panel-2);
  --panel-raised: var(--panel-2);
  --line-strong: var(--line-2);
  --muted: var(--mute);
  --ink-soft: var(--ink-2);
  --amber: var(--brand);
  --amber-ink: var(--brand-ink);
  --green: var(--up);
  --red: var(--down);
  --color-bg: var(--bg);
  --color-panel: var(--panel);
  --color-panel-2: var(--panel-2);
  --color-line: var(--line);
  --color-line-2: var(--line-2);
  --color-ink: var(--ink);
  --color-ink-2: var(--ink-2);
  --color-mute: var(--mute);
  --color-brand: var(--brand);
  --color-up: var(--up);
  --color-down: var(--down);
}

/* Native form states must not fall back to the browser's blue accent. */
:where(input, textarea, select):not(:where(#privy-dialog *)) {
  accent-color: var(--brand);
  caret-color: var(--brand);
}

input:is(:autofill, :-webkit-autofill):not(:where(#privy-dialog *)) {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--panel-2) inset;
  caret-color: var(--brand);
}

/* The wallet dialog owns its palette and keeps the SDK's original dark theme. */
#privy-dialog { accent-color: auto; }

img.object-cover.bg-panel-2:not(:where(#privy-dialog *)) {
  filter: grayscale(1);
}

/* Primary controls use the Voltra orange without changing neutral surfaces. */
:is(a, button)[class~="bg-brand"]:not(:where(#privy-dialog *)) {
  background-color: var(--control);
  color: var(--control-ink);
}
:is(a, button)[class~="bg-brand"]:hover:not(:disabled):not(:where(#privy-dialog *)) {
  background-color: var(--control-hover);
}

/* The saved ranking badges have literal colours outside the theme tokens. */
[class~="text-[#a9e4f2]"] { color: var(--ink); }
[class~="bg-[#9ad7e6]"] { background-color: var(--ink-2); }
[class~="border-[#9ad7e6]/50"] { border-color: var(--line-3); }
[class~="text-[#d5dce0]"] { color: var(--ink-2); }
[class~="border-[#c9d1d6]/45"] { border-color: var(--line-3); }
[class~="text-[#d39a6a]"] { color: var(--up); }
[class~="border-[#c58a5a]/50"] { border-color: color-mix(in srgb, var(--up) 40%, transparent); }

/* Furnace surfaces follow the theme; its orange embers remain the accent. */
[class~="bg-[#0f0c0a]"] { background-color: var(--bg); }
[class~="text-[#8a7d72]"],
[class~="text-[#9c8f83]"] { color: var(--mute); }
/* Important declarations in the captured utilities layer outrank unlayered
   rules. Its existing components layer precedes utilities, so this narrowly
   scoped important override wins the reversed important-layer cascade. */
@layer components {
  [class~="!text-[#8a7d72]"]:not(:where(#privy-dialog *)) { color: var(--mute) !important; }
}
[class~="text-[#b8aa9c]"],
[class~="text-[#cdbfb2]"],
[class~="text-[#d9cbbd]"] { color: var(--ink-2); }
[class~="text-[#f1e6da]"] { color: var(--ink); }
[class~="hover:text-[#f1e6da]"]:hover { color: var(--ink); }
[class~="border-[#3a2d24]"] { border-color: var(--line); }
[class~="border-[#9c8f83]/40"] { border-color: color-mix(in srgb, var(--mute) 40%, transparent); }
.ember-card {
  background: linear-gradient(145deg, var(--panel-2), var(--panel) 65%);
  border-color: var(--line);
}

.hero-scrim {
  background:
    linear-gradient(transparent 34%, color-mix(in srgb, var(--bg) 28%, transparent) 50%, color-mix(in srgb, var(--bg) 74%, transparent) 76%, color-mix(in srgb, var(--bg) 94%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 50%, transparent) 0%, transparent 52%);
}

/* Keep the landscape texture, but let the interface set its colour. */
.section-forest {
  background:
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 30%, color-mix(in srgb, var(--bg) 55%, transparent) 70%, var(--bg) 100%),
    url('/brand/web/section-background-960.webp') center / cover no-repeat,
    var(--bg);
  background-blend-mode: normal, luminosity;
}

.footer-forest {
  background:
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 25%, transparent) 45%, color-mix(in srgb, var(--bg) 70%, transparent) 100%),
    url('/brand/web/voltra-horizon-v1-1280.webp') center 60% / cover no-repeat,
    var(--bg);
  background-blend-mode: normal;
}

.public-site-dialog::backdrop,
.social-dialog::backdrop {
  background: var(--backdrop);
}

@media (min-width: 961px) {
  .footer-forest {
    background-image:
      linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 25%, transparent) 45%, color-mix(in srgb, var(--bg) 70%, transparent) 100%),
      url('/brand/web/voltra-horizon-v1.webp');
  }
  .section-forest {
    background-image:
      linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 30%, color-mix(in srgb, var(--bg) 55%, transparent) 70%, var(--bg) 100%),
      url('/brand/web/section-background.webp');
  }
}

@media (max-width: 1023px) {
  .hero-scrim {
    background: linear-gradient(color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 34%, color-mix(in srgb, var(--bg) 22%, transparent) 56%, transparent 70%, color-mix(in srgb, var(--bg) 30%, transparent) 100%);
  }
}