/* Light/Dark theme variables and glassmorphism adjustments */
:root {
  --bg-primary: #0f0f23; /* default dark background */
  --bg-secondary: #1a1a2e;
  --bg-glass: rgba(255,255,255,0.06);
  --bg-glass-hover: rgba(255,255,255,0.10);
  --text-primary: rgba(255,255,255,0.90);
  --text-secondary: rgba(255,255,255,0.70);
  --text-muted: rgba(255,255,255,0.50);
  --border-glass: rgba(255,255,255,0.10);
  --shadow-glass: rgba(24,24,27,0.25);
}

/* Hint browsers we support both schemes; switch instantly */
html { color-scheme: dark light; }
html.light-mode, body.light-mode { color-scheme: light; }
html:not(.light-mode) { color-scheme: dark; }

html.light-mode {
  --bg-primary: #ffffff; /* light background */
  --bg-secondary: #f8fafc;
  --bg-glass: rgba(0,0,0,0.06);
  --bg-glass-hover: rgba(0,0,0,0.10);
  --text-primary: rgba(0,0,0,0.90);
  --text-secondary: rgba(0,0,0,0.70);
  --text-muted: rgba(0,0,0,0.50);
  --border-glass: rgba(0,0,0,0.10);
  --shadow-glass: rgba(0,0,0,0.15);
}

/* Mirror variables in case the toggle attaches light-mode on body */
body.light-mode {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-glass: rgba(0,0,0,0.06);
  --bg-glass-hover: rgba(0,0,0,0.10);
  --text-primary: rgba(0,0,0,0.90);
  --text-secondary: rgba(0,0,0,0.70);
  --text-muted: rgba(0,0,0,0.50);
  --border-glass: rgba(0,0,0,0.10);
  --shadow-glass: rgba(0,0,0,0.15);
}

/* Base background/text driven by variables */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color .25s ease, color .25s ease;
}

/* Force override of Tailwind dark body classes when in light mode */
html.light-mode body { background: var(--bg-primary) !important; color: var(--text-primary) !important; }
body.light-mode { background: var(--bg-primary) !important; color: var(--text-primary) !important; }

/* Readability overrides for Tailwind utility classes on light background */
html.light-mode .text-white { color: #0f172a !important; }
body.light-mode .text-white { color: #0f172a !important; }
html.light-mode .text-white\/90 { color: var(--text-primary) !important; }
body.light-mode .text-white\/90 { color: var(--text-primary) !important; }
html.light-mode .text-white\/80 { color: rgba(0,0,0,0.80) !important; }
body.light-mode .text-white\/80 { color: rgba(0,0,0,0.80) !important; }
html.light-mode .text-white\/70 { color: var(--text-secondary) !important; }
body.light-mode .text-white\/70 { color: var(--text-secondary) !important; }
html.light-mode .text-white\/60 { color: rgba(0,0,0,0.60) !important; }
body.light-mode .text-white\/60 { color: rgba(0,0,0,0.60) !important; }
html.light-mode .text-white\/50 { color: var(--text-muted) !important; }
body.light-mode .text-white\/50 { color: var(--text-muted) !important; }
html.light-mode .text-white\/40 { color: rgba(0,0,0,0.45) !important; }
body.light-mode .text-white\/40 { color: rgba(0,0,0,0.45) !important; }
html.light-mode .text-white\/30 { color: rgba(0,0,0,0.35) !important; }
body.light-mode .text-white\/30 { color: rgba(0,0,0,0.35) !important; }
html.light-mode .ring-white\/10 { --tw-ring-color: var(--border-glass) !important; }
body.light-mode .ring-white\/10 { --tw-ring-color: var(--border-glass) !important; }
html.light-mode .ring-white\/15 { --tw-ring-color: var(--border-glass) !important; }
body.light-mode .ring-white\/15 { --tw-ring-color: var(--border-glass) !important; }
html.light-mode .bg-white\/5 { background-color: rgba(0,0,0,0.03) !important; }
body.light-mode .bg-white\/5 { background-color: rgba(0,0,0,0.03) !important; }
html.light-mode .bg-white\/10 { background-color: var(--bg-glass) !important; }
body.light-mode .bg-white\/10 { background-color: var(--bg-glass) !important; }
html.light-mode .bg-white\/15 { background-color: var(--bg-glass-hover) !important; }
body.light-mode .bg-white\/15 { background-color: var(--bg-glass-hover) !important; }
html.light-mode .bg-glass-2\/30 { background-color: var(--bg-glass) !important; }
body.light-mode .bg-glass-2\/30 { background-color: var(--bg-glass) !important; }
html.light-mode .bg-zinc-900\/60 { background-color: rgba(255,255,255,0.80) !important; }
body.light-mode .bg-zinc-900\/60 { background-color: rgba(255,255,255,0.80) !important; }
html.light-mode .border-white\/10 { border-color: var(--border-glass) !important; }
body.light-mode .border-white\/10 { border-color: var(--border-glass) !important; }
html.light-mode .border-white\/40 { border-color: var(--border-glass) !important; }
body.light-mode .border-white\/40 { border-color: var(--border-glass) !important; }

.text-accent {
  background-image: linear-gradient(90deg, #1e3a8a 0%, #2563EB 20%, #7C3AED 55%, #EC4899 80%, #FB7185 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ring-gradient { position: relative; }
.ring-gradient:before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(59,130,246,.6), rgba(147,51,234,.5), rgba(236,72,153,.5), rgba(249,115,22,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ---------------------------------------
   Button effects (gradient & glass)
   Apply gentle hover/active/focus for anchors/buttons that look like buttons
---------------------------------------- */
a[class*="rounded-"][class*="px-"],
button[class*="rounded-"][class*="px-"] {
  transition: transform .18s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease;
  will-change: transform, box-shadow;
}

/* Hover lift and active press */
a[class*="rounded-"][class*="px-"]:hover,
button[class*="rounded-"][class*="px-"]:hover { transform: translateY(-1px); }
a[class*="rounded-"][class*="px-"]:active,
button[class*="rounded-"][class*="px-"]:active { transform: translateY(0); }

/* Focus ring for accessibility */
a[class*="rounded-"][class*="px-"]:focus-visible,
button[class*="rounded-"][class*="px-"]:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.35);
}

/* Gradient buttons: subtle glow */
a[class*="bg-gradient-to-"],
button[class*="bg-gradient-to-"] { box-shadow: 0 10px 30px rgba(59,130,246,.25); }
html.light-mode a[class*="bg-gradient-to-"],
html.light-mode button[class*="bg-gradient-to-"] { box-shadow: 0 10px 24px rgba(0,0,0,.08); }
a[class*="bg-gradient-to-"]:hover,
button[class*="bg-gradient-to-"]:hover { filter: brightness(1.05); }

/* Glass buttons: consistent background & ring across modes */
a.bg-white\/10, button.bg-white\/10 { background-color: var(--bg-glass) !important; }
a.bg-white\/15, button.bg-white\/15 { background-color: var(--bg-glass-hover) !important; }
html.light-mode a.bg-white\/10:hover,
html.light-mode button.bg-white\/10:hover { background-color: var(--bg-glass-hover) !important; }

/* Fix Tailwind hover:text-white on light mode (e.g., navbar links) */
html.light-mode .hover\:text-white:hover { color: #0f172a !important; }
body.light-mode .hover\:text-white:hover { color: #0f172a !important; }

/* Keep button text white ONLY for gradient buttons in light mode */
html.light-mode a[class*="bg-gradient-to-"],
html.light-mode button[class*="bg-gradient-to-"] { color: #ffffff !important; }
body.light-mode a[class*="bg-gradient-to-"],
body.light-mode button[class*="bg-gradient-to-"] { color: #ffffff !important; }
html.light-mode a[class*="bg-gradient-to-"]:hover,
html.light-mode button[class*="bg-gradient-to-"]:hover { color: #ffffff !important; }
body.light-mode a[class*="bg-gradient-to-"]:hover,
body.light-mode button[class*="bg-gradient-to-"]:hover { color: #ffffff !important; }

/* Ghost/Glass buttons in light mode: use dark text for readability */
html.light-mode a.bg-white\/10,
html.light-mode button.bg-white\/10,
html.light-mode a.bg-white\/15,
html.light-mode button.bg-white\/15,
html.light-mode a.bg-glass-2\/30,
html.light-mode button.bg-glass-2\/30 { color: var(--text-primary) !important; }
body.light-mode a.bg-white\/10,
body.light-mode button.bg-white\/10,
body.light-mode a.bg-white\/15,
body.light-mode button.bg-white\/15,
body.light-mode a.bg-glass-2\/30,
body.light-mode button.bg-glass-2\/30 { color: var(--text-primary) !important; }