/* ============================================================
   ALG* — Unified Design System (theme.css)
   Shared across ALL pages: index, game, defender, leaderboard
   ============================================================
   Brand colors (LOCKED — do not change):
     Red:   #e72120
     White: #ffffff
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  /* ── Brand (immutable) ── */
  --red:          #e72120;
  --red-dim:      #7a1010;
  --red-glow:     rgba(231, 33, 32, 0.4);
  --red-hover:    #c91c1b;

  /* ── Timing ── */
  --t-fast:   150ms;
  --t-normal: 250ms;
  --t-slow:   350ms;

  /* ── Spacing (8px base grid) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;  /* exception: used for tight padding */
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* ── Typography ── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* ── Dark theme (default) ── */
  --bg:           #000000;
  --bg-elevated:  #060606;
  --bg-card:      #0a0a0a;
  --bg-card-2:    #111111;
  --border:       #1a1a1a;
  --border-hover: #333333;
  --text:         #ffffff;
  --text-body:    #e0e0e0;
  --text-secondary: #a6a6a6;
  --text-dim:     #888888;
  /* NOTE: #666 on #000 = 4.0:1, fails WCAG AA. Minimum dim = #888 = 5.3:1. */

  --nav-bg:       rgba(0, 0, 0, 0.87);
  --overlay-bg:   rgba(0, 0, 0, 0.94);
  --noise-opacity: 0.35;

  --green:  #22c55e;
  --gold:   #ffcc00;
  --blue:   #4488ff;
  --discord: #5865F2;
  --rantlabs: #4bf940;
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:           #f5f5f0;
  --bg-elevated:  #eaeae5;
  --bg-card:      #ffffff;
  --bg-card-2:    #f0f0eb;
  --border:       #d4d4d0;
  --border-hover: #b0b0a8;
  --text:         #111111;
  --text-body:    #222222;
  --text-secondary: #555555;
  --text-dim:     #777777;

  --nav-bg:       rgba(245, 245, 240, 0.92);
  --overlay-bg:   rgba(245, 245, 240, 0.96);
  --noise-opacity: 0.12;

  --red-dim:      #f5a5a5;
  --red-glow:     rgba(231, 33, 32, 0.15);

  --green:  #16a34a;
  --gold:   #b8860b;
  --blue:   #2563eb;
}

/* ── Noise overlay (shared) — reduced in light mode via opacity var ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: var(--noise-opacity);
}

/* ── Focus states (accessibility) ── */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Theme toggle button ── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
  padding: 0;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
  touch-action: manipulation;
}
.theme-toggle:hover {
  border-color: var(--red);
  color: var(--red);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
  width: 18px; height: 18px;
}
/* Dark mode: show sun icon (switch to light) */
:root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
/* Light mode: show moon icon (switch to dark) */
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ── Skeleton loading shimmer ── */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-card-2) 25%,
    var(--border) 50%,
    var(--bg-card-2) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Spinner (for loading states) ── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}