/* ============================================================
   Webcroo Design System — CSS Custom Properties
   ============================================================
   A unified, scalable design system with DRY principles.
   All colors, spacing, typography, and effects are centralized
   for easy maintenance and consistency across the site.
   ============================================================ */

:root {
    /* ==================== BREAKPOINTS ==================== */
    --breakpoint-mobile: 480px;
    /* Small mobile */
    --breakpoint-tablet: 768px;
    /* Tablet */
    --breakpoint-desktop: 1024px;
    /* Desktop */
    --breakpoint-wide: 1280px;
    /* Large desktop */

    /* ==================== COLOR PALETTE ==================== */
    /* Primary Accent */
    --color-accent: #ff6b35;
    --color-accent-dark: #e85a26;
    --color-accent-light: #ff8a5b;
    --color-accent-soft: rgba(255, 107, 53, 0.12);

    /* Neutrals - Dark Mode */
    --color-navy-dark: #000034;
    --color-navy-mid: #1a4a7a;
    --color-navy: #0a2540;

    /* Neutrals - Light Mode */
    --color-white: #ffffff;
    --color-cream: #f8fafc;
    --color-gray-light: #e8eef5;
    --color-gray-mid: #64748b;

    /* Text Colors */
    --color-text-dark: #0a2540;
    --color-text-light: #ffffff;
    --color-text-muted: #64748b;
    --color-text-soft: rgba(255, 255, 255, 0.78);

    /* Semantic Colors */
    --color-bg-footer: #0a2540 url('https://webcroo.com/wp-content/uploads/footer-bg.jpg') center / cover no-repeat;

    /* ==================== OPACITY SCALE ==================== */
    --opacity-0: 0;
    --opacity-05: 0.05;
    --opacity-08: 0.08;
    --opacity-10: 0.10;
    --opacity-12: 0.12;
    --opacity-15: 0.15;
    --opacity-18: 0.18;
    --opacity-20: 0.20;
    --opacity-35: 0.35;
    --opacity-40: 0.40;
    --opacity-45: 0.45;
    --opacity-50: 0.50;
    --opacity-60: 0.60;
    --opacity-78: 0.78;
    --opacity-85: 0.85;

    /* ==================== GLASS MORPHISM ==================== */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-hover: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-blur: blur(12px);

    /* ==================== TYPOGRAPHY ==================== */
    /* Font Families */
    --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;

    /* Font Sizes - Fluid Scale */
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.78rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.2rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 3.5rem;
    --font-size-5xl: 4.5rem;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-snug: 1.15;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.7;
    --line-height-loose: 1.75;

    /* Letter Spacing */
    --letter-spacing-tight: -0.035em;
    --letter-spacing-normal: -0.02em;
    --letter-spacing-wide: 0.18em;
    --letter-spacing-wider: 0.22em;

    /* ==================== SPACING SCALE (Modular) ==================== */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.25rem;
    --space-xl: 1.5rem;
    --space-2xl: 1.75rem;
    --space-3xl: 2rem;
    --space-4xl: 2.25rem;
    --space-5xl: 2.5rem;
    --space-6xl: 3rem;
    --space-7xl: 3.5rem;
    --space-8xl: 4rem;
    --space-9xl: 5rem;
    --space-10xl: 7rem;

    /* ==================== BORDER RADIUS ==================== */
    --radius-sm: 8px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* ==================== SHADOWS ==================== */
    /* Accent Shadows (Orange) */
    --shadow-accent-sm: 0 8px 24px rgba(255, 107, 53, 0.3);
    --shadow-accent-md: 0 14px 32px rgba(255, 107, 53, 0.45);
    --shadow-accent-lg: 0 12px 32px rgba(255, 107, 53, 0.5);
    --shadow-accent-xl: 0 8px 24px rgba(255, 107, 53, 0.4);

    /* Neutral Shadows (Dark) */
    --shadow-dark-sm: 0 8px 24px rgba(10, 37, 64, 0.08);
    --shadow-dark-lg: 0 24px 48px rgba(10, 37, 64, 0.08);
    --shadow-dark-xl: 0 30px 60px rgba(10, 37, 64, 0.1);

    /* Glow Shadows */
    --shadow-glow: 0 0 12px rgba(255, 107, 53, 0.6);

    /* ==================== TRANSITIONS & ANIMATIONS ==================== */
    /* Easing Functions */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-linear: linear;
    --ease-out: ease-out;

    /* Durations */
    --duration-fast: 0.3s;
    --duration-base: 0.4s;
    --duration-slow: 0.5s;
    --duration-slower: 1s;
    --duration-kenburns: 8s;
    --duration-reveal: 0.9s;
    --duration-img: 0.7s;
    --duration-autoplay: 6000ms;

    /* Preset Transitions */
    --transition-fast: var(--duration-fast) var(--ease-in-out);
    --transition-base: var(--duration-base) var(--ease-in-out);
    --transition-slow: var(--duration-slow) var(--ease-in-out);
    --transition-slower: var(--duration-slower) var(--ease-in-out);
    --transition-reveal: var(--duration-reveal) var(--ease-reveal);
    --transition-img: var(--duration-img) var(--ease-in-out);
    --transition-kenburns: var(--duration-kenburns) var(--ease-out);

    /* Animation Delays for Staggered Reveals */
    --delay-1: 0.1s;
    --delay-2: 0.2s;
    --delay-3: 0.3s;
    --delay-4: 0.4s;
    --delay-5: 0.5s;

    /* Reveal Delays (Sequential) */
    --reveal-delay-tag: 0.4s;
    --reveal-delay-title: 0.55s;
    --reveal-delay-text: 0.75s;
    --reveal-delay-action: 0.9s;

    /* ==================== Z-INDEX SCALE ==================== */
    --z-base: 1;
    --z-content: 2;
    --z-overlay: 3;
    --z-nav: 5;
    --z-progress: 10;
    --z-isolate: isolate;

    /* ==================== CONTAINERS ==================== */
    --container-max: 1280px;
    --container-lg: 1200px;
    --container-md: 800px;
    --container-sm: 700px;
    --container-cta: 800px;
    --container-lede: 700px;
    --container-services: 720px;

    /* ==================== LAYOUT ==================== */
    /* Hero / Full Height Sections */
    --height-full: 100vh;
    --height-hero: 90vh;
    --height-min: 600px;
    --height-max: 820px;

    /* ==================== RESPONSIVE TYPOGRAPHY ==================== */
    /* Clamp values for fluid scaling: clamp(min, preferred, max) */
    --font-clamp-heading: clamp(var(--font-size-3xl), 4.2vw, var(--font-size-4xl));
    --font-clamp-heading-xl: clamp(var(--font-size-4xl), 5.6vw, var(--font-size-5xl));
    --font-clamp-hero-title: clamp(2.2rem, 5.2vw, 4.4rem);
    --font-clamp-hero-text: clamp(1rem, 1.2vw, 1.15rem);
    --font-clamp-cta: clamp(var(--font-size-4xl), 5vw, var(--font-size-4xl));

    /* ==================== WCH COMPONENT ALIASES ==================== */
    /* Maps --wch-* tokens (used in components.css) to global design tokens */

    /* Colors */
    --wch-accent: var(--color-accent);
    --wch-accent-dark: var(--color-accent-dark);
    --wch-accent-soft: var(--color-accent-soft);
    --wch-white: var(--color-white);
    --wch-text-dark: var(--color-text-dark);
    --wch-text-muted: var(--color-text-muted);
    --wch-text-soft-w: var(--color-text-soft);
    --wch-bg-footer: var(--color-navy-dark);
    --wch-border-light: var(--color-gray-light);

    /* Typography — families */
    --wch-font-heading: var(--font-heading);
    --wch-font-body: var(--font-body);

    /* Typography — sizes */
    --wch-font-xs: var(--font-size-xs);
    --wch-font-sm: var(--font-size-sm);
    --wch-font-base: var(--font-size-base);
    --wch-font-lg: var(--font-size-lg);
    --wch-font-xl: var(--font-size-xl);
    --wch-font-2xl: var(--font-size-2xl);
    --wch-font-3xl: var(--font-size-3xl);
    --wch-font-4xl: var(--font-size-4xl);

    /* Typography — weights */
    --wch-font-normal: var(--font-weight-normal);
    --wch-font-medium: var(--font-weight-medium);
    --wch-font-semibold: var(--font-weight-semibold);
    --wch-font-bold: var(--font-weight-bold);
    --wch-font-extrabold: var(--font-weight-extrabold);

    /* Line heights */
    --wch-leading-tight: var(--line-height-tight);
    --wch-leading-snug: var(--line-height-snug);
    --wch-leading-base: var(--line-height-base);
    --wch-leading-relaxed: var(--line-height-relaxed);
    --wch-leading-loose: var(--line-height-loose);

    /* Letter spacing */
    --wch-tracking-tight: var(--letter-spacing-tight);
    --wch-tracking-wide: var(--letter-spacing-wide);
    --wch-tracking-wider: var(--letter-spacing-wider);

    /* Spacing */
    --wch-space-xs: var(--space-xs);
    --wch-space-sm: var(--space-sm);
    --wch-space-md: var(--space-md);
    --wch-space-lg: var(--space-lg);
    --wch-space-xl: var(--space-xl);
    --wch-space-2xl: var(--space-2xl);
    --wch-space-3xl: var(--space-3xl);
    --wch-space-4xl: var(--space-4xl);
    --wch-space-5xl: var(--space-5xl);
    --wch-space-8xl: var(--space-8xl);
    --wch-space-9xl: var(--space-9xl);
    --wch-space-10xl: var(--space-10xl);

    /* Border radius */
    --wch-radius-sm: var(--radius-sm);
    --wch-radius-md: var(--radius-md);
    --wch-radius-lg: var(--radius-lg);
    --wch-radius-xl: var(--radius-xl);
    --wch-radius-pill: var(--radius-pill);
    --wch-radius-circle: var(--radius-circle);

    /* Shadows */
    --wch-shadow-sm: var(--shadow-accent-sm);
    --wch-shadow-md: var(--shadow-accent-md);
    --wch-shadow-lg: var(--shadow-dark-lg);
    --wch-shadow-xl: var(--shadow-dark-xl);

    /* Transitions */
    --wch-transition-fast: var(--transition-fast);
    --wch-transition-base: var(--transition-base);
    --wch-transition-slow: var(--transition-slow);
    --wch-transition-img: var(--transition-img);

    /* Z-index */
    --wch-z-content: var(--z-content);

    /* Containers */
    --wch-container-services: var(--container-services);
    --wch-container-cta: var(--container-cta);

    /* ==================== WC ABOUT PAGE ALIASES ==================== */
    --wc-accent: var(--color-accent);
    --wc-accent-dark: var(--color-accent-dark);
    --wc-accent-soft: var(--color-accent-soft);
    --wc-navy: var(--color-navy);
    --wc-navy-mid: #0f3057;
    --wc-navy-light: var(--color-navy-mid);
    --wc-white: var(--color-white);
    --wc-cream: var(--color-cream);
    --wc-border-light: rgba(10, 37, 64, 0.08);
    --wc-border-dark: rgba(255, 255, 255, 0.10);
    --wc-text-dark: var(--color-text-dark);
    --wc-text-muted: var(--color-text-muted);
    --wc-text-soft-w: var(--color-text-soft);

    /* ==================== WCFO FOOTER ALIASES ==================== */
    --wcfo-accent: var(--color-accent);
    --wcfo-accent-dark: var(--color-accent-dark);
    --wcfo-navy: var(--color-navy);
    --wcfo-navy-deep: #061a2e;
    --wcfo-white: var(--color-white);
    --wcfo-text-soft: var(--color-text-soft);
    --wcfo-text-mute: rgba(255, 255, 255, 0.55);
    --wcfo-border: var(--wc-border-dark);
    --wcfo-border-soft: rgba(255, 255, 255, 0.06);

    /* ==================== WCSV SERVICES HUB ALIASES ==================== */
    --wcsv-accent: var(--color-accent);
    --wcsv-accent-dark: var(--color-accent-dark);
    --wcsv-accent-soft: var(--color-accent-soft);
    --wcsv-navy: var(--color-navy);
    --wcsv-white: var(--color-white);
    --wcsv-cream: var(--color-cream);
    --wcsv-text-dark: var(--color-text-dark);
    --wcsv-text-muted: var(--color-text-muted);
    --wcsv-text-soft-w: var(--color-text-soft);
    --wcsv-border-light: rgba(10, 37, 64, 0.08);
    --wcsv-border-dark: rgba(255, 255, 255, 0.10);

    /* ==================== WCS SERVICE PAGE ALIASES ==================== */
    --wcs-accent: var(--color-accent);
    --wcs-accent-dark: var(--color-accent-dark);
    --wcs-accent-soft: var(--color-accent-soft);
    --wcs-navy: var(--color-navy);
    --wcs-white: var(--color-white);
    --wcs-cream: var(--color-cream);
    --wcs-text-dark: var(--color-text-dark);
    --wcs-text-muted: var(--color-text-muted);
    --wcs-text-soft-w: var(--color-text-soft);
    --wcs-border-light: rgba(10, 37, 64, 0.08);
    --wcs-border-dark: rgba(255, 255, 255, 0.10);

    /* ==================== WCG GRAPHIC DESIGN PAGE ALIASES ==================== */
    --wcg-accent: var(--color-accent);
    --wcg-accent-dark: var(--color-accent-dark);
    --wcg-accent-soft: var(--color-accent-soft);
    --wcg-navy: var(--color-navy);
    --wcg-white: var(--color-white);
    --wcg-cream: var(--color-cream);
    --wcg-text-dark: var(--color-text-dark);
    --wcg-text-muted: var(--color-text-muted);
    --wcg-text-soft-w: var(--color-text-soft);
    --wcg-border-light: rgba(10, 37, 64, 0.08);
    --wcg-border-dark: rgba(255, 255, 255, 0.10);

    /* ==================== WCM DIGITAL MARKETING PAGE ALIASES ==================== */
    --wcm-accent: var(--color-accent);
    --wcm-accent-dark: var(--color-accent-dark);
    --wcm-accent-soft: var(--color-accent-soft);
    --wcm-navy: var(--color-navy);
    --wcm-white: var(--color-white);
    --wcm-cream: var(--color-cream);
    --wcm-text-dark: var(--color-text-dark);
    --wcm-text-muted: var(--color-text-muted);
    --wcm-text-soft-w: var(--color-text-soft);
    --wcm-border-light: rgba(10, 37, 64, 0.08);
    --wcm-border-dark: rgba(255, 255, 255, 0.10);

    /* ==================== WCCT CONTACT PAGE ALIASES ==================== */
    --wcct-accent: var(--color-accent);
    --wcct-accent-dark: var(--color-accent-dark);
    --wcct-accent-soft: var(--color-accent-soft);
    --wcct-navy: var(--color-navy);
    --wcct-white: var(--color-white);
    --wcct-cream: var(--color-cream);
    --wcct-text-dark: var(--color-text-dark);
    --wcct-text-muted: var(--color-text-muted);
    --wcct-text-soft-w: var(--color-text-soft);
    --wcct-border-light: rgba(10, 37, 64, 0.08);
    --wcct-border-input: rgba(10, 37, 64, 0.12);
    --wcct-border-dark: rgba(255, 255, 255, 0.10);
    --wcct-input-bg: var(--color-white);
    --wcct-error: #dc2626;
    --wcct-success: #16a34a;

    /* ==================== WCCC COOKIE CONSENT ==================== */
    --wccc-bg: #0f1729;
    --wccc-text: var(--color-white);
    --wccc-text-soft: var(--color-text-soft);
    --wccc-link: var(--color-white);
    --wccc-btn-bg: var(--color-white);
    --wccc-btn-text: #0f1729;
    --wccc-bottom: 24px;
    --wccc-side: 24px;

    /* ==================== WCP PORTFOLIO PAGE ALIASES ==================== */
    --wcp-accent:       var(--color-accent);
    --wcp-accent-dark:  var(--color-accent-dark);
    --wcp-accent-soft:  var(--color-accent-soft);
    --wcp-navy:         var(--color-navy);
    --wcp-white:        var(--color-white);
    --wcp-cream:        var(--color-cream);
    --wcp-text-dark:    var(--color-text-dark);
    --wcp-text-muted:   var(--color-text-muted);
    --wcp-text-soft-w:  var(--color-text-soft);
    --wcp-border-light: rgba(10, 37, 64, 0.08);
    --wcp-border-dark:  rgba(255, 255, 255, 0.10);

    /* ==================== WCB BLOG PAGE ALIASES ==================== */
    --wcb-accent: var(--color-accent);
    --wcb-accent-dark: var(--color-accent-dark);
    --wcb-accent-soft: var(--color-accent-soft);
    --wcb-navy: var(--color-navy);
    --wcb-navy-dark: var(--color-navy-dark);
    --wcb-white: var(--color-white);
    --wcb-cream: var(--color-cream);
    --wcb-text-dark: var(--color-text-dark);
    --wcb-text-muted: var(--color-text-muted);
    --wcb-text-soft-w: var(--color-text-soft);
    --wcb-border-light: rgba(10, 37, 64, 0.08);
    --wcb-border-dark: rgba(255, 255, 255, 0.12);

    /* ==================== WCPS PROJECT SINGLE PAGE ALIASES ==================== */
    --wcps-accent:       var(--color-accent);
    --wcps-accent-dark:  var(--color-accent-dark);
    --wcps-accent-soft:  var(--color-accent-soft);
    --wcps-navy:         var(--color-navy);
    --wcps-white:        var(--color-white);
    --wcps-cream:        var(--color-cream);
    --wcps-text-dark:    var(--color-text-dark);
    --wcps-text-muted:   var(--color-text-muted);
    --wcps-text-soft-w:  var(--color-text-soft);
    --wcps-border-light: rgba(10, 37, 64, 0.08);
    --wcps-border-dark:  rgba(255, 255, 255, 0.10);
}

/* ==================== MOBILE RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 768px) {
    :root {
        /* Responsive Typography */
        --font-size-4xl: 2.5rem;
        --font-size-5xl: 3.5rem;

        /* Responsive Layout */
        --height-hero: 75vh;
        --height-min: 540px;
    }
}