/*
Global Styles (Dark Theme)

Summary:
- Typography and base colors for dark UI
- Utilities for accessibility and shadows
- Brand teal accents and gradient helper

Maintenance:
- Tailwind provides most classes; these utilities complement it.
- If theme colors shift, update values here and in templates.
*/

/* Default (Light) */
body {
  font-family: 'Inter', sans-serif;
  background-color: #f8fafc; /* slate-50 */
  color: #1f2937; /* slate-800 */
}

/* Dark Theme Override */
.dark body {
  background-color: #0f172a; /* slate-900 */
  color: #e5e7eb; /* slate-200 */
}
h1, h2, h3, .brand-font {
  font-family: 'Quicksand', sans-serif;
}
/* Accessibility */
.text-senior {
  font-size: 1.15rem;
  line-height: 1.8rem;
}
/* Shadows */
.btn-shadow {
  box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.25);
}
/* Brand */
.bg-heal-teal { background-color: #0d9488; }
.text-heal-teal { color: #0d9488; }
.hover-heal-teal:hover { background-color: #0f766e; }
/* Dark text helper */
.dark .text-ocean-dark { color: #e5e7eb; }
/* Gradient helper */
.bg-water-gradient {
  background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
}
html { scroll-behavior: smooth; }

:root {
  --color-teal-600: #0d9488;
  --color-teal-500: #14b8a6;
  --color-teal-700: #0f766e;
}
.text-accent { color: var(--color-teal-600); }
.text-accent-dark { color: var(--color-teal-700); }
.hover-text-accent-soft:hover { color: var(--color-teal-500); }
.bg-accent { background-color: var(--color-teal-600); }
.hover-bg-accent-soft:hover { background-color: var(--color-teal-500); }
.border-accent { border-color: var(--color-teal-600); }

.toggle-peer:checked + .toggle-track { background-color: var(--color-teal-600); }