@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-inter: 'Inter', sans-serif;
  --font-space: 'Space Grotesk', sans-serif;

  /* Light Mode (hero / site-wide) */
  --background: #F0EEE9;
  --foreground: #121212;
  --primary: #316263;
  --primary-foreground: #FFFFFF;
  --secondary: #E0DED9;
  --secondary-foreground: #121212;
  --muted: #D6D4D0;
  --muted-foreground: #666666;
  --accent: #B6FF3B;
  --accent-foreground: #121212;
  --border: #D6D4D0;

  /* Hero gradient (CTA / headlines) - use site-wide */
  --gradient-start: #6366f1;
  --gradient-mid: #a855f7;
  --gradient-end: #34d399;
  --gradient-glow: rgba(88, 80, 236, 0.45);
  --gradient-glow-hover: rgba(56, 189, 248, 0.5);
  --accent-emerald: #10b981;
  --accent-emerald-muted: rgba(34, 197, 94, 0.35);
}

.dark {
  /* Dark Mode (Charcoal/Electric Cyan) */
  --background: #121212;
  --foreground: #F0EEE9;
  --primary: #00FFFF;
  --primary-foreground: #121212;
  --secondary: #1E1E1E;
  --secondary-foreground: #F0EEE9;
  --muted: #2A2A2A;
  --muted-foreground: #A0A0A0;
  --accent: #316263;
  --accent-foreground: #FFFFFF;
  --border: #2A2A2A;
}

html,
body {
  padding: 0;
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Glassmorphism Utilities */
.glass-panel {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glass-panel {
  background: rgba(18, 18, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Landing hero: animated gradient glow (10–20s loop, subtle) */
@keyframes hero-glow-shift {
  0%, 100% {
    opacity: 0.35;
    transform: scale(1) translate(0, 0);
  }
  33% {
    opacity: 0.5;
    transform: scale(1.08) translate(3%, -2%);
  }
  66% {
    opacity: 0.4;
    transform: scale(1.04) translate(-2%, 2%);
  }
}

.animate-hero-glow {
  animation: hero-glow-shift 15s ease-in-out infinite;
}

/* Soft gradient base for hero/feature pages: blue → lavender → green (ethereal) */
.page-soft-bg {
  background: linear-gradient(
    135deg,
    #f0f9ff 0%,
    #e0f2fe 15%,
    #f5f3ff 40%,
    #faf5ff 55%,
    #f0fdf4 75%,
    #ecfdf5 100%
  );
  background-attachment: fixed;
}

/* Subtle floating animation for gradient blobs */
@keyframes blob-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(2%, -3%) scale(1.02);
  }
  66% {
    transform: translate(-2%, 2%) scale(0.98);
  }
}

.animate-blob-float {
  animation: blob-float 18s ease-in-out infinite;
}

/* Mesh Gradient */
.mesh-gradient {
  background-color: #F0EEE9;
  background-image:
    radial-gradient(at 0% 0%, rgba(49, 98, 99, 0.15) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(182, 255, 59, 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(49, 98, 99, 0.1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(255, 255, 255, 0.5) 0px, transparent 50%);
}

.dark .mesh-gradient {
  background-color: #121212;
  background-image:
    radial-gradient(at 0% 0%, rgba(0, 255, 255, 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(49, 98, 99, 0.2) 0px, transparent 50%);
}

/* Utility for text balance */
.text-balance {
  text-wrap: balance;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}

/* ============================================
   GLOBAL THEME (hero section = source of truth)
   Use these classes site-wide for consistency.
   ============================================ */

@layer components {
  /* Primary CTA - gradient, glow, rounded-full */
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-full px-7 py-3 text-sm font-semibold text-white outline-none ring-2 ring-transparent ring-offset-2 ring-offset-background transition-all focus-visible:ring-emerald-400/80;
    background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
    box-shadow: 0 18px 60px var(--gradient-glow);
  }
  .btn-primary:hover {
    box-shadow: 0 22px 70px var(--gradient-glow-hover);
    transform: translateY(-2px);
  }
  .btn-primary:active {
    transform: translateY(0);
  }

  /* Secondary - soft border, backdrop blur */
  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-full border border-border px-7 py-3 text-sm font-semibold text-foreground backdrop-blur-md outline-none ring-2 ring-transparent ring-offset-2 ring-offset-background transition-colors focus-visible:ring-emerald-400/80;
    background-color: color-mix(in srgb, var(--background) 60%, transparent);
  }

  .btn-secondary:hover {
    background-color: color-mix(in srgb, var(--secondary) 40%, transparent);
  }

  /* Small primary (e.g. navbar Get Started) */
  .btn-primary-sm {
    @apply inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-semibold text-white outline-none ring-2 ring-transparent ring-offset-2 ring-offset-background transition-all focus-visible:ring-emerald-400/80 active:scale-[0.98];
    background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
    box-shadow: 0 18px 60px var(--gradient-glow);
  }
  .btn-primary-sm:hover {
    box-shadow: 0 22px 70px var(--gradient-glow-hover);
    transform: translateY(-1px);
  }

  /* Pill / badge (hero "AI-native · Live predictions" style) */
  .badge-pill {
    @apply inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[11px] font-medium text-muted-foreground backdrop-blur-md;
    border-color: color-mix(in srgb, var(--border) 60%, transparent);
    background-color: color-mix(in srgb, var(--background) 60%, transparent);
    box-shadow: 0 0 25px var(--accent-emerald-muted);
  }
  .badge-pill-dot {
    @apply h-1.5 w-1.5 rounded-full bg-emerald-400;
  }

  /* Hero headline - gradient second line */
  .heading-hero {
    @apply text-balance text-4xl font-semibold tracking-tight text-foreground sm:text-5xl lg:text-6xl;
  }
  .heading-hero-accent {
    @apply block text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-sky-400 to-emerald-400;
  }

  /* Section headings site-wide */
  .heading-section {
    @apply text-3xl font-semibold tracking-tight text-foreground sm:text-4xl;
  }
  .heading-section-sub {
    @apply mt-4 text-base text-muted-foreground sm:text-lg;
  }

  /* Body lead (hero subtext) */
  .body-lead {
    @apply text-pretty text-base text-muted-foreground sm:text-lg;
  }

  /* Feature bullets (Instant Plaid, Bank-grade, 14-day) */
  .feature-bullets {
    @apply flex flex-wrap items-center gap-6 text-xs text-muted-foreground;
  }
  .feature-bullet {
    @apply flex items-center gap-2;
  }
  .feature-bullet-dot {
    @apply h-1.5 w-1.5 rounded-full bg-emerald-400;
  }

  /* Card shell (hero-style glass) */
  .card-glass {
    @apply rounded-3xl border border-border/60 bg-gradient-to-b from-background/90 via-background to-background/60 shadow-glass;
  }

  /* Nav link - consistent with hero area */
  .nav-link {
    @apply text-sm font-medium text-muted-foreground transition-colors hover:text-foreground;
  }
}