/* ============================================================
   GILL INDUSTRIES - CSS VARIABLE SYSTEM
   A comprehensive, professional design system for the website
   ============================================================ */

:root {
  /* ========== COLOR PALETTE ========== */
  /* Primary Colors - Gill Holding blueprint */
  --color-primary-dark: #003D7A;      /* Blueprint deep navy per scheme */
  --color-primary-main: #0052A3;      /* Core brand blue */
  --color-primary-light: #1E6BCB;     /* Hover/action blue */
  --color-primary-lighter: #4C8FD6;   /* Highlight blue */
  
  /* Secondary Colors - Steel & neutral backbone */
  --color-secondary-dark: #111827;    /* Text anchor */
  --color-secondary-main: #1F2937;    /* Body copy */
  --color-secondary-light: #6B7280;   /* Steel gray */
  --color-secondary-lighter: #E5E7EB; /* Light divider */
  
  /* Accent Colors */
  --color-accent-orange: #DC2626;     /* Precision red per blueprint */
  --color-accent-green: #1F9D55;      /* Sustainability green */
  --color-accent-red: #DC2626;        /* Alert red */
  --color-accent-yellow: #F2C94C;     /* Highlight gold */
  
  /* Neutral Colors */
  --color-neutral-white: #FFFFFF;
  --color-neutral-off-white: #F9FAFB;   /* surface-alt */
  --color-neutral-light-gray: #F3F4F6;  /* metal-light */
  --color-neutral-medium-gray: #9CA3AF;
  --color-neutral-dark-gray: #111827;   /* text */
  --color-neutral-black: #0B1220;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F9FAFB;
  --color-metal: #F3F4F6;
  --color-text-strong: #111827;
  --color-text-muted: #6B7280;
  
  /* Semantic Colors */
  --color-success: #1F9D55;
  --color-warning: #F59E0B;
  --color-error: #DC2626;
  --color-info: #0052A3;
  
  /* ========== TYPOGRAPHY ========== */
  /* Font Families */
  --font-family-primary: 'Nunito Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-secondary: 'Barlow Semi Condensed', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-mono: 'Space Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  
  /* Font Sizes - Responsive Scale */
  --font-size-xs: 0.75rem;        /* 12px */
  --font-size-sm: 0.875rem;       /* 14px */
  --font-size-base: 1rem;         /* 16px */
  --font-size-lg: 1.125rem;       /* 18px */
  --font-size-xl: 1.25rem;        /* 20px */
  --font-size-2xl: 1.5rem;        /* 24px */
  --font-size-3xl: 1.875rem;      /* 30px */
  --font-size-4xl: 2.25rem;       /* 36px */
  --font-size-5xl: 3rem;          /* 48px */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.5px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.5px;
  --letter-spacing-extra-wide: 1px;
  
  /* ========== SPACING ========== */
  /* Spacing Scale (8px base unit) */
  --spacing-xs: 0.25rem;     /* 4px */
  --spacing-sm: 0.5rem;      /* 8px */
  --spacing-md: 1rem;        /* 16px */
  --spacing-lg: 1.5rem;      /* 24px */
  --spacing-xl: 2rem;        /* 32px */
  --spacing-2xl: 3rem;       /* 48px */
  --spacing-3xl: 4rem;       /* 64px */
  --spacing-4xl: 6rem;       /* 96px */
  --spacing-5xl: 8rem;       /* 128px */
  
  /* Padding Shortcuts */
  --padding-compact: var(--spacing-sm) var(--spacing-md);
  --padding-normal: var(--spacing-md) var(--spacing-lg);
  --padding-comfortable: var(--spacing-lg) var(--spacing-xl);
  --padding-spacious: var(--spacing-xl) var(--spacing-2xl);
  
  /* Margin Shortcuts */
  --margin-compact: var(--spacing-sm) var(--spacing-md);
  --margin-normal: var(--spacing-md) var(--spacing-lg);
  --margin-comfortable: var(--spacing-lg) var(--spacing-xl);
  --margin-spacious: var(--spacing-xl) var(--spacing-2xl);
  
  /* ========== BORDER RADIUS ========== */
  --radius-none: 0;
  --radius-sm: 0.25rem;      /* 4px */
  --radius-md: 0.5rem;       /* 8px */
  --radius-lg: 1rem;         /* 16px */
  --radius-xl: 1.5rem;       /* 24px */
  --radius-2xl: 2rem;        /* 32px */
  --radius-full: 9999px;     /* Fully rounded */
  
  /* ========== SHADOWS ========== */
  /* Elevation Shadows */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Inset Shadows */
  --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* Blue Accent Shadows */
  --shadow-blue-sm: 0 1px 3px 0 rgba(0, 82, 163, 0.1);
  --shadow-blue-md: 0 4px 6px -1px rgba(0, 82, 163, 0.15);
  --shadow-blue-lg: 0 10px 15px -3px rgba(0, 82, 163, 0.2);
  
  /* ========== TRANSITIONS & ANIMATIONS ========== */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  
  --transition-property-all: all;
  --transition-property-color: color, background-color, border-color;
  --transition-property-transform: transform;
  --transition-property-opacity: opacity;
  
  /* ========== Z-INDEX SCALE ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
  --z-notification: 700;
  
  /* ========== BREAKPOINTS ========== */
  /* Mobile First Approach */
  --breakpoint-xs: 320px;    /* Extra Small */
  --breakpoint-sm: 576px;    /* Small */
  --breakpoint-md: 768px;    /* Medium */
  --breakpoint-lg: 992px;    /* Large */
  --breakpoint-xl: 1200px;   /* Extra Large */
  --breakpoint-2xl: 1400px;  /* 2X Large */
  
  /* ========== CONTAINER SIZES ========== */
  --container-xs: 540px;
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1140px;
  --container-xl: 1320px;
  --container-full: 100%;
  
  /* ========== GRID SYSTEM ========== */
  --grid-columns: 12;
  --grid-gap: var(--spacing-lg);
  --grid-gap-compact: var(--spacing-md);
  --grid-gap-spacious: var(--spacing-2xl);
  
  /* ========== OPACITY ========== */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;
  
  /* ========== FOCUS STATES ========== */
  --focus-outline-width: 2px;
  --focus-outline-color: var(--color-primary-main);
  --focus-outline-offset: 2px;
  
  /* ========== FORM ELEMENTS ========== */
  --input-height: 2.5rem;        /* 40px */
  --input-height-sm: 2rem;       /* 32px */
  --input-height-lg: 3rem;       /* 48px */
  --input-border-width: 1px;
  --input-border-color: var(--color-secondary-lighter);
  --input-border-color-focus: var(--color-primary-main);
  --input-border-radius: var(--radius-md);
  --input-padding: var(--spacing-sm) var(--spacing-md);
  
  /* ========== BUTTON STYLES ========== */
  --button-height: 2.5rem;       /* 40px */
  --button-height-sm: 2rem;      /* 32px */
  --button-height-lg: 3rem;      /* 48px */
  --button-padding: var(--spacing-md) var(--spacing-lg);
  --button-padding-sm: var(--spacing-sm) var(--spacing-md);
  --button-padding-lg: var(--spacing-lg) var(--spacing-2xl);
  --button-border-radius: var(--radius-md);
  --button-font-weight: var(--font-weight-semibold);
  
  /* ========== LINK STYLES ========== */
  --link-color: var(--color-primary-main);
  --link-color-hover: var(--color-primary-dark);
  --link-color-visited: var(--color-primary-dark);
  --link-text-decoration: none;
  --link-text-decoration-hover: underline;
  
  /* ========== CODE STYLES ========== */
  --code-background: var(--color-neutral-light-gray);
  --code-color: var(--color-neutral-dark-gray);
  --code-border-color: var(--color-secondary-lighter);
  --code-border-radius: var(--radius-md);
  --code-padding: var(--spacing-sm) var(--spacing-md);
  
  /* ========== TABLE STYLES ========== */
  --table-border-color: var(--color-secondary-lighter);
  --table-header-background: var(--color-primary-dark);
  --table-header-color: var(--color-neutral-white);
  --table-row-hover-background: var(--color-neutral-light-gray);
  --table-cell-padding: var(--spacing-md);
  
  /* ========== CUSTOM PROPERTIES FOR COMPONENTS ========== */
  /* Navigation */
  --nav-height: 4rem;            /* 64px */
  --nav-background: rgba(255, 255, 255, 0.92);
  --nav-color: var(--color-secondary-dark);
  --nav-link-color: var(--color-secondary-dark);
  --nav-link-color-hover: var(--color-primary-main);
  --nav-link-color-active: var(--color-primary-main);
  --nav-shadow: 0 12px 28px rgba(0, 28, 64, 0.08);
  
  /* Footer */
  --footer-background: #0B1220;
  --footer-color: #F4F6FB;
  --footer-link-color: #D6E6FF;
  --footer-link-color-hover: var(--color-neutral-white);
  
  /* Cards */
  --card-background: var(--color-neutral-white);
  --card-border-color: var(--color-secondary-lighter);
  --card-border-radius: var(--radius-lg);
  --card-padding: var(--spacing-lg);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  
  /* Badges */
  --badge-padding: var(--spacing-xs) var(--spacing-sm);
  --badge-border-radius: var(--radius-full);
  --badge-font-size: var(--font-size-xs);
  --badge-font-weight: var(--font-weight-semibold);
  
  /* ========== ANIMATION KEYFRAMES ========== */
  /* These will be defined in the animations.css file */
}

/* ========== DARK MODE SUPPORT ========== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-neutral-white: #1a1a1a;
    --color-neutral-off-white: #2a2a2a;
    --color-neutral-light-gray: #3a3a3a;
    --color-neutral-dark-gray: #e0e0e0;
    --color-neutral-black: #ffffff;
    
    --nav-background: var(--color-secondary-dark);
    --nav-color: var(--color-neutral-white);
    --nav-link-color: var(--color-neutral-white);
    
    --card-background: var(--color-secondary-dark);
    --card-border-color: var(--color-secondary-main);
    
    --code-background: var(--color-secondary-dark);
    --code-color: var(--color-neutral-white);
  }
}

/* ========== RESPONSIVE TYPOGRAPHY ADJUSTMENTS ========== */
@media (max-width: 768px) {
  :root {
    --font-size-4xl: 1.875rem;     /* 30px */
    --font-size-3xl: 1.5rem;       /* 24px */
    --font-size-2xl: 1.25rem;      /* 20px */
    
    --spacing-3xl: 2rem;           /* 32px */
    --spacing-4xl: 3rem;           /* 48px */
    
    --nav-height: 3.5rem;          /* 56px */
    --grid-gap: var(--spacing-md);
  }
}

@media (max-width: 576px) {
  :root {
    --font-size-4xl: 1.5rem;       /* 24px */
    --font-size-3xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.125rem;     /* 18px */
    
    --spacing-2xl: 1.5rem;         /* 24px */
    --spacing-3xl: 1.5rem;         /* 24px */
    --spacing-4xl: 2rem;           /* 32px */
    
    --nav-height: 3rem;            /* 48px */
    --grid-gap: var(--spacing-sm);
  }
}