/*!
 * VEX MARKETING - UNIFIED DESIGN SYSTEM 2025
 * Single source of truth for colors, typography, and spacing
 * Ensures WCAG AA contrast compliance and consistent design
 * Works perfectly on both desktop and mobile
 */

/* ============================================================================
   WCAG AA COMPLIANT COLOR SYSTEM
   All text colors meet 4.5:1 contrast ratio minimum
   ============================================================================ */

:root {
    /* === PROFESSIONAL BACKGROUND SYSTEM === */
    --bg-primary: #FFFFFF;                    /* Pure white - clean & professional */
    --bg-secondary: #F8FAFC;                  /* Slate 50 - subtle sections */
    --bg-tertiary: #F1F5F9;                   /* Slate 100 - cards & elements */
    --bg-accent: #E2E8F0;                     /* Slate 200 - borders & dividers */
    
    /* === HIGH CONTRAST TEXT SYSTEM === */
    --text-primary: #0F172A;                  /* Slate 900 - 21:1 contrast on white */
    --text-secondary: #1E293B;                /* Slate 800 - 16.8:1 contrast */
    --text-tertiary: #475569;                 /* Slate 600 - 7.3:1 contrast */
    --text-muted: #64748B;                    /* Slate 500 - 5.4:1 contrast */
    --text-inverted: #FFFFFF;                 /* White text on dark backgrounds */
    
    /* === PROFESSIONAL BRAND COLORS === */
    --brand-primary: #1E40AF;                 /* default (overridden in dark theme) */
    --brand-secondary: #2563EB;               /* default (overridden in dark theme) */
    --brand-accent: #3B82F6;                  /* highlights */
    --brand-light: #DBEAFE;                   /* subtle backgrounds */
    
    /* === THEME TOKENS (canonical mapping) === */
    --color-primary: var(--brand-primary);
    --color-secondary: var(--brand-secondary);
    --color-accent: var(--brand-accent);
    --color-neutral: var(--border-medium);
    --color-background: var(--bg-primary);
    --color-surface: var(--bg-secondary);
    --color-text: var(--text-primary);
    --color-text-muted: var(--text-tertiary);
    
    /* === SUCCESS & ACCENT COLORS === */
    --success-primary: #059669;               /* Emerald 600 - success states */
    --success-light: #D1FAE5;                 /* Emerald 100 - success backgrounds */
    --warning-primary: #D97706;               /* Amber 600 - warnings */
    --warning-light: #FEF3C7;                 /* Amber 100 - warning backgrounds */
    
    /* === BORDER & SHADOW SYSTEM === */
    --border-light: #E2E8F0;                  /* Slate 200 - subtle borders */
    --border-medium: #CBD5E1;                 /* Slate 300 - standard borders */
    --border-strong: #94A3B8;                 /* Slate 400 - prominent borders */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --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 TOKENS === */
    --elev-1: var(--shadow-sm);
    --elev-2: var(--shadow-md);
    --elev-3: var(--shadow-lg);
    --elev-4: var(--shadow-xl);
    
    /* ================================================================
       PROFESSIONAL TYPOGRAPHY SYSTEM
       ================================================================ */
    
    /* === SYSTEM FONT STACK === */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 
                    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
    
    /* === FONT WEIGHTS === */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* === FONT SIZES - FLUID RESPONSIVE === */
    --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-size-6xl: 3.75rem;     /* 60px */
    
    /* === FLUID TYPOGRAPHY === */
    --font-fluid-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --font-fluid-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --font-fluid-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
    --font-fluid-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --font-fluid-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
    --font-fluid-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
    --font-fluid-5xl: clamp(3rem, 2.25rem + 3.75vw, 4.5rem);
    --font-fluid-hero: clamp(2.5rem, 2rem + 4vw, 5rem);
    
    /* === LINE HEIGHTS === */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* ================================================================
       SPACING SYSTEM
       ================================================================ */
    
    --space-px: 1px;
    --space-0: 0;
    --space-0-5: 0.125rem;   /* 2px */
    --space-1: 0.25rem;      /* 4px */
    --space-1-5: 0.375rem;   /* 6px */
    --space-2: 0.5rem;       /* 8px */
    --space-2-5: 0.625rem;   /* 10px */
    --space-3: 0.75rem;      /* 12px */
    --space-3-5: 0.875rem;   /* 14px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-7: 1.75rem;      /* 28px */
    --space-8: 2rem;         /* 32px */
    --space-9: 2.25rem;      /* 36px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-14: 3.5rem;      /* 56px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */
    --space-28: 7rem;        /* 112px */
    --space-32: 8rem;        /* 128px */
    --space-36: 9rem;        /* 144px */
    --space-40: 10rem;       /* 160px */
    --space-44: 11rem;       /* 176px */
    --space-48: 12rem;       /* 192px */
    --space-52: 13rem;       /* 208px */
    --space-56: 14rem;       /* 224px */
    --space-60: 15rem;       /* 240px */
    --space-64: 16rem;       /* 256px */
    --space-72: 18rem;       /* 288px */
    --space-80: 20rem;       /* 320px */
    --space-96: 24rem;       /* 384px */
    
    /* ================================================================
       LAYOUT SYSTEM
       ================================================================ */
    
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1400px;
    --container-max: 1400px;
    
    /* === BORDER RADIUS === */
    --radius-none: 0;
    --radius-sm: 0.125rem;       /* 2px */
    --radius-md: 0.375rem;       /* 6px */
    --radius-lg: 0.5rem;         /* 8px */
    --radius-xl: 0.75rem;        /* 12px */
    --radius-2xl: 1rem;          /* 16px */
    --radius-3xl: 1.5rem;        /* 24px */
    --radius-full: 9999px;
    
    /* ================================================================
       ANIMATION & TRANSITIONS
       ================================================================ */
    
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
    
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ================================================================
       FOCUS STATES
       ================================================================ */
    
    --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
    --focus-ring-offset: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--brand-primary);
}

/* ============================================================================
   BASE STYLES WITH HIGH CONTRAST
   ============================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* === DARK THEME (High-Contrast, Conversion-Focused) === */
/* Apply by adding class="theme-dark" on <body> */
body.theme-dark {
    --bg-primary: #111827;          /* Charcoal */
    --bg-secondary: #0F172A;        /* Slightly darker */
    --bg-tertiary: #1F2937;         /* Card surfaces */
    --text-primary: #F9FAFB;        /* Off-white */
    --text-secondary: #E5E7EB;      /* Muted white */
    --text-tertiary: #94A3B8;       /* Slate-400 */
    --border-light: rgba(148, 163, 184, 0.25);
    --border-medium: rgba(148, 163, 184, 0.35);
    --border-strong: rgba(148, 163, 184, 0.55);
    /* CTA + Accents from spec */
    --brand-primary: #F97316;       /* Vibrant Orange for primary CTAs */
    --brand-secondary: #3B82F6;     /* Electric Blue for secondary accents */
    --brand-accent: #3B82F6;
}

/* Interactive hero gradient accent */
.hero-interactive{position:relative;overflow:hidden}
.hero-interactive::before{
    content:'';position:absolute;inset:-20%;pointer-events:none;
    background: radial-gradient(
      600px 600px at var(--mx,50%) var(--my,30%),
      rgba(249,115,22,0.12),
      rgba(59,130,246,0.10) 30%,
      transparent 60%
    );
    filter: blur(20px);
    z-index:0;
}

/* ============================================================================
   TYPOGRAPHY WITH PERFECT CONTRAST
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    text-rendering: optimizeLegibility;
}

h1 { font-size: var(--font-fluid-hero); font-weight: var(--font-weight-extrabold); }
h2 { font-size: var(--font-fluid-3xl); }
h3 { font-size: var(--font-fluid-2xl); }
h4 { font-size: var(--font-fluid-xl); }
h5 { font-size: var(--font-fluid-lg); }
h6 { font-size: var(--font-fluid-base); }

p {
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--duration-200) var(--ease-out);
}

a:hover {
    color: var(--brand-secondary);
    text-decoration: underline;
}

a:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* === Reveal on scroll utility === */
.reveal{opacity:0;transform:translateY(10px);transition:opacity var(--duration-500) var(--ease-out),transform var(--duration-500) var(--ease-out)}
.reveal.in-view{opacity:1;transform:none}

/* === CTA hover pulse === */
.btn-cta{transform:translateZ(0);transition:transform var(--duration-200) var(--ease-out), box-shadow var(--duration-200) var(--ease-out)}
.btn-cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--elev-3)}

/* === Shake for invalid inputs === */
@keyframes ux-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.animate-shake{animation:ux-shake .45s cubic-bezier(.36,.07,.19,.97) both}

/* Hero float (optional) */
@keyframes float-slow{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.anim-float{animation:float-slow 6s ease-in-out infinite}

/* ============================================================================
   LAYOUT CONTAINERS
   ============================================================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 640px) {
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

.section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
    .section {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }
}

@media (min-width: 1024px) {
    .section {
        padding-top: var(--space-24);
        padding-bottom: var(--space-24);
    }
}

/* ============================================================================
   BUTTON SYSTEM WITH HIGH CONTRAST
   ============================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-200) var(--ease-out);
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.btn:focus {
    outline: none;
    box-shadow: var(--focus-ring-offset);
}

.btn-primary {
    background-color: var(--brand-primary);
    color: var(--text-inverted);
    border-color: var(--brand-primary);
}

.btn-primary:hover {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: var(--text-inverted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-primary:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--bg-primary);
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-secondary:hover {
    background-color: var(--brand-primary);
    color: var(--text-inverted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-large {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
}

.btn-full {
    width: 100%;
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

/* Hide elements */
.hidden { display: none !important; }

/* Show on large screens */
@media (min-width: 1024px) {
    .lg\\:flex { display: flex !important; }
    .lg\\:block { display: block !important; }
    .lg\\:inline { display: inline !important; }
    .lg\\:hidden { display: none !important; }
}

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Background utilities */
.bg-gray-50 { background-color: var(--bg-secondary); }

/* Flex utilities */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Grid utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 768px) {
    .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Gap utilities */
.gap-12 { gap: var(--space-12); }

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--brand-primary);
    color: var(--text-inverted);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    z-index: 1000;
    transition: top var(--duration-200) var(--ease-out);
}

.skip-link:focus {
    top: 6px;
}

/* ============================================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    :root {
        --text-primary: #000000;
        --text-secondary: #000000;
        --bg-primary: #FFFFFF;
        --border-medium: #000000;
        --brand-primary: #000000;
        --brand-secondary: #000000;
    }
    
    .btn {
        border-width: 2px;
    }
    
    .btn-primary {
        background-color: #000000;
        color: #FFFFFF;
        border-color: #000000;
    }
    
    .btn-secondary {
        background-color: #FFFFFF;
        color: #000000;
        border-color: #000000;
    }
}

/* Print styles */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .btn {
        border: 2px solid black !important;
        color: black !important;
    }
}