/* ========================================
   1. CSS VARIABLES (CUSTOM PROPERTIES)
   ======================================== */

:root {
  /* Brand Colors */
  --main-red: #c00000;
  --main-blue: #0b1a36;
  --white: #ffffff;
  --black: #000000;

  /* Text Colors */
  --text-dark: #333333;
  --text-light: #666666;
  --text-hero: #f8f9fa;
  --text-hero-alt: #f0f1f2;
  --text-blue-dark: #0b1a36;

  /* Background Colors */
  --light-gray: #f9f9f9;
  --border-gray: #e0e0e0;
  --light-blue: #e8f2ff;
  --light-purple: #f3e8ff;
  --light-green: #e8f5e8;

  /* Section Background Colors */
  --section-bg-primary: #ffffff;
  --section-bg-secondary: #f8f9fa;
  --section-bg-accent: rgba(11, 26, 54, 0.03);

  /* Status Colors */
  --error-red: #dc3545;
  --success-green: #28a745;
  --success-green-dark: #155724;

  /* Gray Shades */
  --gray-light: #e8e8e8;
  --gray-medium: #c8c8c8;
  --gray-medium-dark: #d0d0d0;
  --gray-dark: #a0a0a0;

  /* Social Media Brand Colors */
  --facebook-blue: #1877f2;
  --instagram-pink: #bc1888;
  --youtube-red: #ff0000;
  --twitter-blue: #1da1f2;
  --linkedin-blue: #0077b5;
  --tiktok-pink: #ff0050;

  /* Blue Gradient Colors */
  --blue-gradient-start: #1a3253;
  --blue-gradient-end: #2a4163;

  /* Shadow and Overlay Colors */
  --black-shadow: rgba(0, 0, 0, 0.25);
  --black-shadow-light: rgba(0, 0, 0, 0.15);
  --black-shadow-lighter: rgba(0, 0, 0, 0.1);
  --black-shadow-lightest: rgba(0, 0, 0, 0.12);
  --black-shadow-dark: rgba(0, 0, 0, 0.5);
  --black-shadow-medium: rgba(0, 0, 0, 0.3);
  --black-shadow-strong: rgba(0, 0, 0, 0.2);
  --black-overlay: rgba(0, 0, 0, 0.4);
  --red-shadow: rgba(192, 0, 0, 0.4);
  --white-highlight: rgba(255, 255, 255, 0.1);

  /* Blue Overlay Colors */
  --blue-overlay-dark: rgba(26, 50, 83, 0.8);
  --blue-overlay-medium: rgba(26, 50, 83, 0.7);
  --blue-overlay-light: rgba(26, 50, 83, 0.5);

  /* Layout Variables */
  --header-height: 80px;
  --mobile-header-height: 100px; /* Fallback value */
  --header-lines-height: 8px; /* 4px white + 4px red decorative lines */

  /* Dynamic header heights - will be updated by JavaScript */
  --dynamic-header-height: var(--header-height);
  --actual-header-height: var(--header-height);

  /* Total header height including decorative lines */
  --total-header-height: calc(
    var(--actual-header-height) + var(--header-lines-height)
  );
  --total-mobile-header-height: calc(
    var(--actual-header-height) + var(--header-lines-height)
  );

  /* Spacing Variables - Consistent vertical and horizontal spacing */
  --section-padding-desktop: 40px;
  --section-padding-tablet: 30px;
  --section-padding-mobile: 20px;
  --section-margin-desktop: 35px;
  --section-margin-tablet: 25px;
  --section-margin-mobile: 15px;
  --section-spacing-desktop: 35px;
  --section-spacing-tablet: 25px;
  --section-spacing-mobile: 15px;
  --component-spacing-desktop: 30px;
  --component-spacing-tablet: 20px;
  --component-spacing-mobile: 15px;

  /* Section separation between major content blocks */
  --section-separation-desktop: 50px;
  --section-separation-tablet: 40px;
  --section-separation-mobile: 30px;

  /* Dynamic header height calculation */
  --dynamic-header-height: var(--total-header-height);
  --actual-header-height: var(--total-header-height);

  /* Viewport units with fallback */
  --vh: 1vh;
}