@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Custom CSS variables and theme integration */
@layer base {
  :root {
    /* Primary Colors - Indigo with OKLCH */
    --color-primary: oklch(58.5% .233 277.117);
    --color-primary-50: oklch(96.2% .018 272.314);
    --color-primary-100: oklch(93% .034 272.788);
    --color-primary-200: oklch(87% .065 274.039);
    --color-primary-300: oklch(78.5% .115 274.713);
    --color-primary-400: oklch(67.3% .182 276.935);
    --color-primary-500: oklch(58.5% .233 277.117);
    --color-primary-600: oklch(51.1% .262 276.966);
    --color-primary-700: oklch(45.7% .24 277.023);
    --color-primary-800: oklch(39.8% .195 277.366);
    --color-primary-900: oklch(35.9% .144 278.697);
    --color-primary-950: oklch(25.7% .09 281.288);

    /* Secondary Colors - Pink with OKLCH */
    --color-secondary: oklch(65.6% .241 354.308);
    --color-secondary-50: oklch(97.1% .014 343.198);
    --color-secondary-100: oklch(94.8% .028 342.258);
    --color-secondary-200: oklch(89.9% .061 343.231);
    --color-secondary-300: oklch(82.3% .12 346.018);
    --color-secondary-400: oklch(71.8% .202 349.761);
    --color-secondary-500: oklch(65.6% .241 354.308);
    --color-secondary-600: oklch(59.2% .249 .584);
    --color-secondary-700: oklch(52.5% .223 3.958);
    --color-secondary-800: oklch(45.9% .187 3.815);
    --color-secondary-900: oklch(40.8% .153 2.432);
    --color-secondary-950: oklch(28.4% .109 3.907);

    /* Neutral Colors */
    --color-neutral: oklch(55.6% 0 0);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);
  }

  /* Font family configuration */
  html {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
      "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  }

  /* Prevent layout shifts during image loading */
  img {
    height: auto;
    max-width: 100%;
    display: block;
  }

  /* Optimize image loading performance */
  img[loading="lazy"] {
    content-visibility: auto;
    contain: layout style paint;
  }
}

@layer components {
  /* Hero container and image optimizations */
  .hero-container {
    width: 100%;
    max-width: 576px;
    aspect-ratio: 1 / 1;
    contain: layout style;
    overflow: hidden;
  }

  .hero-image {
    width: 100%;
    height: auto;
    max-width: 576px;
    aspect-ratio: 1 / 1;
    contain: layout style paint;
    object-fit: cover;
    flex-shrink: 0;
  }

  /* Aspect ratio containers */
  .aspect-square {
    aspect-ratio: 1 / 1;
  }

  .aspect-video {
    aspect-ratio: 16 / 9;
  }
}

@layer utilities {
  /* Custom prose utility */
  .prose-2xl {
    max-width: 80ch !important;
    font-size: 110%;
  }

  /* Dark mode placeholder text fixes */
  .dark input::placeholder,
  .dark textarea::placeholder {
    color: var(--color-gray-300);
    opacity: 1;
  }

  #cta-email .dark input::placeholder,
  #cta-email .dark textarea::placeholder {
    color: var(--color-gray-400);
    opacity: 1;
  }

  /* Light mode placeholder text */
  input::placeholder,
  textarea::placeholder {
    color: var(--color-gray-500);
    opacity: 1;
  }

  /* CTA email placeholder - light mode */
  #cta-email::placeholder {
    color: var(--color-gray-400);
    opacity: 1;
  }
}