/* static/css/themes.css */
/* static/css/themes.css */
/*
 * Tailwind-less theme utilities.
 * UPD: Only Color/Theme definitions. Visual styling moved to base.css/components.css.
 */

:root {
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --red-500: #ef4444;

  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-600: #d97706;
  --amber-700: #b45309;

  --emerald-100: #d1fae5;
  --emerald-400: #34d399;
  --emerald-600: #059669;

  --cyan-100: #cffafe;
  --cyan-700: #0e7490;
}

/* ─── Base colors ────────────────────────────────────────── */

.bg-white { background-color: #fff; }
.text-white { color: #fff; }

.bg-bio-bg { background-color: var(--color-bg); }
.bg-bio-text { background-color: var(--color-text); }

/* Needed for JS-toggled filter states / some CTAs */
.bg-bio-neon { background-color: var(--color-primary); }
.border-bio-neon { border-color: rgba(13, 148, 136, 1); }

.text-bio-text { color: var(--color-text); }
.text-bio-muted { color: var(--color-muted); }
.text-bio-neon { color: var(--color-primary); }
.text-bio-purple { color: var(--color-secondary); }
.text-bio-cyan { color: var(--color-cyan); }
.text-bio-green { color: var(--color-success); }

/* Opacity variants */
.bg-white\/98 { background-color: rgba(255, 255, 255, 0.98); }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.10); }

.bg-bio-neon\/5 { background-color: rgba(13, 148, 136, 0.05); }
.bg-bio-neon\/10 { background-color: rgba(13, 148, 136, 0.10); }
.bg-bio-neon\/20 { background-color: rgba(13, 148, 136, 0.20); }
.bg-bio-neon\/50 { background-color: rgba(13, 148, 136, 0.50); }

.bg-bio-purple\/10 { background-color: rgba(139, 92, 246, 0.10); }
.bg-bio-purple\/20 { background-color: rgba(139, 92, 246, 0.20); }

.bg-bio-green\/10 { background-color: rgba(16, 185, 129, 0.10); }

.bg-bio-cyan\/10 { background-color: rgba(6, 182, 212, 0.10); }

.text-gray-300 { color: var(--gray-300); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }

.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }

.border-gray-50 { border-color: rgba(243, 244, 246, 1); }
.border-gray-100 { border-color: rgba(243, 244, 246, 1); }
.border-gray-200 { border-color: rgba(229, 231, 235, 1); }

.bg-amber-50 { background-color: var(--amber-50); }
.bg-amber-100 { background-color: var(--amber-100); }
.border-amber-200 { border-color: var(--amber-200); }
.text-amber-400 { color: #fbbf24; }
.fill-amber-400 { fill: #fbbf24; }
.text-amber-600 { color: var(--amber-600); }
.text-amber-700 { color: var(--amber-700); }

.bg-emerald-100 { background-color: var(--emerald-100); }
.text-emerald-600 { color: var(--emerald-600); }

.bg-cyan-100 { background-color: var(--cyan-100); }
.text-cyan-700 { color: var(--cyan-700); }

.text-red-500 { color: var(--red-500); }

/* ─── Borders / shadows ──────────────────────────────────── */

.border { border-width: 1px; border-style: solid; border-color: var(--color-border); }
.border-t { border-top-width: 1px; border-top-style: solid; border-top-color: var(--color-border); }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--color-border); }
.border-y {
  border-top-width: 1px; border-top-style: solid; border-top-color: var(--color-border);
  border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--color-border);
}
.border-transparent { border-color: transparent; }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ─── Gradients ───────────────────────────────────────────── */

.bg-gradient-to-br {
  background-image: linear-gradient(135deg, var(--gradient-from, #fff), var(--gradient-to, #000));
}

.from-bio-text { --gradient-from: var(--color-text); }
.to-gray-900 { --gradient-to: var(--gray-900); }

.to-transparent { --gradient-to: transparent; }

.from-bio-neon\/20 { --gradient-from: rgba(13, 148, 136, 0.20); }
.from-bio-purple\/20 { --gradient-from: rgba(139, 92, 246, 0.20); }
.from-emerald-400\/20 { --gradient-from: rgba(52, 211, 153, 0.20); }

/* ─── Hover helpers ───────────────────────────────────────── */

.hover\:underline:hover { text-decoration: underline; }
.hover\:text-bio-neon:hover { color: var(--color-primary); }
.hover\:text-bio-text:hover { color: var(--color-text); }
.hover\:bg-bio-neon\/5:hover { background-color: rgba(13, 148, 136, 0.05); }
.hover\:bg-bio-neon\/10:hover { background-color: rgba(13, 148, 136, 0.10); }
.hover\:border-bio-neon:hover { border-color: rgba(13, 148, 136, 1); }
.hover\:border-bio-neon\/25:hover { border-color: rgba(13, 148, 136, 0.25); }
.hover\:border-bio-neon\/30:hover { border-color: rgba(13, 148, 136, 0.30); }

/* group-hover */
.group:hover .group-hover\:underline { text-decoration: underline; }
.group:hover .group-hover\:text-bio-neon { color: var(--color-primary); }
.group:hover .group-hover\:bg-bio-neon { background-color: var(--color-primary); }
.group:hover .group-hover\:bg-bio-neon\/5 { background-color: rgba(13, 148, 136, 0.05); }
.group:hover .group-hover\:bg-bio-neon\/20 { background-color: rgba(13, 148, 136, 0.20); }
.group:hover .group-hover\:border-bio-neon { border-color: rgba(13, 148, 136, 1); }
.group:hover .group-hover\:border-bio-neon\/25 { border-color: rgba(13, 148, 136, 0.25); }