/**
 * Global CSS Variables for Theme System
 * This file should be loaded first in HTML before any other CSS files
 */

:root {
  /* Font families */
  --font-family-primary: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-h1: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-h2: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-h3: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Brand colors */
  --color-primary: #3498db;
  --color-secondary: #2c3e50;
  --color-accent: #c19a6b;
  
  /* Neutral palette */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-near-black: #111111;
  --color-transparent: transparent;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #ddd;
  --color-gray-400: #ccc;
  --color-gray-500: #aaa;
  --color-gray-600: #868686;
  --color-gray-700: #666;
  --color-gray-800: #333;
  --color-gray-900: #222;
  
  /* Background colors */
  --bg-primary: #ffffff;
  --bg-light: #fdfdf7;
  --bg-dark: #f6f6ec;
  --bg-hero: #f3eee8;
  --bg-navbar: rgba(44, 62, 80, 0.95);
  --bg-navbar-scrolled: rgba(44, 62, 80, 0.98);
  --bg-footer: #262626;
  --bg-footer-bottom: #323232;
  --bg-submenu: #ffffff;
  --bg-submenu-hover: #f5f5f5;
  
  /* Text colors */
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-light: #ffffff;
  --text-muted: #999999;
  --text-hero-title: #707070;
  --text-hero-subtitle: #794914;
  --text-hero-description: #2b2b2b;
  --text-heading-h1: #8c5b1c;
  --text-heading-h2: #980000;
  --text-heading-h3: #2c3e50;
  --text-footer: #cfd0b8;
  --text-footer-heading: #fbfbfb;
  --text-footer-bottom: #aaa;
  --text-company-name: #c5a47e;
  --text-gold: #DD9933;
  
  /* Link colors */
  --link-primary: #3498db;
  --link-hover: #217dbb;
  --link-navbar: #ffffff;
  --link-navbar-hover: #fbc49d;
  --link-navbar-active: #ffa341;
  --link-submenu: #444;
  --link-submenu-hover: #222;
  --link-footer: #cfd0b8;
  --link-footer-hover: #ffffff;
  
  /* Button colors */
  --btn-green: #87bf17;
  --btn-green-hover: #679212;
  --btn-orange: #ee7836;
  --btn-orange-hover: #cf5511;
  --btn-blue: #4a97c2;
  --btn-blue-hover: #327397;
  --btn-turquoise: #00b3b3;
  --btn-turquoise-hover: #006f6f;
  --btn-bronze: #c5a47e;
  --btn-bronze-hover: #a18660;  
  
  /* Border colors */
  --border-light: #ddd;
  --border-medium: #ccc;
  --border-submenu: #e8e8e8;
  --border-footer-menu: #323232;
  --border-table: #ddd;
  --border-blockquote: #3498db;
  
  /* State colors */
  --color-success: #28a745;
  --color-error: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  --color-special: #1a365d;
  --bg-error: #f8d7da;
  --text-error: #721c24;
  --border-error: #f5c6cb;
  
  /* Shadow colors */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-dark: rgba(0, 0, 0, 0.2);
  --shadow-navbar: rgba(0, 0, 0, 0.1);
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* Overlay colors */
  --overlay-dark: rgba(0, 0, 0, 0.6);
  --overlay-light: rgba(255, 255, 255, 0.9);
  --overlay-navbar-mobile: rgba(0, 0, 0, 0.2);
  --overlay-play-button: rgba(255, 255, 255, 0.9);
  --overlay-blockquote: rgba(52, 152, 219, 0.05);
  --overlay-menu-hover: rgba(255, 255, 255, 0.1);
  
  /* Icon colors */
  --icon-primary: #c19a6b;
  --icon-bg-light: rgba(193, 154, 107, 0.1);
  --icon-bg-dark: rgba(193, 154, 107, 0.15);
  --icon-hamburger: #ccc;
  
  /* Table colors */
  --table-header-bg: #2c3e50;
  --table-header-text: #ffffff;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #f8f9fa;
  --table-border: #ddd;
  
  /* Form colors */
  --form-bg: #ffffff;
  --form-border: #ddd;
  --form-focus: #3498db;
  --form-placeholder: #999;
  
  /* YouTube Modal colors */
  --youtube-modal-overlay-bg: rgba(0, 0, 0, 0.8);
  --youtube-modal-content-bg: #000000;
  --youtube-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --youtube-modal-close-color: #ffffff;
  --youtube-modal-border-radius: 8px;
  
  /* Spacing variables */
  --container-width: 1140px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;
  
  /* Additional custom spacings */
  --spacing-xs-custom: 3px;
  --spacing-large-custom: 30px;
  
  /* Border radius */
  --border-radius: 6px;
  --border-radius-sm: 3px;
  --border-radius-lg: 8px;
  
  /* Transitions */
  --transition-fast: all 0.2s ease;
  --transition-normal: all 0.3s ease;
  --transition-slow: all 0.5s ease;
  
  /* Animation durations */
  --animation-duration-fast: 0.2s;
  --animation-duration-normal: 0.3s;
  --animation-duration-slow: 0.5s;
  
  /* YouTube Modal animation durations */
  --youtube-modal-animation-in: 0.3s;
  --youtube-modal-animation-out: 0.2s;
  
  /* Opacity values */
  --opacity-disabled: 0.6;
  --opacity-hover: 0.8;
  
  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-hero-title: 36px;
  --font-size-hero-subtitle: 45px;
  --font-size-hero-description: 24px;
  --font-size-cta: 24px;
  --font-size-h1: 30px;
  --font-size-h2: 30px;
  --font-size-h2a: 28px;
  --font-size-btn: 18px;
  --font-size-promo: 19px;
  --font-size-subheading: 20px;
  
  /* Responsive font sizes */
  --font-size-h1-mobile: 2rem;
  --font-size-h2-mobile: 1.75rem;
  --font-size-promo-title: 1.4rem;
  
  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.2;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.6;
  --line-height-extra-loose: 1.7;
  --line-height-tight-cta: 1.3;
  
  /* Letter spacing */
  --letter-spacing-normal: 0.5px;
  
  /* Animation and layout constants */
  --animation-max-height: 500px;
  --mobile-menu-max-height: 800px;
  --min-column-width: 250px;
  --feature-icon-size: 40px;
  --feature-icon-mobile-size: 70px;
  --btn-min-height: 44px;
  --btn-padding-vertical: 12px;
  --btn-padding-horizontal: 25px;
  --btn-border-radius: 4px;
  --hamburger-width: 25px;
  --hamburger-height: 3px;
  --hamburger-margin: 5px;
  --max-width-cta: 850px;
  --max-width-hero: 900px;
  --max-width-form: 800px;
  
  /* YouTube Modal dimensions */
  --youtube-modal-max-width: 70vw;
  --youtube-modal-max-height: 90vh;
  --youtube-modal-aspect-ratio: 16 / 9;
  --youtube-modal-close-size: 40px;
  --youtube-modal-padding: 20px;
  
  /* Z-index layers */
  --z-dropdown: 100;
  --z-sticky: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
  --z-youtube-modal: 2500;

/* Contact form variables */
  
  /* Form layout */
  --form-max-width: 600px;
  --form-padding: 30px;
  --form-border-radius: 8px;
  --form-group-margin: 20px;
  
  /* Form colors */
  --form-bg: #ffffff;
  --form-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --form-border: #e1e5e9;
  --form-border-focus: #4A90E2;
  --form-focus-shadow: rgba(74, 144, 226, 0.1);
  --form-text: #333333;
  --form-placeholder: #999999;
  --form-bg-file: #fafbfc;
  --form-border-file: #e1e5e9;
  
  /* Form inputs */
  --form-input-padding: 12px 15px;
  --form-input-font-size: 16px;
  --form-input-border-width: 2px;
  --form-input-border-radius: 6px;
  --form-textarea-min-height: 120px;
  
  /* Form button */
  --form-btn-bg: var(--btn-bronze);
  --form-btn-bg-hover: var(--btn-bronze-hover);
  --form-btn-text: #ffffff;
  --form-btn-padding: 12px 30px;
  --form-btn-border-radius: 6px;
  --form-btn-font-size: 16px;
  --form-btn-font-weight: 600;
  --form-btn-disabled-bg: #cccccc;
  
  /* Form messages */
  --form-success-bg: #d4edda;
  --form-success-text: #155724;
  --form-success-border: #c3e6cb;
  --form-error-bg: #f8d7da;
  --form-error-text: #721c24;
  --form-error-border: #f5c6cb;
  --form-field-error-text: #e74c3c;
  
  /* Form labels and help text */
  --form-label-font-weight: 400;
  --form-label-margin: 5px;
  --form-help-text: #666666;
  --form-help-font-size: 14px;
  
  /* Form loading state */
  --form-loading-opacity: 0.7;

  /* Form border states */
  --form-border-error: #e74c3c;
  --form-border-hover: #c5c5c5;
  --form-outline-focus: #4A90E2;
  --form-outline-width: 2px;
  --form-outline-offset: 2px;

  /* Form validation colors */
  --form-field-error-bg: rgba(231, 76, 60, 0.05);
  --form-success-border-color: #28a745;
  --form-warning-border-color: #ffc107;

  /* Form states */
  --form-disabled-bg: #f8f9fa;
  --form-disabled-border: #dee2e6;
  --form-disabled-text: #6c757d;

  /* Form file upload states */
  --form-file-border-hover: #4A90E2;
  --form-file-border-dragover: #28a745;

  /* Form select styling */
  --form-select-arrow-color: #666666;
  --form-select-arrow-hover: #333333;
}