/* 
 * Theme CSS - The Winkler Family Wedding Website
 * Contains color palette and common styling variables
 */

:root {  /* Color Palette */
  --primary-color: #ffffff;         /* main text color */
  --primary-light: #dce0cf;         /* secondary text */
  --primary-dark: #cccccc;          /* darker primary for hover states */
  --secondary-color: #e08670;       /* accent color */
  --background-color: #5d6e5f;      /* background */
  --overlay-background: rgba(184, 188, 173, 0.75); /* Overlay background with opacity */
  --accent-color: #C99F6B;          /* Golden accent - for highlights */
  --accent-light: #E1CEB5;          /* Light gold - subtle accents */
  --neutral-dark: #333333;          /* Near black - for strong text */
  --neutral-mid: #777777;           /* Mid gray - for secondary information */  
  --neutral-light: #DDDDDD;         /* Light gray - for borders, dividers */
  --white: #FFFFFF;                 /* White - for text on dark backgrounds */
  
  /* Typography */
  --heading-font: 'Georgia', serif;
  --body-font: 'Georgia', serif;
  --accent-font: sans-serif;
  --quintessential-font: 'Quintessential', serif;
  
  /* Font Sizes */
  --font-xs: 0.8rem;
  --font-sm: 0.9rem;
  --font-base: 1rem;
  --font-md: 1.2rem;
  --font-lg: 1.6rem;
  --font-xl: 2rem;
  --font-2xl: 2.8rem;
  
  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 40px;
  --spacing-2xl: 60px;
  
  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  
  /* Box Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Utility Classes */

/* Text colors */
.text-primary { color: var(--primary-color); }
.text-primary-light { color: var(--primary-light); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }
.text-white { color: var(--white); }
.text-neutral { color: var(--neutral-dark); }

/* Background colors */
.bg-primary { background-color: var(--primary-color); }
.bg-primary-light { background-color: var(--primary-light); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }
.bg-accent-light { background-color: var(--accent-light); }
.bg-light { background-color: var(--background-color); }

/* Text alignment */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* Font weights */
.font-normal { font-weight: normal; }
.font-bold { font-weight: bold; }

/* Margin and padding utility classes */
.m-0 { margin: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.p-0 { padding: 0; }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

/* Flex utilities */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Full-height utility class for long pages */
.full-height-mobile {
  min-height: 100vh;
}