/*
 Theme Name:   RenoPickleball Child
 Theme URI:    https://renopickleball.org
 Description:  GeneratePress Child Theme for RenoPickleball.org (Blank Template Architecture)
 Author:       RenoPickleball
 Template:     generatepress
 Version:      1.0.0
*/

:root {
  /* ==========================================================================
     DESIGN TOKENS (From Style_Guide.md)
     ========================================================================== */
  
  /* Brand Colors: Friendly & Active */
  --color-brand-primary: #8CC63F; /* Fresh Green */
  --color-brand-secondary: #00AEEF; /* Sky Blue */
  --color-brand-accent: #FFD100; /* Sunburst Yellow */
  
  /* Neutral Palette */
  --color-text-main: #2D3748; /* Dark Grey, high contrast */
  --color-text-muted: #718096;
  --color-bg-main: #FFFFFF;
  --color-bg-alt: #F7FAFC;
  
  /* Typography */
  --font-family-base: 'Inter', 'Montserrat', sans-serif;
  --font-family-headings: 'Montserrat', sans-serif;
  
  /* Geometry & UX */
  --radius-button: 999px; /* Pill shape for buttons */
  --radius-card: 12px;    /* Soft corners for cards */
  --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Transitions */
  --transition-speed: 0.3s;
}

/* ==========================================================================
   GLOBAL STYLES
   ========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  color: var(--color-text-main);
  background-color: var(--color-bg-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headings);
  font-weight: 700;
  color: var(--color-text-main);
  margin-top: 0;
}

a {
  color: var(--color-brand-secondary);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

a:hover {
  color: var(--color-brand-primary);
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-primary);
  color: #fff;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-button);
  transition: all var(--transition-speed) ease;
  min-height: 48px; /* Mobile-first touch target */
}

.btn-primary:hover {
  background-color: #7ab32f; /* Darker green */
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  color: #fff;
}

/* Base Utility Classes */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.text-center { text-align: center; }

/* Micro-animations (Fade In Up) */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}