/* =============================================================================
   Global styles (PHP port of src/app/globals.css + scrollbar.css).
   CSS custom properties drive Tailwind's hsl(var(--...)) colors.
   ============================================================================= */

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 210 40% 96%;
  --primary-foreground: 210 40% 98%;
  --secondary: 194 85% 32%;
  --secondary-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 194 85% 32%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 217.2 32.6% 17.5%;
  --primary-foreground: 210 40% 98%;
  --secondary: 194 85% 32%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 194 85% 32%;
}

* {
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

/* -----------------------------------------------------------------------------
   Scroll-reveal: replaces framer-motion whileInView. Elements marked
   [data-reveal] start hidden and animate in when they enter the viewport
   (main.js adds .is-visible via IntersectionObserver). Degrades gracefully:
   if JS is off, a fallback makes everything visible.
   ----------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="blur"] { filter: blur(12px); transform: none; }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

.no-js [data-reveal] { opacity: 1; transform: none; filter: none; }

/* -----------------------------------------------------------------------------
   Custom scrollbar
   ----------------------------------------------------------------------------- */
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 9999px; }

/* -----------------------------------------------------------------------------
   Reusable component helpers (used by pages for consistency with the original
   Button/Card components). Prefer Tailwind utilities; these are shortcuts.
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  height: 2.5rem;
  padding: 0 1rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background-color: #07809b; color: #fff; }
.btn-primary:hover { background-color: #2d7d93; }
.btn-secondary { background-color: #ff914d; color: #fff; }
.btn-secondary:hover { background-color: #ea580c; }
.btn-outline { border: 1px solid hsl(var(--input)); background-color: transparent; }
.btn-outline:hover { background-color: hsl(var(--accent)); }
.btn-lg { height: 2.75rem; padding: 0 2rem; }