@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300..700;1,300..700&family=Inter:wght@300..700&family=JetBrains+Mono:ital,wght@0,300..800;1,300..800&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&display=swap');

:root {
  /* Surfaces - Chalk #FAFAF7 default; Vellum #F5F2EA warm page bg */
  --background: 60 20% 98%;      /* #FAFAF7 Chalk */
  --foreground: 222 41% 7%;       /* #0B0F1A Ink */

  --card: 0 0% 100%;
  --card-foreground: 222 41% 7%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 41% 7%;

  /* Ink scale - Archive neutrals */
  --ink: 222 41% 7%;              /* #0B0F1A Ink - primary text */
  --ink-soft: 215 28% 17%;        /* #1F2937 Midnight - dark surfaces */
  --ink-muted: 218 11% 34%;       /* #4B5563 Graphite - secondary text */
  --ink-faint: 214 16% 65%;       /* #94A3B8 Fog - muted text */

  /* Brand */
  --primary: 222 41% 7%;          /* Ink - primary CTA */
  --primary-foreground: 60 20% 98%; /* Chalk */

  --secondary: 47 36% 94%;        /* #F5F2EA Vellum - soft surface */
  --secondary-foreground: 222 41% 7%;

  --muted: 47 36% 94%;            /* Vellum */
  --muted-foreground: 218 11% 34%;  /* Graphite */

  --accent: 47 36% 94%;
  --accent-foreground: 222 41% 7%;

  /* Statsby Teal - the signature signal - #2DD4BF */
  --teal: 172 66% 50%;
  --teal-foreground: 222 41% 7%;  /* Ink on Teal */
  --teal-soft: 172 60% 92%;
  --teal-ink: 174 77% 24%;        /* dark teal for text on Chalk/Vellum */

  /* The Signal - sparing accents (use one per layout) */
  --cyan: 172 66% 50%;            /* alias to Teal */
  --indigo: 224 64% 33%;          /* #1E3A8A Archive Blue - links/data */
  --fuchsia: 30 92% 44%;          /* #D97706 Saffron - highlights */
  --rose: 351 95% 71%;

  /* Neutrals - Archive */
  --canvas: 47 36% 94%;           /* #F5F2EA Vellum - alt page surface */
  --hairline: 214 32% 86%;        /* #CBD5E1 Mist - dividers */

  --destructive: 0 60% 35%;       /* #8B2323 Oxblood */
  --destructive-foreground: 60 20% 98%;

  --border: 214 25% 88%;
  --input: 214 32% 86%;
  --ring: 172 66% 50%;

  /* Expansion sets - editorial accents (use sparingly, max 2 per layout) */
  /* Expressive editorial */
  --cobalt: 224 75% 40%;          /* #1E40AF feature hero */
  --violet-ink: 274 41% 30%;      /* #4F2F6E long-read */
  --magenta: 326 62% 39%;         /* #A1256B editorial flag */
  --terracotta: 12 63% 44%;       /* #B7472A warm accent */
  --oxblood: 0 60% 35%;           /* #8B2323 archive covers */
  
  /* Warm earth */
  --amber: 32 50% 46%;            /* #B07D3B print accent */
  --ancestor: 28 30% 42%;         /* #8A6A4B print accent */
  --bone: 44 42% 85%;             /* #E8DFC9 paper variant */
  --lacquer: 14 17% 20%;          /* #3B2F2A deep background */

  --radius: 0.75rem;

  /* Typography */
  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base resets & typography matching React apply styles exactly */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: "ss01" on, "cv11" on;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: hsl(var(--ink));
  font-weight: 400;
  letter-spacing: -0.025em;
}

::selection {
  background: hsl(var(--teal) / 0.18);
  color: hsl(var(--ink));
}

/* Core Statsby Layout utilities */
.container-page {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1240px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 768px) {
  .container-page {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* Typography styles copied verbatim from React utility classes */
.font-display {
  font-family: var(--font-display);
}

.font-body {
  font-family: var(--font-body);
}

.font-mono {
  font-family: var(--font-mono);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  tracking: 0.18em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--ink-muted));
}

.display-1 {
  font-family: var(--font-display);
  color: hsl(var(--ink));
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-feature-settings: "ss01" on, "cv11" on, "ss02" on;
}

.hero-title {
  font-family: var(--font-display);
  color: hsl(var(--ink));
  font-weight: 350;
  font-size: clamp(1.9rem, 3.9vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-feature-settings: "ss01" on, "cv11" on;
}

.hero-description {
  display: -webkit-box;
  min-height: 3.9em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.display-2 {
  font-family: var(--font-display);
  color: hsl(var(--ink));
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-feature-settings: "ss01" on, "cv11" on;
}

.display-3 {
  font-family: var(--font-display);
  color: hsl(var(--ink));
  font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -0.028em;
}

.lead {
  color: hsl(var(--ink-soft));
  font-weight: 300;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: -0.005em;
}

/* Dotted constellation backdrops */
.bg-dot-grid {
  background-image: radial-gradient(hsl(var(--ink) / 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
}

.bg-dot-grid-soft {
  background-image: radial-gradient(hsl(var(--ink) / 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
}

.bg-dot-grid-light {
  background-image: radial-gradient(hsl(0 0% 100% / 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Brand gradients matching the precise color vectors */
.bg-brand-gradient {
  background-image: linear-gradient(120deg, #6B1A4A 0%, #A1256B 50%, #D94E9C 100%);
}

.bg-brand-gradient-soft {
  background-image:
    radial-gradient(60% 80% at 0% 0%, hsl(var(--teal) / 0.18), transparent 60%),
    radial-gradient(50% 70% at 100% 0%, hsl(var(--indigo) / 0.14), transparent 60%),
    radial-gradient(60% 80% at 50% 100%, hsl(var(--cyan) / 0.10), transparent 60%);
}

.text-brand-gradient {
  background-image: linear-gradient(120deg, hsl(var(--teal-ink)) 0%, hsl(var(--cyan)) 60%, hsl(var(--indigo)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

.text-magenta-gradient {
  background-image: linear-gradient(120deg, #6B1A4A 0%, #A1256B 50%, #D94E9C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

.text-oxblood-gradient {
  background-image: linear-gradient(120deg, #5C1717 0%, #8B2323 50%, #C0392B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

.ring-brand {
  box-shadow: 0 0 0 1px hsl(var(--teal) / 0.35), 0 24px 60px -30px hsl(var(--indigo) / 0.45);
}

/* Editorial surfaces */
.surface-vellum {
  background-color: hsl(var(--canvas));
}

.surface-bone {
  background-color: hsl(var(--bone));
}

.surface-lacquer {
  background-color: hsl(var(--lacquer));
  color: hsl(var(--background));
}

.surface-ink {
  background-color: hsl(var(--ink));
  color: hsl(var(--background));
}

.surface-cobalt {
  background-color: hsl(var(--cobalt));
  color: hsl(var(--background));
}

.surface-violet {
  background-color: hsl(var(--violet-ink));
  color: hsl(var(--background));
}

.surface-oxblood {
  background-color: hsl(var(--oxblood));
  color: hsl(var(--background));
}

.surface-terracotta {
  background-color: hsl(var(--terracotta));
  color: hsl(var(--background));
}

/* Editorial gradients */
.bg-editorial-warm {
  background-image:
    radial-gradient(60% 80% at 0% 0%, hsl(var(--terracotta) / 0.10), transparent 60%),
    radial-gradient(50% 70% at 100% 0%, hsl(var(--amber) / 0.10), transparent 60%),
    radial-gradient(60% 80% at 50% 100%, hsl(var(--bone) / 0.6), transparent 70%);
}

.bg-editorial-cool {
  background-image:
    radial-gradient(60% 80% at 0% 0%, hsl(var(--cobalt) / 0.12), transparent 60%),
    radial-gradient(50% 70% at 100% 0%, hsl(var(--violet-ink) / 0.10), transparent 60%),
    radial-gradient(60% 80% at 50% 100%, hsl(var(--teal) / 0.08), transparent 60%);
}

/* Rules / dividers */
.rule-saffron {
  border-top: 2px solid hsl(var(--fuchsia));
}

.rule-cobalt {
  border-top: 2px solid hsl(var(--cobalt));
}

.hairline {
  border-top: 1px solid hsl(var(--hairline));
}

.border-hairline {
  border-color: hsl(var(--hairline)) !important;
}

/* Premium CTA Pill Button - exact match for React CtaButton styling */
.btn-cta-premium {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 9999px;
  border: 0;
  background-color: hsl(var(--teal));
  padding-left: 1.25rem;
  padding-right: 0;
  height: 2.25rem; /* h-9 */
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300; /* Matches shadcn font-light exactly */
  letter-spacing: -0.015em;
  color: #FFFFFF !important;
  box-shadow: 0 10px 30px -12px hsl(var(--teal) / 0.55);
  transition: opacity 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.btn-cta-premium:hover {
  opacity: 0.95;
}

.btn-cta-premium .arrow-chip {
  margin-left: 0.75rem;
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

/* Small variant for footer matching SiteFooter className customizations */
.btn-cta-premium.btn-sm {
  height: 2rem; /* h-8 */
  padding-left: 0.875rem; /* pl-3.5 */
  font-size: 12px;
}

.btn-cta-premium.btn-sm .arrow-chip {
  height: 2rem;
  width: 2rem;
  margin-left: 0.5rem;
}

.btn-cta-premium.btn-sm .arrow-chip svg {
  height: 0.75rem;
  width: 0.75rem;
}

/* Premium micro-animations transitions */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-card-premium {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hover-card-premium:hover {
  transform: translateY(-4px);
  border-color: rgba(45, 212, 191, 0.4) !important;
  box-shadow: 0 24px 60px -30px rgba(11, 15, 26, 0.12);
  background-color: hsl(var(--canvas));
}

/* Keyframes animations matching tailwind.config.ts perfectly */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-slide-in-up {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

.animate-scale-in {
  animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pulseSlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.08); }
}

.animate-pulse-slow {
  animation: pulseSlow 8s ease-in-out infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal 0.7s var(--ease-out-expo) forwards;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Premium Form Validation Utility Fallbacks */
.text-destructive {
  color: hsl(var(--destructive)) !important;
}
.border-destructive {
  border-color: hsl(var(--destructive)) !important;
}
.focus\:border-destructive:focus {
  border-color: hsl(var(--destructive)) !important;
}
.focus\:ring-destructive\/30:focus {
  --tw-ring-color: rgba(139, 35, 35, 0.3) !important;
  box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
}

.field-error-msg {
  color: hsl(var(--destructive)) !important; /* Premium Oxblood theme red */
  font-size: 11px !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
  display: block !important;
  animation: fieldErrorFadeIn 0.15s ease-out forwards !important;
}
@keyframes fieldErrorFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}