@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&display=swap');

:root {
  /* Brand Colors */
  --chook-dark: #004d40; /* Deep nature dark green */
  --chook-mid: #00897b;  /* Vibrant mid green */
  --chook-light: #26a69a; /* Playful bright green */
  --chook-neon: #1de9b6; /* Ultra bright clean accent */
  
  /* Neutral / Utilities */
  --white: #ffffff;
  --bg-color: #f7fcfb; /* VERY light green tint for pure cleanliness */
  --text-dark: #002d26; /* Deepest green-black for contrast text */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(38, 166, 154, 0.2);
  --shadow-sm: 0 4px 6px -1px rgba(0, 77, 64, 0.1);
  --shadow-lg: 0 10px 25px -5px rgba(0, 77, 64, 0.2);
  --shadow-neon: 0 0 20px rgba(29, 233, 182, 0.5);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Outfit', sans-serif;
}

body {
  background-color: var(--bg-color);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Utility Classes */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Typography */
h1, h2, h3, h4, h5 {
  color: var(--chook-dark);
  font-weight: 800;
  line-height: 1.2;
}

.text-white { color: var(--white); }
.text-accent { color: var(--chook-neon); }
.font-black { font-weight: 900; }
.italic { font-style: italic; }

/* Dynamic Animations & Glassmorphism */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.btn-primary {
  background: linear-gradient(135deg, var(--chook-mid), var(--chook-dark));
  color: var(--white);
  border: none;
  padding: 1rem 2rem;
  border-radius: 100px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: var(--transition-bounce);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-neon);
  background: linear-gradient(135deg, var(--chook-light), var(--chook-mid));
}

.btn-primary:active {
  transform: translateY(1px);
}

/* Image Error / Fallback Utilities */
.img-fallback {
  background-color: var(--bg-color);
  border-radius: 1rem;
  object-fit: contain;
}

/* Base App Layout */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* Loading Spinner */
.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--glass-border);
  border-top-color: var(--chook-mid);
  border-radius: 50%;
  animation: spin 1s infinite linear;
  margin: 2rem auto;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Section Spacing */
.section-py { padding: 5rem 0; }