/* Tema Glassmorphism */

html[data-theme="glass-light"] {
  --bg-color: #f9fafb;
  --text-color: #111827;
  --heading-color: #020617;

  --primary-color: #2563eb;
  --primary-color-soft: rgba(37, 99, 235, 0.1);

  --card-bg: rgba(255, 255, 255, 1);
  --card-border: rgba(148, 163, 184, 0.4);
  --card-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);

  --input-bg: rgba(255, 255, 255, 0.85);
  --input-border: rgba(148, 163, 184, 0.6);
  --input-focus-border: #2563eb;
  --input-focus-ring: rgba(37, 99, 235, 0.2);

  --button-bg: rgba(255, 255, 255, 0.85);
  --button-text: #111827;
  --button-hover-bg: #f9fafb;

  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-blur: 14px;
  --glass-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);

  --blob-blue: #dcff90;
  --blob-fuchsia: #eb7dff;
  --blob-yellow: #ffcb64;

  --nav-bg-blur: rgba(255, 255, 255, 0.7);
  --nav-inactive: #9ca3af;
  --nav-active: #111827;
  --nav-border-color: rgba(148, 163, 184, 0.4);
  --nav-accent-color: #2563eb;
  --footer-bg: rgba(255, 255, 255, 0.9);
  --footer-text: #4b5563;
  --footer-link: #6b7280;
  --footer-link-hover: #2563eb;
  --footer-border-top: #e5e7eb;
}

html[data-theme="glass-dark"] {
  --bg-color: radial-gradient(circle at top, #0b1120 0, #020617 40%, #020617 100%);
  --text-color: #e5e7eb;
  --heading-color: #f9fafb;

  --primary-color: #38bdf8;
  --primary-color-soft: rgba(56, 189, 248, 0.18);

  --card-bg: rgba(15, 23, 42, 0.92);
  --card-border: rgba(148, 163, 184, 0.3);
  --card-shadow: 0 18px 50px rgba(15, 23, 42, 0.8);

  --input-bg: rgba(15, 23, 42, 0.9);
  --input-border: rgba(148, 163, 184, 0.5);
  --input-focus-border: #38bdf8;
  --input-focus-ring: rgba(56, 189, 248, 0.2);

  --button-bg: rgba(15, 23, 42, 0.85);
  --button-text: #e5e7eb;
  --button-hover-bg: rgba(30, 64, 175, 0.9);

  --glass-bg: rgba(15, 23, 42, 0.85);
  --glass-border: rgba(148, 163, 184, 0.5);
  --glass-blur: 18px;
  --glass-shadow: 0 22px 60px rgba(15, 23, 42, 1);

  --blob-blue: #22c55e;
  --blob-fuchsia: #e879f9;
  --blob-yellow: #eab308;

  --nav-bg-blur: rgba(15, 23, 42, 0.85);
  --nav-inactive: #6b7280;
  --nav-active: #f9fafb;
  --nav-border-color: rgba(30, 64, 175, 0.6);
  --nav-accent-color: #38bdf8;
  --footer-bg: #020617;
  --footer-text: #e5e7eb;
  --footer-link: #9ca3af;
  --footer-link-hover: #38bdf8;
  --footer-border-top: #1f2937;
}