/* Tailwind CSS CDN */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@3.4.0/dist/tailwind.min.css');

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700;800&family=Rubik:wght@300;400;500;600;700&display=swap');

/* CSS Variables - Exact from Next.js */
:root {
  /* Primary Color Palette - Based on #0B70B0 */
  --primary: 200 91% 37%;
  --primary-50: 200 91% 97%;
  --primary-100: 200 88% 93%;
  --primary-200: 200 86% 84%;
  --primary-300: 200 83% 72%;
  --primary-400: 200 80% 55%;
  --primary-500: 200 91% 37%;
  --primary-600: 200 93% 31%;
  --primary-700: 200 95% 26%;
  --primary-800: 200 93% 21%;
  --primary-900: 200 91% 18%;
  --primary-950: 200 95% 12%;
  --primary-foreground: 0 0% 100%;

  /* Background Colors */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;

  /* Card Colors */
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  /* Popover Colors */
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  /* Secondary Colors - White #FFFFFF */
  --secondary: 0 0% 100%;
  --secondary-foreground: 222 47% 11%;

  /* Muted Colors */
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;

  /* Accent Colors */
  --accent: 210 40% 96%;
  --accent-foreground: 222 47% 11%;

  /* Destructive/Tertiary Colors - Red #D12128 */
  --destructive: 357 72% 47%;
  --destructive-foreground: 0 0% 100%;
  --tertiary: 357 72% 47%;
  --tertiary-foreground: 0 0% 100%;

  /* Success Colors */
  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;

  /* Warning Colors */
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;

  /* Border & Input Colors */
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 200 91% 37%;

  /* Radius */
  --radius: 0.5rem;

  /* Chart Colors */
  --chart-1: 200 91% 37%;
  --chart-2: 142 76% 36%;
  --chart-3: 357 72% 47%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

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

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Rubik', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "rlig" 1, "calt" 1;
}

/* Headlines and CTAs use EB Garamond */
h1, h2, h3, h4, h5, h6 {
  font-family: 'EB Garamond', ui-serif, Georgia, serif;
}

.font-heading {
  font-family: 'EB Garamond', ui-serif, Georgia, serif;
}

.font-body {
  font-family: 'Rubik', ui-sans-serif, system-ui, sans-serif;
}

/* Utility Classes */
.text-primary {
  color: hsl(var(--primary));
}

.bg-primary {
  background-color: hsl(var(--primary));
}

.border-primary {
  border-color: hsl(var(--primary));
}

.text-tertiary {
  color: hsl(var(--tertiary));
}

.bg-tertiary {
  background-color: hsl(var(--tertiary));
}

.hover\:bg-primary:hover {
  background-color: hsl(var(--primary));
}

.hover\:text-primary:hover {
  color: hsl(var(--primary));
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Container */
.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;
  }
}

/* Prose Styling */
.prose {
  max-width: 65ch;
  color: hsl(var(--foreground));
}

.prose h1 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 1rem;
  color: hsl(var(--primary));
  font-family: 'EB Garamond', ui-serif, Georgia, serif;
}

.prose h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: hsl(var(--primary));
  font-family: 'EB Garamond', ui-serif, Georgia, serif;
}

.prose h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: hsl(var(--primary));
  font-family: 'EB Garamond', ui-serif, Georgia, serif;
}

.prose p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1.75;
}

.prose a {
  color: hsl(var(--primary));
  text-decoration: underline;
}

.prose a:hover {
  color: hsl(var(--tertiary));
}

.prose ul, .prose ol {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.prose li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.prose strong {
  font-weight: 600;
  color: hsl(var(--primary));
}

.prose blockquote {
  border-left: 4px solid hsl(var(--primary));
  padding-left: 1rem;
  font-style: italic;
  color: hsl(var(--muted-foreground));
}

/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
}

/* Focus Styles for Accessibility */
a:focus, button:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
}