:root 
{
	/* Brand Colors */
    --primary-color: #0047AB;               /* Main brand Cobalt Blue */
    --secondary-color: #9baff5;             /* Lighter purple/blue for hover states and accents */
    --accent-color: #ff8800;                /* Orange accent for attention-grabbing elements */
	--blue-background: #ecf0f1;
	--background-silver: #c0c0c0; 
	--warning-background: #f8d7da;

	/* Boarder Colours */
	--warning-boarder: #dc3545;
	--blue-boarder: #3498db;
    
    /* Background Colors */
    --dark-bg: #333333;                     /* Dark background (used in header and footer) */
    --light-bg: #f5f5f5;                    /* Light gray background for alternating sections */
    --hero-bg: #c8c8fa;                     /* Background color for hero sections */
    
    /* Text Colors */
    --text-dark: #333333;                   /* Dark gray for main text (not pure black for reduced eye strain) */
    --text-light: #f5f5f5;                  /* Off-white for text on dark backgrounds */
    --text-silver: #c0c0c0;                 /* Silver text color for subtle elements */
	--text-bread: #999;
	--text-warning: #721c24;
    
    /* 
      TYPOGRAPHY
      Font sizes, weights, and line heights to maintain consistency
    */
    --font-family-primary: Tahoma, 'Segoe UI', 'Arial Rounded MT Bold', Verdana, sans-serif;
    
    /* 
      SPACING & LAYOUT
      Consistent spacing tokens help maintain visual rhythm across the site
    */
    --container-max-width: 1500px;          /* Maximum width for main content containers */
    --footer-container-max-width: 1500px;   /* Maximum width for footer content containers */
    --section-padding: 5rem 0;              /* Vertical padding for major sections */
    --content-padding: 0 1rem;              /* Horizontal padding for containers */
    
    /* 
      UI ELEMENTS
      Standardized values for interactive elements
    */
    --border-radius: 4px;                   /* Consistent corner rounding */
    --transition: all 0.3s ease;            /* Smooth transition effect for animations */
    
    /*
      COMPONENT-SPECIFIC VARIABLES
      These variables are used for specific components
    */
    --header-height: 140px;            		/* Height of the sticky header */
    --header-bg: var(--dark-bg);            /* Header background is dark */
    --footer-bg: var(--dark-bg);            /* Footer background is dark */
}