/* 
  CSS Variables for easy theme customization.
  Update these values to change the site's color palette, fonts, etc.
*/
:root {
  /* Colors */
  --color-primary: #111827; /* Dark Gray / Near Black */
  --color-secondary: #374151; /* Medium Gray */
  --color-accent: #73AF6F; /* Custom Green */
  --color-accent-hover: #629b5e; /* Darker Custom Green */
  --color-background: #ffffff;
  --color-surface: #f9fafb; /* Light Gray for cards/sections */
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;

  /* Product Accent Colors */
  --color-nit-accent: #73AF6F; /* Custom Green */
  --color-dirt-accent: #53629E; /* Custom Blue */
  --color-insights-accent: #FFCF71; /* Custom Gold */

  /* Fonts */
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Lato', sans-serif;

  /* Spacing */
  --spacing-unit: 0.25rem; /* 4px */
}

body {
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  scroll-behavior: smooth;
}

/* Active navigation link style */
.nav-link.active {
  color: var(--color-accent);
  font-weight: 600;
}

/* Styles for animated sections */
.animated-section {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: opacity, transform;
}

.animated-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Custom prose styles for blog posts to use CSS variables */
.prose h2 {
    color: var(--color-text-primary);
}
.prose p, .prose li, .prose blockquote {
    color: var(--color-text-secondary);
}
.prose blockquote {
    border-left-color: var(--color-accent);
}

/* Button styles */
.demo-button {
    background-color: var(--color-accent);
    color: white;
}
.demo-button:hover {
    background-color: var(--color-accent-hover);
}