/* =======================================================
*
* 	CSS Variables - Wedding Site Colors (Official Palette)
*
* ======================================================= */

:root {
  /* Primary Colors */
  --color-primary: #8a78b4;         /* Lavender */
  --color-primary-dark: #684996;    /* Purple */
  --color-secondary: #687852;       /* Green */
  --color-secondary-light: #9dae8a; /* Light Green */
  
  /* Text Colors */
  --color-text: #262728;            /* Use dark gray for text */
  --color-text-dark: #262728;
  --color-text-light: #fff;
  --color-text-muted: #888888;
  --color-text-gray: #5d5d5d;
  --color-text-light-gray: #8f989f;
  
  /* Background Colors */
  --color-bg: #fff;
  --color-bg-gray: #888888;         /* Gray */
  --color-bg-dark: #262728;         /* Dark Gray */
  --color-bg-darker: #444;
  
  /* Border Colors */
  --color-border: #d4d4d4;
  --color-border-light: #ccc;
  --color-border-dark: rgba(0, 0, 0, 0.1);
  --color-border-white: rgba(255, 255, 255, 0.5);
  
  /* Overlay Colors */
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-overlay-medium: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.4);
  --color-overlay-lighter: rgba(0, 0, 0, 0.2);
  
  /* Icon Background Colors */
  --color-icon-bg: #efefef;
  --color-icon-bg-dark: #999999;
  
  /* Button Colors */
  --color-btn-primary: var(--color-primary);
  --color-btn-primary-hover: var(--color-primary-dark);
  --color-btn-outline: transparent;
  
  /* Shadow Colors */
  --color-shadow: rgba(0, 0, 0, 0.75);
  --color-shadow-light: rgba(0, 0, 0, 0.6);
  --color-shadow-lighter: rgba(0, 0, 0, 0.3);
  
  /* Form Colors */
  --color-form-bg: rgba(255, 255, 255, 0.2);
  --color-form-bg-focus: rgba(255, 255, 255, 0.3);
  --color-form-placeholder: rgba(255, 255, 255, 0.5);
  
  /* Navigation Colors */
  --color-nav-text: rgba(255, 255, 255, 1);
  --color-nav-text-hover: var(--color-text-light);
  --color-nav-text-active: var(--color-text-light);
  
  /* Countdown Colors */
  --color-countdown-text: rgba(255, 255, 255, 0.7);
  --color-countdown-section-bg: rgba(138, 120, 180, 0.5);
  
  /* Carousel Colors */
  --color-carousel-dot: #e6e6e6;
  --color-carousel-dot-hover: #cccccc;
  --color-carousel-dot-active: var(--color-primary);
  
  /* Gallery Colors */
  --color-gallery-overlay: rgba(99, 199, 189, 0.5);
  
  /* Accent Colors */
  --color-accent1: #8a78b4;
  --color-accent2: #684996;
  --color-accent3: #687852;
  --color-accent4: #9dae8a;
  
  /* Selection Colors */
  --color-selection-bg: var(--color-primary);
  --color-selection-text: var(--color-text-light);
  
  /* Social/Brand Colors */
  --color-social-twitter: #8f989f;
  --color-gallery-overlay: #8a78b4;
  --color-gallery-overlay-text: #ffffff;
  --color-loader-bg: #fff;
  --color-loader-img: url(../images/loader.gif);
  
  /* New variables */
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-black-04: rgba(0, 0, 0, 0.04);
  
  /* Additional color variables */
  --color-white: #fff;
  --color-black: #000;
  --color-gray: #5d5d5d;
  --color-gray-light: #e6e6e6;
  --color-gray-lighter: #cccccc;
  --color-gray-dark: #444;
  --color-transparent: transparent;
}