/* ============================================================
   FILE: css/dark-theme.css
   JOB: Dark colors for Home, Game, and Admin.
        These win when the page has the dark-mode class.
   ============================================================ */

:root.dark-mode {
  color-scheme: light;
  color-scheme: only light;

  --deep: #0d2218;
  --forest: #1a3a25;
  --moss: #2d5a3d;
  --sage: #5a8c6a;
  --mist: #a8c5b0;
  --dawn: #e8f4ec;
  --gold: #c9a84c;
  --gold-light: #e8c97a;
  --warm: #f5efe6;

  --body-gradient: var(--deep);
  --ground-fade: none;
  --fade-span: 100%;
  --bg-gradient-1: rgba(45, 90, 61, 0.3);
  --bg-gradient-2: rgba(26, 58, 37, 0.4);
  --bg-gradient-3: rgba(90, 140, 106, 0.15);
  --bg-gradient-4: transparent;

  --nav-bg: linear-gradient(to bottom, rgba(10, 26, 18, 0.9), transparent);
  --nav-logo: #c9a84c;
  --nav-link: #a8c5b0;
  --nav-hover: #e8c97a;

  --card-bg: rgba(26, 58, 37, 0.45);
  --card-border: rgba(90, 140, 106, 0.2);
  --card-hover-bg: rgba(26, 58, 37, 0.6);
  --card-shadow: rgba(0, 0, 0, 0.4);
  --card-glow: rgba(45, 90, 61, 0.2);

  --lads-bg: rgba(26, 58, 37, 0.2);
  --lads-border: rgba(90, 140, 106, 0.15);
  --device-bg: rgba(10, 26, 18, 0.8);
  --device-border: rgba(201, 168, 76, 0.3);

  --footer-border: rgba(90, 140, 106, 0.1);
  --mobile-menu-bg: rgba(10, 26, 18, 0.97);

  --toggle-bg: rgba(90, 140, 106, 0.2);
  --toggle-border: rgba(201, 168, 76, 0.45);
  --toggle-hover-bg: rgba(201, 168, 76, 0.25);
}

:root.dark-mode body::before {
  background:
    radial-gradient(ellipse at 18% 45%, var(--bg-gradient-1) 0%, transparent 60%),
    radial-gradient(ellipse at 82% 18%, var(--bg-gradient-2) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 88%, var(--bg-gradient-3) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 75%, var(--bg-gradient-4) 0%, transparent 50%);
}

:root.dark-mode body::after {
  content: none;
}