/* ============================================================
   themes.css — Dark / Light design tokens (CSS custom properties)
   Dark is the default. Light is applied via [data-theme="light"].
   ============================================================ */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces & background */
  --bg: #0A0A0A;
  --bg-2: #0D0D0D;
  --surface: #141515;
  --surface-2: #101111;
  --surface-3: #1C1D1D;

  /* Borders */
  --border: rgba(50, 205, 50, 0.16);
  --border-strong: rgba(70, 217, 70, 0.35);
  --border-soft: rgba(163, 163, 163, 0.10);

  /* Text */
  --text: #F5F5F5;
  --text-soft: #D4D4D4;
  --text-muted: #A3A3A3;
  --text-faint: #8A8A8A; /* WCAG AA: ~5.7:1 op --bg (#0A0A0A) */

  /* Accent */
  --accent: #32CD32;
  --accent-2: #46D946;
  --accent-3: #7BE07B;
  --accent-ink: #0A0A0A;

  /* Glow & effects */
  --glow: rgba(70, 217, 70, 0.50);
  --glow-soft: rgba(50, 205, 50, 0.28);
  --halo: rgba(50, 205, 50, 0.22);

  /* Glass */
  --glass-bg: rgba(20, 21, 21, 0.58);
  --glass-bg-2: rgba(18, 19, 19, 0.65);
  --glass-border: rgba(50, 205, 50, 0.20);

  /* Navbar */
  --nav-bg: rgba(10, 10, 10, 0.55);
  --nav-bg-scrolled: rgba(12, 12, 12, 0.72);
  --nav-border: rgba(50, 205, 50, 0.16);

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 14px 50px -12px rgba(50, 205, 50, 0.35);

  /* Gradient mesh blobs */
  --mesh-1: rgba(50, 205, 50, 0.22);
  --mesh-2: rgba(70, 217, 70, 0.14);
  --mesh-3: rgba(123, 224, 123, 0.10);
  --mesh-4: rgba(34, 154, 34, 0.16);

  /* Misc */
  --success: #22C55E;
  --error: #EF4444;
  --grain-opacity: 0.05;
  --hero-overlay: radial-gradient(120% 120% at 50% 0%, rgba(10,10,10,0) 38%, var(--bg) 78%);
  --card-img-bg: #111212;
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #F7F8F7;
  --bg-2: #EEF1EE;
  --surface: #FFFFFF;
  --surface-2: #F3F5F3;
  --surface-3: #E8EDE8;

  --border: rgba(30, 123, 30, 0.18);
  --border-strong: rgba(30, 123, 30, 0.32);
  --border-soft: rgba(10, 10, 10, 0.08);

  --text: #0A0A0A;
  --text-soft: #1F1F1F;
  --text-muted: #525252;
  --text-faint: #5E5E5E; /* WCAG AA: ~6.1:1 op --bg (#F7F8F7) */

  --accent: #32CD32;
  --accent-2: #2DB82D;
  --accent-3: #1E7B1E;
  --accent-ink: #0A0A0A;

  --glow: rgba(50, 205, 50, 0.28);
  --glow-soft: rgba(50, 205, 50, 0.16);
  --halo: rgba(50, 205, 50, 0.16);

  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-2: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(30, 123, 30, 0.16);

  --nav-bg: rgba(247, 248, 247, 0.6);
  --nav-bg-scrolled: rgba(247, 248, 247, 0.82);
  --nav-border: rgba(30, 123, 30, 0.12);

  --shadow-sm: 0 2px 10px rgba(10, 10, 10, 0.06);
  --shadow: 0 22px 50px -24px rgba(10, 40, 10, 0.22);
  --shadow-glow: 0 16px 44px -14px rgba(50, 205, 50, 0.28);

  --mesh-1: rgba(50, 205, 50, 0.14);
  --mesh-2: rgba(70, 217, 70, 0.10);
  --mesh-3: rgba(123, 224, 123, 0.10);
  --mesh-4: rgba(168, 235, 168, 0.18);

  --success: #16A34A;
  --error: #DC2626;
  --grain-opacity: 0.035;
  --hero-overlay: radial-gradient(120% 120% at 50% 0%, rgba(247,248,247,0) 40%, var(--bg) 80%);
  --card-img-bg: #EDF2ED;
}