/* Base colors and variables */
:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --border: rgba(0, 0, 0, 0.1);
  --radius: 0.625rem;
  --tw-border-color: rgba(0, 0, 0, 0.1);
}

.border, .border-b, .border-t, .border-l, .border-r {
  border-color: var(--tw-border-color);
}

h1 {
  color: var(--foreground);
  text-align: center;
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
  border-color: var(--border);
  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
  margin-bottom: calc(var(--spacing) * 8);
  --tw-leading: var(--leading-tight);
  font-size: var(--text-8xl);
  line-height: var(--tw-leading, var(--text-8xl--line-height));
  font-family: Lora, serif;
  font-feature-settings: normal;
  font-size: 84px;
  font-variation-settings: normal;
  font-weight: 400;
  background: linear-gradient(135deg, rgb(30, 64, 175) 0%, rgb(55, 48, 163) 30%, rgb(67, 56, 202) 70%, rgb(139, 92, 246) 100%) text;
  -webkit-text-fill-color: transparent;
}


/* Custom classes for landing page */
.bg-background {
  background-color: var(--background);
}

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

.bg-muted\/30 {
  background-color: rgb(241 245 249 / 0.3);
}

/* Lettercarta logo gradient */
.lettercarta-logo {
  font-family: 'Lora', serif;
  background: linear-gradient(135deg, #1e40af 0%, #3730a3 50%, #4338ca 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Hero title gradient */
.hero-title {
  font-family: 'Lora', serif;
  background: linear-gradient(135deg, #1e40af 0%, #3730a3 30%, #4338ca 70%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 400;
  font-feature-settings: normal;
  font-size: 84px !important;
  font-variation-settings: normal;
}

/* Utility classes that might be missing */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* Gradient utilities */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}

/* Blue gradient stops */
.from-blue-50\/90 {
  --tw-gradient-from: rgb(239 246 255 / 0.9);
  --tw-gradient-to: rgb(239 246 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-indigo-50\/90 {
  --tw-gradient-to: rgb(238 242 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(238 242 255 / 0.9), var(--tw-gradient-to);
}

.to-slate-50\/90 {
  --tw-gradient-to: rgb(248 250 252 / 0.9);
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff;
  --tw-gradient-to: rgb(239 246 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-indigo-50 {
  --tw-gradient-to: rgb(238 242 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), #eef2ff, var(--tw-gradient-to);
}

.to-slate-50 {
  --tw-gradient-to: #f8fafc;
}

.from-transparent {
  --tw-gradient-from: transparent;
  --tw-gradient-to: rgb(0 0 0 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-white\/40 {
  --tw-gradient-to: rgb(255 255 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.4), var(--tw-gradient-to);
}

.via-white\/80 {
  --tw-gradient-to: rgb(255 255 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.8), var(--tw-gradient-to);
}

.to-transparent {
  --tw-gradient-to: transparent;
}

.from-blue-400\/20 {
  --tw-gradient-from: rgb(96 165 250 / 0.2);
  --tw-gradient-to: rgb(96 165 250 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-indigo-400\/20 {
  --tw-gradient-to: rgb(129 140 248 / 0.2);
}

.from-purple-400\/20 {
  --tw-gradient-from: rgb(196 181 253 / 0.2);
  --tw-gradient-to: rgb(196 181 253 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-violet-400\/20 {
  --tw-gradient-to: rgb(167 139 250 / 0.2);
}

.from-blue-600 {
  --tw-gradient-from: #2563eb;
  --tw-gradient-to: rgb(37 99 235 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-indigo-600 {
  --tw-gradient-to: #4f46e5;
}

.from-blue-700 {
  --tw-gradient-from: #1d4ed8;
  --tw-gradient-to: rgb(29 78 216 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-indigo-700 {
  --tw-gradient-to: #4338ca;
}

/* Backdrop filter support */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.backdrop-blur {
  backdrop-filter: blur(8px);
}

/* Shadow utilities */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Transition utilities */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

/* Blur utilities */
.blur-xl {
  filter: blur(24px);
}

/* Tailwind handles all utility classes - keeping only landing-specific custom styles */