/**
 * CSS Variables - Design System
 * 
 * This file defines all CSS custom properties used throughout the site.
 * To change colors, modify the values in the :root selector below.
 * 
 * Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6
 */

:root {
  /* ============================================
     PRIMARY COLOR SYSTEM
     ============================================
     These five colors form the foundation of the design.
     Change these values to customize the site's color scheme.
  */
  
  /* Background Colors */
  --bg-main: #f4efe6;        /* Main background - warm off-white */
  --bg-surface: #ffffff;     /* Surface/card backgrounds - pure white */
  
  /* Accent Colors */
  --accent-soft: #9caf88;    /* Soft green - borders, dividers, subtle highlights */
  --accent-strong: #c7352e;  /* Strong red - CTAs, active states, emphasis */
  
  /* Text Color */
  --text-main: #000000;      /* Primary text - pure black */
  
  
  /* ============================================
     DERIVED COLORS
     ============================================
     These are calculated from the primary colors above.
  */
  
  /* Text Variations */
  --text-secondary: rgba(0, 0, 0, 0.7);   /* Secondary text */
  --text-tertiary: rgba(0, 0, 0, 0.5);    /* Tertiary/muted text */
  
  /* Shadow Colors */
  --shadow-soft: rgba(0, 0, 0, 0.08);     /* Soft shadows for cards */
  --shadow-medium: rgba(0, 0, 0, 0.12);   /* Medium shadows for hover states */
  
  
  /* ============================================
     SPACING SCALE
     ============================================
     Consistent spacing system for margins, padding, and gaps.
  */
  
  --space-xs: 0.5rem;    /* 8px - Tight spacing */
  --space-sm: 1rem;      /* 16px - Small spacing */
  --space-md: 2rem;      /* 32px - Medium spacing */
  --space-lg: 4rem;      /* 64px - Large spacing */
  --space-xl: 6rem;      /* 96px - Extra large spacing */
  
  
  /* ============================================
     BORDER RADIUS
     ============================================
     Organic, rounded corners for modern aesthetic.
  */
  
  --radius-sm: 8px;      /* Small radius - subtle rounding */
  --radius-md: 16px;     /* Medium radius - buttons, inputs */
  --radius-lg: 24px;     /* Large radius - cards */
  --radius-xl: 32px;     /* Extra large radius - hero elements */
  
  
  /* ============================================
     ANIMATION TIMING
     ============================================
     Duration values for consistent animation speeds.
  */
  
  --duration-fast: 200ms;     /* Fast transitions - hover effects */
  --duration-normal: 400ms;   /* Normal transitions - most animations */
  --duration-slow: 600ms;     /* Slow transitions - page load, major changes */
  
  
  /* ============================================
     EASING FUNCTIONS
     ============================================
     Cubic-bezier curves for natural, smooth motion.
     These create the "calm" feel of the animations.
  */
  
  --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);      /* Smooth ease-in-out */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* Spring-like bounce */
  --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);    /* Gentle ease */
}