/* ============================================================================
   CSS VARIABLES - ROBOTICS & CONTROL LTD DESIGN SYSTEM
   
   Centralized design tokens and CSS variables for consistent theming across
   the entire website. This file serves as the single source of truth for
   colors, typography, spacing, and other design properties.
   
   Organization:
   1. Brand Colors (Primary teal #10b981, Orange #ff6b35)
   2. Background Colors (Sections, gradients, surfaces)  
   3. Typography (Font families, sizes, weights)
   4. Spacing & Layout (Margins, padding, borders)
   5. Animations & Transitions
   6. Component-specific variables
   
   Usage: Reference variables using var(--variable-name) in CSS
   Benefits: Easy theme updates, consistent branding, maintainable code
   ============================================================================ */

:root {
    /* === PRIMARY COLORS === */
    --primary-color: #0891b2; /* Main teal color */
    --primary-dark: #0e7490;  /* Darker teal */
    --primary-light: #67e8f9; /* Lighter teal */
    --hero-cta-color: #ff6b35; /* Orange theme color */
    --nav-link-color: #10b981; /* Teal navigation links */
    --brand-orange: #ff6b35;   /* Burnt orange brand color */
    --brand-teal: #10b981;     /* Brand teal color */
    --brand-teal-dark: #0f766e; /* Dark teal for gradients and hover states */
    
    /* === BACKGROUND COLORS === */
    --background-dark: #000000;     /* Pure black */
    --background-medium: #666666;   /* Medium grey */
    --background-light: #ffffff;    /* Pure white */
    --hero-gradient: linear-gradient(135deg, #0f766e 0%, #10b981 50%, #14b8a6 100%);
    --page-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #ffffff 100%);
    
    /* === SECTION BACKGROUNDS === */
    --section-white: #ffffff;                    /* Pure white sections */
    --section-light-grey: #f8fafc;             /* Very light grey sections */
    --section-light-teal: #f0fdfa;             /* Very light teal sections */
    --section-light-blue: #f0f9ff;             /* Very light blue sections */
    --section-warm-grey: #fafaf9;              /* Warm light grey sections */
    --section-cool-grey: #f1f5f9;              /* Cool light grey sections */
    --section-accent: #ecfdf5;                 /* Light green accent sections */
    --section-orange-light: #fef7f0;           /* Very light orange sections */
    
    /* === TEXT COLORS === */
    --text-primary: #111827;   /* Black text */
    --text-secondary: #374151; /* Darker grey text for better contrast */
    --text-light: #6b7280;     /* Medium grey text */
    
    /* === ACCENT COLORS === */
    --secondary-color: #1f2937; /* Dark grey */
    --accent-color: #f8fafc;    /* Light grey/white */
    --border-color: #e5e7eb;    /* Border grey */
    --surface: #ffffff;         /* Surface white */
    --surface-hover: #f9fafb;   /* Hover surface */
    
    /* === TYPOGRAPHY === */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Professional Fluid Typography Scale */
    --font-size-xs: clamp(0.625rem, 1.5vw, 0.75rem);
    --font-size-sm: clamp(0.75rem, 2vw, 0.875rem);
    --font-size-base: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
    --font-size-lg: clamp(1rem, 2.5vw, 1.125rem);
    --font-size-xl: clamp(1.125rem, 3vw, 1.25rem);
    --font-size-2xl: clamp(1.25rem, 3.5vw, 1.5rem);
    --font-size-3xl: clamp(1.5rem, 4vw, 1.875rem);
    --font-size-4xl: clamp(1.875rem, 5vw, 2.25rem);
    --font-size-5xl: clamp(2.25rem, 6vw, 3rem);
    
    /* Professional Heading Scale with Fluid Sizing */
    --h1-size: clamp(2rem, 1.5vw + 1.5rem, 3.5rem);
    --h2-size: clamp(1.5rem, 1vw + 1.25rem, 2.5rem);
    --h3-size: clamp(1.25rem, 0.75vw + 1rem, 1.5rem);
    --h4-size: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
    --h5-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
    
    /* Button Text Scaling */
    --btn-font-size: clamp(0.875rem, 2vw, 1rem);
    --btn-font-size-lg: clamp(1rem, 2.5vw, 1.125rem);
    
    /* Responsive Padding System - Ensures 44px minimum tap target */
    --btn-padding-y: clamp(0.875rem, 2vw, 1rem);
    --btn-padding-x: clamp(1rem, 3vw, 1.5rem);
    --btn-padding-y-lg: clamp(1.125rem, 2.5vw, 1.25rem);
    --btn-padding-x-lg: clamp(1.5rem, 4vw, 2rem);
    
    /* Typography Weights & Line Heights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    
    /* === SPACING SYSTEM === */
    --spacing-0: 0;
    --spacing-1: 0.25rem;     /* 4px */
    --spacing-2: 0.5rem;      /* 8px */
    --spacing-3: 0.75rem;     /* 12px */
    --spacing-4: 1rem;        /* 16px */
    --spacing-5: 1.25rem;     /* 20px */
    --spacing-6: 1.5rem;      /* 24px */
    --spacing-7: 1.75rem;     /* 28px */
    --spacing-8: 2rem;        /* 32px */
    --spacing-10: 2.5rem;     /* 40px */
    --spacing-12: 3rem;       /* 48px */
    --spacing-16: 4rem;       /* 64px */
    --spacing-20: 5rem;       /* 80px */
    --spacing-24: 6rem;       /* 96px */
    --spacing-32: 8rem;       /* 128px */
    
    /* Container and Layout */
    --container-max-width: 1280px;
    --container-padding: var(--spacing-6);
    --section-padding-y: var(--spacing-16);
    --section-padding-y-sm: var(--spacing-12);
    
    /* === SHADOWS === */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* === BORDER RADIUS === */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* === TRANSITIONS === */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* === HEADER HEIGHT === */
    --header-height: 80px; /* Desktop header height */
}

/* Responsive header heights for mobile devices */
@media (max-width: 1024px) and (min-width: 769px) {
    :root {
        --header-height: 75px; /* Large tablet header height */
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 70px; /* Tablet header height */
    }
}

@media (max-width: 480px) {
    :root {
        --header-height: 60px; /* Mobile header height */
    }
}

/* ==================================================
   QUICK COLOR REFERENCE:
   
   To change main theme color: Edit --primary-color
   To change background gradient: Edit --background-* colors
   To change text colors: Edit --text-* colors
   
   ================================================== */