/**
 * Taskora Group LLC - Centralized Global Theme System
 * 
 * Modifying the CSS variables here updates colors, typography,
 * button gradients, cards, and borders across the entire website.
 */

:root {
    /* ----------------------------------------------------
       Brand Color Palette (Sophisticated Light Corporate)
       ---------------------------------------------------- */
    --color-primary: #0a2540;          /* Deep Corporate Navy */
    --color-primary-dark: #06182a;     /* Midnight Navy */
    --color-primary-light: #163860;    /* Slate Blue Primary Tint */

    --color-secondary: #0066cc;        /* Executive Electric Cobalt */
    --color-secondary-hover: #0052a3;  /* Deepened Cobalt */
    --color-accent: #0284c7;           /* Vibrant Cerulean Accent */
    --color-accent-subtle: #e0f2fe;    /* Ultra-light ice blue background */

    --color-dark: #091e35;             /* High-contrast Navy Heading Color */
    --color-dark-soft: #334155;        /* Slate Gray Primary Body Text */
    --color-muted: #64748b;            /* Subdued Slate Metadata Text */

    --color-white: #ffffff;            /* Pure Crisp White */
    --color-light: #f8fafc;            /* Clean Off-White Background */
    --color-light-alt: #f1f5f9;        /* Soft Cool Gray Card Tint */
    --color-light-border: #f8fafc;

    --color-border: #e2e8f0;           /* Subtle Separation Border */
    --color-border-hover: #cbd5e1;     /* Interactive Hover Border */

    --color-success: #059669;          /* Enterprise Emerald */
    --color-success-subtle: #d1fae5;
    --color-warning: #d97706;          /* Corporate Amber */
    --color-danger: #dc2626;           /* Form Validation Crimson */
    --color-danger-subtle: #fee2e2;

    /* ----------------------------------------------------
       Gradients (Subtle, professional, brand-anchored)
       ---------------------------------------------------- */
    --gradient-primary: linear-gradient(135deg, #0a2540 0%, #0056b3 100%);
    --gradient-primary-hover: linear-gradient(135deg, #06182a 0%, #004494 100%);
    --gradient-secondary: linear-gradient(135deg, #0066cc 0%, #0284c7 100%);
    --gradient-hero: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    --gradient-card: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    --gradient-cta: linear-gradient(135deg, #0a2540 0%, #163860 50%, #0056b3 100%);

    /* ----------------------------------------------------
       Typography: Exclusively Google Font "Outfit"
       ---------------------------------------------------- */
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
    /* Responsive Font Scale via CSS clamp() */
    --text-display: clamp(2.5rem, 5vw + 1rem, 4.25rem);       /* Hero Display H1 */
    --text-h1: clamp(2.15rem, 3.5vw + 0.8rem, 3.25rem);       /* Standard Section H1 */
    --text-h2: clamp(1.75rem, 2.5vw + 0.6rem, 2.5rem);        /* Section Heading H2 */
    --text-h3: clamp(1.35rem, 1.8vw + 0.4rem, 1.75rem);       /* Subsection H3 */
    --text-h4: clamp(1.15rem, 1.2vw + 0.2rem, 1.35rem);       /* Card Title H4 */
    --text-lead: clamp(1.05rem, 0.8vw + 0.85rem, 1.25rem);     /* Hero Lead Body */
    --text-body: clamp(0.95rem, 0.2vw + 0.9rem, 1.05rem);      /* Standard Body Text */
    --text-small: clamp(0.825rem, 0.15vw + 0.8rem, 0.875rem);  /* Metadata / Footnotes */

    /* ----------------------------------------------------
       Spacing Scale (Fluid clamp() values for smooth sizing)
       ---------------------------------------------------- */
    --section-padding-y: clamp(3.5rem, 6vw + 1.5rem, 6.5rem);
    --section-padding-sm: clamp(2.5rem, 4vw + 1rem, 4rem);
    --hero-padding-top: clamp(6.5rem, 8vw + 2rem, 9.5rem);
    --hero-padding-bottom: clamp(3.5rem, 5vw + 1.5rem, 5.5rem);

    /* ----------------------------------------------------
       Elevations & Shadows (Minimal, soft, corporate)
       ---------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.04);
    --shadow-sm: 0 2px 6px rgba(10, 37, 64, 0.06);
    --shadow-md: 0 8px 24px rgba(10, 37, 64, 0.08);
    --shadow-lg: 0 16px 40px rgba(10, 37, 64, 0.12);
    --shadow-hover: 0 14px 32px rgba(0, 102, 204, 0.12);

    /* ----------------------------------------------------
       Corner Radii (Medium, balanced, non-exaggerated)
       ---------------------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 9999px;

    /* ----------------------------------------------------
       Transitions & Timing (Ultra-smooth cubic-bezier curves)
       ---------------------------------------------------- */
    --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* ----------------------------------------------------
       Layout & Container Dimensions
       ---------------------------------------------------- */
    --container-max-width: 1240px;
    --header-height: 80px;
    --header-height-scrolled: 70px;
}