/* ═══════════════════════════════════════════════════════════════════════════
 * AUTO-GENERATED THEME
 * Algorithm: Material 3 (HCT)
 * Brand Color: #064E3B
 * ═══════════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Outfit:wght@400;500;600&display=swap");

:root {
  /* Colors (OKLCH) */
  --color-primary: oklch(0.378 0.073 169);
  --color-primary-foreground: oklch(1 0 263.3);
  --color-secondary: oklch(0.91 0.02 169.5);
  --color-secondary-foreground: oklch(0.223 0.011 163.9);
  --color-accent: oklch(0.478 0.06 219.4);
  --color-accent-foreground: oklch(1 0 263.3);
  --color-cta: oklch(0.564 0.059 220.4);
  --color-cta-hover: oklch(0.478 0.06 219.4);
  --color-background: oklch(0.99 0.001 201.2);
  --color-foreground: oklch(0.223 0.005 174.2);
  --color-muted: oklch(0.911 0.019 168.1);
  --color-muted-foreground: oklch(0.393 0.023 170.4);
  --color-surface: oklch(0.99 0.001 201.2);
  --color-border: oklch(0.567 0.023 168.9);
  --color-ring: oklch(0.378 0.073 169);
  --color-success: oklch(0.512 0.13 148.1);
  --color-error: oklch(0.532 0.214 22.7);

  /* Typography */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Outfit", system-ui, sans-serif;

  /* Animation Timing */
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.5s;
  --ease-all: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
  --shadow-md:
    0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.05);
  --shadow-lg:
    0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.05);
}

.dark {
  --color-primary: oklch(0.765 0.155 166.8);
  --color-primary-foreground: oklch(1 0 263.3);
  --color-secondary: oklch(0.392 0.024 171.6);
  --color-secondary-foreground: oklch(0.91 0.02 169.5);
  --color-accent: oklch(0.822 0.057 220.8);
  --color-accent-foreground: oklch(0.306 0.049 219);
  --color-cta: oklch(0.737 0.058 219.7);
  --color-cta-hover: oklch(0.65 0.058 220);
  --color-background: oklch(0.223 0.005 174.2);
  --color-foreground: oklch(0.912 0.009 172.3);
  --color-muted: oklch(0.393 0.023 170.4);
  --color-muted-foreground: oklch(0.825 0.023 168.8);
  --color-surface: oklch(0.223 0.005 174.2);
  --color-border: oklch(0.567 0.023 168.9);
  --color-ring: oklch(0.765 0.155 166.8);
}

/* ══════════════════════════════════════════════════════════════
 * BASE & ANIMATION UTILITIES
 * ══════════════════════════════════════════════════════════════ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--color-background);
  color: var(--color-foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  line-height: 1.1;
  font-weight: 700;
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp var(--duration-slow) var(--ease-out) forwards;
}

.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.2s;
}
.delay-3 {
  animation-delay: 0.3s;
}
.delay-4 {
  animation-delay: 0.4s;
}

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

.fade-in {
  opacity: 0;
  animation: fadeIn var(--duration-slow) var(--ease-out) forwards;
}

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

::selection {
  background: var(--color-primary);
  color: white;
}

.noise-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.swiss-grid {
  background-image:
    linear-gradient(to right, oklch(0 0 0 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0 0 0 / 0.05) 1px, transparent 1px);
  background-size: 4rem 4rem;
}

/* Container padding for mobile breathing room */
.container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

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