:root {
  --bg-primary: #cd43a6;
  --bg-accent: rgba(227, 141, 36, 1);
  --bg-color: hsla(317, 50%, 10%, 1);
  --bg-image: url("/static/backgrounds/0.svg");

  --panel: oklch(21.8% 0.008 223.9);
  --panel-raised: oklch(27.5% 0.011 216.9);
  --panel-hover: oklch(27.5% 0.011 216.9);
  --row-alt: oklch(24.5% 0.009 220);
  --chrome: oklch(21.8% 0.008 223.9);
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-soft: rgba(255, 255, 255, 0.055);
  --tbl-accent: var(--accent);
  --tbl-accent-soft: color-mix(in srgb, var(--tbl-accent) 24%, transparent);
  --tbl-group: #f0a53c;
  --tbl-group-soft: color-mix(in srgb, var(--tbl-group) 26%, transparent);
  --table-outline: rgba(255, 255, 255, 0.55);
  --ink: #f2f2f2;
  --ink-strong: #ffffff;
  --ink-muted: #d4d4d8;
  --error: #ff8080;
  --input-bg: oklch(14.8% 0.004 228.8);
  --input-border: rgba(255, 255, 255, 0.22);
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-bg-hover: rgba(255, 255, 255, 0.16);
  --btn-line: rgba(255, 255, 255, 0.16);
  --btn-primary-bg: #e4e4e7;
  --btn-primary-bg-hover: #ffffff;
  --btn-primary-fg: #18181b;
  --row-hover: rgba(255, 255, 255, 0.06);
  --list-item-bg: oklch(21.8% 0.008 223.9);
  --list-item-hover: oklch(27.5% 0.011 216.9);
  --tip-bg: oklch(14.8% 0.004 228.8);
  --tip-fg: #d4d4d8;
  --amount-pos: #4ade80;
  --amount-neg: #f87171;
  --amount-warn: #fbbf24;
  --amount-ahead: #60a5fa;
  --accent: #ea72c6;
  --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-ink: #16060f;

  --danger: #f87171;
  --danger-border: rgba(248, 113, 113, 0.45);
  --danger-strong: #ef4444;
  --warning: #f0b429;

}

html.admin-light {
  --panel: #ffffff;
  --panel-raised: #eceef1;
  --panel-hover: #f3f4f6;
  --row-alt: #f6f7f9;
  --chrome: #ffffff;
  --accent: var(--bg-primary);
  --accent-soft: color-mix(in srgb, var(--bg-primary) 13%, transparent);
  --accent-ink: #ffffff;
  --tbl-accent: var(--accent);
  --tbl-group: var(--bg-accent);
  --hairline: rgba(0, 0, 0, 0.1);
  --hairline-soft: rgba(0, 0, 0, 0.05);
  --table-outline: rgba(0, 0, 0, 0.65);
  --ink: #1f2937;
  --ink-strong: #111827;
  --ink-muted: #374151;
  --error: #b91c1c;
  --input-bg: #ffffff;
  --input-border: rgba(0, 0, 0, 0.22);
  --btn-bg: #ffffff;
  --btn-bg-hover: #e4e4e7;
  --btn-line: #d4d4d8;
  --btn-primary-bg: #18181b;
  --btn-primary-bg-hover: #000000;
  --btn-primary-fg: #fafafa;
  --row-hover: rgba(0, 0, 0, 0.04);
  --list-item-bg: #f6f7f9;
  --list-item-hover: #eceef1;
  --tip-bg: #ffffff;
  --tip-fg: #374151;
  --amount-pos: #15803d;
  --amount-neg: #b91c1c;
  --amount-warn: #a16207;
  --amount-ahead: #1d4ed8;

  --danger: #dc2626;
  --danger-border: rgba(220, 38, 38, 0.4);
  --danger-strong: #dc2626;
}

@supports (color: oklch(from white l c h)) {
  :root {
    --accent: oklch(from var(--bg-primary) max(l, 0.72) c h);
    --tbl-group: oklch(from var(--bg-accent) calc(l + 0.09) c h);
  }
}

.splatoon-bg::before {
  content: "";
  position: fixed;
  top: -50vh;
  left: -50vw;
  width: 200vw;
  height: 200vh;
  z-index: -3;
  pointer-events: none;
  opacity: 0.14;
  background:
    radial-gradient(
      closest-side at 38% 42%,
      color-mix(in srgb, var(--bg-primary) 20%, transparent),
      transparent 70%
    ),
    radial-gradient(
      closest-side at 72% 55%,
      color-mix(in srgb, var(--bg-accent) 16%, transparent),
      transparent 68%
    ),
    radial-gradient(
      closest-side at 48% 88%,
      color-mix(in srgb, var(--bg-color) 22%, transparent),
      transparent 64%
    );
  transform-origin: center;
  animation: rotateBg 180s linear infinite;
}

.splatoon-bg::after {
  content: "";
  position: fixed;
  top: -50vh;
  left: -25vw;
  width: 150vw;
  height: 200vh;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom right,
    transparent 0%,
    transparent 10%,
    var(--bg-accent) 42%,
    var(--bg-primary) 58%,
    transparent 90%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask-image: var(--bg-image);
  mask-image: var(--bg-image);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 120px;
  mask-size: 120px;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  opacity: 0.1;
  transform-origin: center;
  transform: rotate(15deg);
  animation: rotateBg 1800s linear infinite;
}

@keyframes rotateBg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splatoon-bg::before,
  .splatoon-bg::after {
    animation: none;
  }
}