:root {
  color-scheme: dark;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --transition-smooth: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-theme="starry"] {
  --color-bg: #071120;
  --color-bg-alt: #0d1933;
  --color-surface: rgba(8, 19, 39, 0.7);
  --color-surface-soft: rgba(10, 23, 46, 0.6);
  --color-inset: rgba(5, 15, 31, 0.72);
  --color-input-bg: rgba(9, 22, 42, 0.78);
  --color-status-bg: rgba(4, 13, 29, 0.82);
  --color-border: rgba(143, 184, 214, 0.16);
  --color-border-soft: rgba(166, 205, 232, 0.11);
  --color-text: #edf6ff;
  --color-muted: #9db4c9;
  --color-subtle: #c7d8ea;
  --color-highlight: #f7fbff;
  --color-accent: #7acfe5;
  --color-accent-strong: #2eb6d4;
  --color-accent-warm: #5db8f5;
  --color-focus-ring: rgba(58, 183, 212, 0.22);
  --color-shadow: rgba(1, 8, 18, 0.45);
  --theme-glow-a: rgba(47, 113, 167, 0.32);
  --theme-glow-b: rgba(92, 192, 224, 0.2);
  --theme-image-main: url("/images/themes/starry_sky/bg_1.png");
  --theme-image-secondary: url("/images/themes/starry_sky/bg_2.png");
}

body[data-theme="ocean"] {
  --color-bg: #03121a;
  --color-bg-alt: #0a2d38;
  --color-surface: rgba(4, 24, 29, 0.72);
  --color-surface-soft: rgba(6, 31, 36, 0.62);
  --color-inset: rgba(3, 19, 24, 0.74);
  --color-input-bg: rgba(5, 30, 35, 0.8);
  --color-status-bg: rgba(2, 18, 24, 0.82);
  --color-border: rgba(104, 193, 184, 0.16);
  --color-border-soft: rgba(142, 220, 206, 0.1);
  --color-text: #ebfbf8;
  --color-muted: #92bcb7;
  --color-subtle: #c1e7e1;
  --color-highlight: #f6fffd;
  --color-accent: #72d7ca;
  --color-accent-strong: #17b9b5;
  --color-accent-warm: #72d7ca;
  --color-focus-ring: rgba(23, 185, 181, 0.2);
  --color-shadow: rgba(1, 9, 12, 0.42);
  --theme-glow-a: rgba(16, 143, 141, 0.28);
  --theme-glow-b: rgba(99, 214, 196, 0.2);
  --theme-image-main: url("/images/themes/ocean/bg_2.png");
  --theme-image-secondary: url("/images/themes/ocean/bg_1.png");
}

body {
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 35%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}

body::before,
body::after {
  content: "";
  inset: -12%;
  pointer-events: none;
  position: fixed;
  z-index: -4;
}

body::before {
  background-image: var(--theme-image-main);
  background-position: center;
  background-size: cover;
  filter: brightness(0.68) saturate(0.92);
  opacity: 0.24;
  transform: scale(1.08);
  animation: drift-slow 36s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(circle at 16% 20%, var(--theme-glow-a), transparent 28%),
    radial-gradient(circle at 84% 16%, var(--theme-glow-b), transparent 30%),
    var(--theme-image-secondary) center / cover;
  mix-blend-mode: screen;
  opacity: 0.16;
  z-index: -3;
  animation: drift-reverse 46s ease-in-out infinite alternate;
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  padding: 28px clamp(16px, 2vw, 28px) 40px;
  position: relative;
}

.app-shell > section {
  flex: 1;
  min-height: 0;
}

.app-shell::before,
.app-shell::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
}

.app-shell::before {
  background:
    radial-gradient(circle at 15% 25%, var(--theme-glow-a), transparent 24%),
    radial-gradient(circle at 84% 22%, var(--theme-glow-b), transparent 26%),
    repeating-linear-gradient(
      90deg,
      transparent 0 119px,
      rgba(255, 255, 255, 0.02) 120px 121px
    );
  opacity: 0.95;
  z-index: -2;
}

.app-shell::after {
  background:
    radial-gradient(circle at center, transparent 0 56%, rgba(2, 8, 16, 0.34) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(4, 10, 18, 0.48));
  z-index: -1;
}

@keyframes drift-slow {
  from {
    transform: scale(1.06) translate3d(-1.5%, -0.8%, 0);
  }

  to {
    transform: scale(1.12) translate3d(1.5%, 1%, 0);
  }
}

@keyframes drift-reverse {
  from {
    transform: scale(1.04) translate3d(1.2%, -1%, 0);
  }

  to {
    transform: scale(1.1) translate3d(-1%, 1.2%, 0);
  }
}