/* Shared neo-brutalist design tokens and primitives */
:root {
  --neo-bg: #f7f4ea;
  --neo-surface: #fffef8;
  --neo-ink: #121212;
  --neo-muted: #4b5563;
  --neo-border: #121212;
  --neo-accent-yellow: #ffd84d;
  --neo-accent-cyan: #9de8ff;
  --neo-accent-pink: #ff7fbe;
  --neo-accent-green: #9af59e;
  --neo-shadow: 6px 6px 0 #121212;
  --neo-shadow-sm: 4px 4px 0 #121212;
  --neo-radius: 14px;
  --neo-font-body: "Space Grotesk", "Segoe UI", sans-serif;
  --neo-font-display: "Archivo Black", "Arial Black", sans-serif;
}

/* Dark Mode Token Overrides */
body.neo-theme[data-theme="dark"],
body.neo-theme.dark-mode {
  --neo-bg: #0a1228;
  --neo-surface: #11172b;
  --neo-ink: #dbe8ff;
  --neo-muted: #9fb0d8;
  --neo-border: #a4beff;
  --neo-accent-yellow: #7eaefe;
  --neo-shadow: 6px 6px 0 #050914;
  --neo-shadow-sm: 3px 3px 0 #050914;
}

body.neo-theme {
  font-family: var(--neo-font-body);
  background-color: var(--neo-bg);
  background-image:
    linear-gradient(90deg, rgba(18, 18, 18, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(18, 18, 18, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.neo-card {
  background: var(--neo-surface);
  border: 2px solid var(--neo-border);
  border-radius: var(--neo-radius);
  box-shadow: var(--neo-shadow);
}

.neo-btn {
  border: 2px solid var(--neo-border);
  border-radius: 12px;
  box-shadow: var(--neo-shadow-sm);
  font-weight: 700;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.neo-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #121212;
}

.neo-display {
  font-family: var(--neo-font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Dark Mode Styling */
body.neo-theme[data-theme="dark"],
body.neo-theme.dark-mode {
  background-color: var(--neo-bg);
  background-image:
    radial-gradient(circle, rgba(164, 190, 255, 0.22) 1.1px, transparent 1.1px),
    radial-gradient(circle, rgba(126, 174, 254, 0.12) 1.1px, transparent 1.1px),
    linear-gradient(180deg, #0a1228 0%, #0b1020 100%);
  background-size:
    24px 24px,
    24px 24px,
    100% 100%;
  background-position:
    0 0,
    12px 12px,
    0 0;
  color: var(--neo-ink);
}

/* Dark Mode Toggle Button */
#darkModeToggle {
  position: fixed;
  top: 5.5rem;
  right: 1.5rem;
  background: var(--neo-surface);
  border: 2px solid var(--neo-border);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: var(--neo-shadow-sm);
  transition: all 0.3s ease;
}

#darkModeToggle:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: var(--neo-shadow);
}

#darkModeIcon svg {
  display: block;
  width: 22px;
  height: 22px;
  pointer-events: none;
}