:root {
  /* ============================================
     BASE COLOR PALETTE
     Core colors used throughout the theme
     ============================================ */
  
  /* Primary brand colors */
  --color-primary: #80deea;
  --color-primary-dark: #00506d;
  --color-primary-darker: #02759f;
  --color-primary-transparent: #80deea99;
  
  /* Neutral colors */
  --color-bg-dark: #1a1a2e;
  --color-bg-darker: #121212;
  --color-bg-medium: #2a2a3a;
  --color-text-light: #e0e0e0;
  --color-text-white: #ffffff;
  --color-text-dark: #b0b0b0;
  --color-white-transparent-light: #ffffff0d;
  
  /* Accent colors */
  --color-accent-cyan: #69d2e7;
  --color-accent-cyan-bright: #0ed4ee;
  
  
  /* ============================================
     SHADOWS & EFFECTS
     ============================================ */
  
  --shadow-primary: #80deea60;
  --shadow-primary-strong: #80deea65;
  
  
  /* ============================================
     GRADIENTS
     Reusable gradient definitions
     ============================================ */
  
  --gradient-bg-base: linear-gradient(
    135deg,
    rgba(30, 30, 46, 0.6),
    rgba(18, 18, 18, 0.4)
  );
  
  --gradient-overlay: linear-gradient(
    135deg,
    rgba(30, 30, 46, 0.9),
    rgba(18, 18, 18, 0.8)
  );
  
  --gradient-card: linear-gradient(
    180deg,
    var(--color-primary-dark),
    var(--color-bg-dark)
  );
  
  --gradient-tools: linear-gradient(
    180deg,
    var(--color-bg-dark),
    var(--color-primary-dark)
  );
  
  --gradient-button: linear-gradient(
    45deg,
    var(--color-accent-cyan-bright),
    var(--color-accent-cyan)
  );
  
  --gradient-heading: linear-gradient(
    to right,
    var(--color-accent-cyan),
    var(--color-text-white)
  );
  
  --gradient-underscore: linear-gradient(
    45deg,
    var(--color-primary),
    var(--color-primary-dark)
  );
  
  
  /* ============================================
     NAVIGATION
     ============================================ */
  
  --nav-bg: var(--gradient-overlay);
  --nav-logo-color: var(--color-primary);
  --nav-link-shadow: var(--color-primary-transparent);
  --nav-link-underscore: var(--gradient-underscore);
  
  
  /* ============================================
     HERO SECTION
     ============================================ */
  
  --hero-text-color: var(--color-text-white);
  --hero-accent-color: var(--color-primary);
  --hero-shadow: var(--color-primary);
  
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  --heading-primary-color: var(--color-primary);
  --heading-secondary-gradient: var(--gradient-heading);
  --text-color: var(--color-text-light);
  
  
  /* ============================================
     COMPONENTS - Cards
     ============================================ */
  
  --card-project-bg: var(--gradient-card);
  --card-skill-bg: var(--color-bg-medium);
  --card-skill-bar-fill: var(--color-primary-dark);
  --card-skill-bar-bg: var(--color-bg-dark);
  
  
  /* ============================================
     COMPONENTS - Buttons
     ============================================ */
  
  --btn-bg: var(--color-primary-dark);
  --btn-bg-gradient: var(--gradient-button);
  --btn-text-color: var(--color-text-white);
  --btn-hover-bg: var(--color-bg-dark);
  --btn-hover-color: var(--color-text-white);
  --btn-shadow: var(--shadow-primary);
  --btn-shadow-active: var(--shadow-primary-strong);
  
  
  /* ============================================
     COMPONENTS - Social Icons
     ============================================ */
  
  --social-icon-color: var(--color-primary);
  --social-icon-hover: var(--color-text-white);
  
  
  /* ============================================
     COMPONENTS - Contact Form
     ============================================ */
  
  --contact-bg: var(--gradient-overlay);
  --contact-form-bg: var(--color-primary-dark);
  --contact-border: var(--color-primary);
  
  
  /* ============================================
     COMPONENTS - Tools List
     ============================================ */
  
  --tools-bg: var(--gradient-tools);
  --tools-item-bg: var(--color-white-transparent-light);
  --tools-item-color: var(--color-primary);
  --tools-item-hover: var(--color-text-white);
  
  
  /* ============================================
     PAGE SPECIFIC - Pipeline
     ============================================ */
  
  --pipeline-highlight-bg: var(--color-primary-dark);
  --pipeline-highlight-border: var(--color-primary-darker);
  --pipeline-feature-bg: var(--shadow-primary-strong);
  --pipeline-feature-border: var(--color-primary);
  --pipeline-step-bullet-bg: var(--color-primary);
  --pipeline-tabs-text: var(--color-primary);
  --pipeline-job-border: var(--color-primary);
  --pipeline-job-icon: var(--color-primary-darker);
  --pipeline-selection-bg: var(--color-primary-dark);
  --pipeline-box-shadow: var(--color-primary-darker);
  
  
  /* ============================================
     LEGACY SUPPORT
     Deprecated - will be removed in future versions
     ============================================ */
  
  --accent-hue: 187; /* Use HSL color functions instead */
}