@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  --color-primary-50: #f5f5f7;
  --color-primary-100: #e8e8ed;
  --color-primary-500: #0066cc;
  --color-primary-600: #0055b3;
  --color-primary-700: #004080;
  --color-primary-900: #1d1d1f;
  
  --color-dark-900: #000000;
  --color-dark-800: #1d1d1f;
  
  --animate-blob: blob 7s infinite;
  --animate-water: water-flow 15s ease infinite;
  @keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }
  @keyframes water-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
}

/* Custom Base / Global Styles */
html {
  -webkit-text-size-adjust: 100%;
}

:root {
  --bg-black-900: #f5f5f7;
  --bg-black-100: #ffffff;
  --text-black-900: #1d1d1f;
  --skin-color: #0066cc;
}

.dark {
  --bg-black-900: #000000;
  --bg-black-100: #1d1d1f;
  --text-black-900: #f5f5f7;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-black-900);
  color: var(--text-black-900);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* =============================================
   GLOBAL DARK MODE OVERRIDES
   Covers all components without touching them
   ============================================= */

/* Root and main containers */
.dark #root,
.dark main,
.dark section,
.dark article,
.dark aside,
.dark header,
.dark footer {
  background-color: inherit;
  color: inherit;
}

/* Force dark background on white/light backgrounds */
.dark .bg-white {
  background-color: #1d1d1f !important;
}

.dark .bg-gray-50,
.dark .bg-gray-100,
.dark .bg-slate-50,
.dark .bg-slate-100 {
  background-color: #111111 !important;
}

/* Fix hardcoded light color classes */
.dark .bg-\[\#f5f5f7\] {
  background-color: #000000 !important;
}

.dark .bg-\[\#ffffff\] {
  background-color: #1d1d1f !important;
}

.dark .bg-\[\#fafafa\] {
  background-color: #111111 !important;
}

.dark .bg-\[\#e8e8ed\] {
  background-color: #2c2c2e !important;
}

.dark .bg-\[\#f2f2f7\] {
  background-color: #1c1c1e !important;
}

/* Fix hardcoded dark text */
.dark .text-\[\#1d1d1f\] {
  color: #f5f5f7 !important;
}

.dark .text-\[\#3a3a3c\] {
  color: #ebebf0 !important;
}

.dark .text-\[\#6e6e73\] {
  color: #98989d !important;
}

.dark .text-\[\#86868b\] {
  color: #8e8e93 !important;
}

.dark .text-gray-900 {
  color: #f5f5f7 !important;
}

.dark .text-gray-800 {
  color: #e5e5ea !important;
}

.dark .text-gray-700 {
  color: #d1d1d6 !important;
}

.dark .text-gray-600 {
  color: #aeaeb2 !important;
}

.dark .text-gray-500 {
  color: #8e8e93 !important;
}

.dark .text-black {
  color: #f5f5f7 !important;
}

/* Fix borders */
.dark .border-gray-100,
.dark .border-gray-200 {
  border-color: #2c2c2e !important;
}

.dark .border-\[\#d2d2d7\] {
  border-color: #3a3a3c !important;
}

.dark .border-\[\#e8e8ed\] {
  border-color: #2c2c2e !important;
}

/* Fix shadows to be darker */
.dark .shadow-sm,
.dark .shadow,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl {
  --tw-shadow-color: rgba(0, 0, 0, 0.5);
}

/* Cards */
.dark .glass-card {
  background: rgba(29, 29, 31, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .glass-water {
  background: linear-gradient(-45deg, rgba(29,29,31,0.9), rgba(0,0,0,0.8), rgba(29,29,31,0.9)) !important;
  background-size: 400% 400%;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Rounded cards / panels that use white bg */
.dark .rounded-2xl.bg-white,
.dark .rounded-xl.bg-white,
.dark .rounded-3xl.bg-white {
  background-color: #1d1d1f !important;
}

/* Inputs and textareas */
.dark input,
.dark textarea,
.dark select {
  background-color: #2c2c2e !important;
  color: #f5f5f7 !important;
  border-color: #3a3a3c !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #636366 !important;
}

/* Outline button dark fix */
.dark .btn-outline {
  border-color: #f5f5f7;
  color: #f5f5f7;
}

/* Dividers */
.dark hr {
  border-color: #2c2c2e;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f5f5f7;
}

.dark ::-webkit-scrollbar-track {
  background: #111111;
}

::-webkit-scrollbar-thumb {
  background: #d2d2d7;
  border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #333333;
}

::-webkit-scrollbar-thumb:hover {
  background: #86868b;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* Glass cards */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-water {
  background: linear-gradient(-45deg, rgba(255,255,255,0.8), rgba(245,245,247,0.7), rgba(255,255,255,0.8));
  background-size: 400% 400%;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Buttons */
.hero-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  box-sizing: border-box;
}

button, a {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  outline: none;
}

.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  line-height: 1.17648;
  box-sizing: border-box;
  min-height: 44px;
}

.btn-primary {
  background-color: #0071e3;
  color: #fff;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid #1d1d1f;
  color: #1d1d1f;
}