:root {
  /* ========== V3 THEME - NIGHT MODE PALETTE ========== */
  /* Core Night Palette - Minimal framing, negative space focus */
  
  /* Astrared (Night Surface) */
  --astrared-50: #fafaf9;
  --astrared-100: #f4f4f0;
  --astrared-200: #e4e4e0;
  --astrared-300: #d4d4cf;
  --astrared-400: #a7a7a4;
  --astrared-500: #6b6b68;
  --astrared-600: #52524f;
  --astrared-700: #3f3f3d;
  --astrared-800: #292927;
  --astrared-850: #1a1a19;
  --astrared-900: #111111;
  --astrared-925: #0c0c0c;
  --astrared-950: #040404;
  
  /* Astral Red (Accent) */
  --astralred-50: #fef2f2;
  --astralred-100: #fee2e2;
  --astralred-200: #fecaca;
  --astralred-300: #fca5a5;
  --astralred-400: #f87171;
  --astralred-500: #ef4444;
  --astralred-600: #dc2626;
  --astralred-700: #b91c1c;
  --astralred-800: #991b1b;
  
  /* Core System Colors */
  --bg-primary: var(--astrared-950);
  --bg-secondary: var(--astrared-925);
  --bg-elevated: var(--astrared-850);
  --surface: var(--astrared-900);
  --border: var(--astrared-700);
  --text-primary: var(--astrared-50);
  --text-secondary: var(--astrared-400);
  --text-muted: var(--astrared-300);
  --shadow-color: rgba(248, 113, 113, 0.08);
  
  /* Semantic Colors */
  --semantic-success: #22c55e;
  --semantic-error: var(--astralred-500);
  --semantic-warning: #f59e0b;
  --semantic-info: #3b82f6;
}

/* Dark Mode Override (default is night mode) */
@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #fafafa;
    --bg-secondary: #f4f4f5;
    --bg-elevated: #ffffff;
    --surface: #f8f8f8;
    --border: var(--astrared-500);
    --text-primary: var(--astrared-900);
    --text-secondary: var(--astrared-700);
    --text-muted: var(--astrared-600);
    --shadow-color: rgba(0, 0, 0, 0.1);
  }
}

/* Button Styles */
.btn-primary {
  background-color: var(--astralred-500);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-primary:hover {
  background-color: var(--astralred-600);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Focus States */
*:focus-visible {
  outline: 2px solid var(--astralred-500);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Selection Color */
::selection {
  background-color: rgba(248, 113, 113, 0.3);
  color: var(--astrared-50);
}