/* Shadcn-style design tokens — modernized for SaaS/marketplace aesthetic.
 * Frank: DO NOT redefine these in inline <style>. Compose components
 * from /components/ which already use these vars. */

:root {
  /* Light theme — warm-neutral so cards stand out from body */
  --background: 30 20% 97%;            /* warm off-white #FAF7F2 */
  --foreground: 240 10% 4%;
  --card: 0 0% 100%;                   /* pure white cards on warm bg */
  --card-foreground: 240 10% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 4%;
  --primary: 240 6% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 5% 96%;
  --secondary-foreground: 240 6% 10%;
  --muted: 240 5% 96%;
  --muted-foreground: 240 4% 46%;
  --accent: 240 5% 96%;
  --accent-foreground: 240 6% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 30 8% 88%;                 /* warm tone matching bg, more visible */
  --input: 30 8% 88%;
  --ring: 240 6% 10%;
  --radius: 0.625rem;

  /* Surface gradients — applied via .surface-* classes */
  --surface-1: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
  --surface-mesh: radial-gradient(at 30% 20%, hsl(var(--primary) / 0.06) 0px, transparent 50%),
                  radial-gradient(at 70% 80%, hsl(var(--accent) / 0.08) 0px, transparent 50%);

  /* Shadows — modern SaaS depth (less subtle so cards actually stand out) */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 2px 4px -1px rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.10), 0 2px 6px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 16px 40px -10px rgb(0 0 0 / 0.16), 0 6px 12px -4px rgb(0 0 0 / 0.08);
  --shadow-xl: 0 28px 56px -14px rgb(0 0 0 / 0.22);

  /* Motion */
  --ease-snap: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration: 250ms;
  --duration-slow: 400ms;

  /* Typography — Geist Sans (Vercel's font, the actual v0 aesthetic).
   * NO serif. NO condensed/narrow variants. Apply -0.025em on display
   * sizes via the h1/h2 rules — not at the font-family level. */
  --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
}

.dark {
  --background: 240 10% 4%;
  --foreground: 0 0% 98%;
  --card: 240 10% 6%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 4%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 6% 10%;
  --secondary: 240 4% 16%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 4% 16%;
  --muted-foreground: 240 5% 65%;
  --accent: 240 4% 16%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 4% 16%;
  --input: 240 4% 16%;
  --ring: 240 5% 84%;
}

/* ──────────── BASE ──────────── */

*, *::before, *::after { box-sizing: border-box; }

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 16px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

/* ──────────── CONTAINER ──────────── */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 80rem;
}

@media (min-width: 768px) {
  .container { padding-inline: 2rem; }
}

/* ──────────── TYPOGRAPHY ────────────
 * Inter Tight at heavy weight (700-800) with negative letter-spacing
 * for display sizes. This is the modern SaaS look (Linear, Vercel, Notion). */

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
}

p, .p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: hsl(var(--foreground));
}

.lead {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  font-weight: 400;
}

.small {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  letter-spacing: 0;
}

.muted { color: hsl(var(--muted-foreground)); }

/* Gradient text — for hero headline accents */
.text-gradient {
  background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-brand-gradient {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ──────────── ANIMATIONS ──────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 4px hsl(142 71% 45% / 0.18); }
  50%      { box-shadow: 0 0 0 8px hsl(142 71% 45% / 0.0); }
}

/* Reveal-on-scroll — JS adds .visible class via IntersectionObserver.
 * Use keyframe animation (not transition) so the entrance always plays
 * its full sequence even when the observer fires immediately on
 * above-fold elements. */
.reveal {
  opacity: 0;
}
.reveal.visible {
  animation: fadeInUp 700ms var(--ease-out) forwards;
}

.reveal-delay-1.visible { animation-delay: 100ms; }
.reveal-delay-2.visible { animation-delay: 220ms; }
.reveal-delay-3.visible { animation-delay: 340ms; }
.reveal-delay-4.visible { animation-delay: 460ms; }
.reveal-delay-5.visible { animation-delay: 580ms; }

/* Auto-applied entrance for above-fold hero text */
.animate-in { animation: fadeInUp 700ms var(--ease-out) backwards; }
.animate-in-delay-1 { animation-delay: 120ms; }
.animate-in-delay-2 { animation-delay: 240ms; }
.animate-in-delay-3 { animation-delay: 360ms; }
.animate-in-delay-4 { animation-delay: 480ms; }