/*
 * Modern Design System - CSS Custom Properties
 * Tech-Forward Professional Theme for Tillerstead.com
 * Optimized for NJ Home Improvement Contractor Brand
 */

:root {
  /* ========================================
     BRAND COLORS - Professional Ocean Blue Theme
     ======================================== */

  /* Primary - Deep Ocean Blue (Trust, Professionalism, Water) */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;
  --color-primary-950: #0f172a;

  /* Accent - Warm Amber (Energy, Home Comfort) */
  --color-accent-50: #fffbeb;
  --color-accent-100: #fef3c7;
  --color-accent-200: #fde68a;
  --color-accent-300: #fcd34d;
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;
  --color-accent-600: #d97706;
  --color-accent-700: #b45309;
  --color-accent-800: #92400e;
  --color-accent-900: #78350f;

  /* Success - Emerald (Quality, Certifications) */
  --color-success-50: #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-200: #a7f3d0;
  --color-success-300: #6ee7b7;
  --color-success-400: #34d399;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;
  --color-success-800: #065f46;
  --color-success-900: #064e3b;

  /* Error - Coral Red */
  --color-error-50: #fef2f2;
  --color-error-500: #ef4444;
  --color-error-700: #b91c1c;

  /* Neutral - Slate with Blue Undertones */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  /* ========================================
     GRADIENTS - Modern & Professional
     ======================================== */

  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary-600) 0%,
    var(--color-primary-800) 100%
  );
  --gradient-accent: linear-gradient(
    135deg,
    var(--color-accent-500) 0%,
    var(--color-accent-700) 100%
  );
  --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e40af 50%, #0ea5e9 100%);
  --gradient-glass: linear-gradient(135deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 5%) 100%);
  --gradient-ocean: linear-gradient(180deg, #0c4a6e 0%, #0f172a 100%);
  --gradient-sunset: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);

  /* Mesh Gradients for Backgrounds */
  --gradient-mesh-1:
    radial-gradient(at 0% 0%, rgb(14 165 233 / 20%) 0, transparent 50%),
    radial-gradient(at 100% 100%, rgb(245 158 11 / 15%) 0, transparent 50%),
    radial-gradient(at 100% 0%, rgb(16 185 129 / 10%) 0, transparent 50%);

  /* ========================================
     GLASSMORPHISM
     ======================================== */

  --glass-bg-light: rgb(255 255 255 / 10%);
  --glass-bg-medium: rgb(255 255 255 / 15%);
  --glass-bg-strong: rgb(255 255 255 / 25%);
  --glass-bg-dark: rgb(15 23 42 / 50%);

  --glass-border-light: rgb(255 255 255 / 15%);
  --glass-border-medium: rgb(255 255 255 / 25%);
  --glass-border-strong: rgb(255 255 255 / 40%);

  --glass-blur-sm: 8px;
  --glass-blur-md: 12px;
  --glass-blur-lg: 16px;
  --glass-blur-xl: 24px;

  /* ========================================
     SHADOWS - Modern Layered System
     ======================================== */

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);
  --shadow-sm: 0 2px 4px rgb(0 0 0 / 6%);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 8%);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 12%);
  --shadow-xl: 0 16px 48px rgb(0 0 0 / 16%);
  --shadow-2xl: 0 24px 64px rgb(0 0 0 / 20%);

  /* Glass-specific shadows */
  --shadow-glass: 0 8px 32px rgb(0 0 0 / 10%), inset 0 1px 0 rgb(255 255 255 / 20%);
  --shadow-glass-hover: 0 12px 48px rgb(0 0 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 30%);

  /* Colored shadows for depth */
  --shadow-primary: 0 8px 24px rgb(14 165 233 / 30%);
  --shadow-accent: 0 8px 24px rgb(245 158 11 / 30%);
  --shadow-success: 0 8px 24px rgb(16 185 129 / 30%);

  /* ========================================
     TYPOGRAPHY - Modern Font Stack
     ======================================== */

  --font-sans:
    'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', sans-serif;
  --font-display: 'Lexend', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font Sizes - Fluid Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
  --text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);
  --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);
  --text-6xl: clamp(3.75rem, 3rem + 3.75vw, 4.5rem);

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

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* ========================================
     SPACING - Consistent Scale
     ======================================== */

  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */

  /* ========================================
     BORDER RADIUS - Modern Curves
     ======================================== */

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* ========================================
     TRANSITIONS - Smooth Animations
     ======================================== */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  --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);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========================================
     Z-INDEX - Layering System
     ======================================== */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ========================================
     BREAKPOINTS (for reference in JS)
     ======================================== */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ========================================
     COMPONENT-SPECIFIC
     ======================================== */

  /* Buttons */
  --btn-height-sm: 2rem;
  --btn-height-md: 2.5rem;
  --btn-height-lg: 3rem;
  --btn-height-xl: 3.5rem;

  /* Cards */
  --card-padding: var(--space-6);
  --card-radius: var(--radius-xl);

  /* Navigation */
  --nav-height: 4rem;
  --nav-blur: var(--glass-blur-lg);

  /* Container */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
}

/* ========================================
   DARK MODE VARIABLES (Future Enhancement)
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg-light: rgb(15 23 42 / 30%);
    --glass-bg-medium: rgb(15 23 42 / 50%);
    --glass-bg-strong: rgb(15 23 42 / 70%);
    --glass-border-light: rgb(255 255 255 / 10%);
  }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

* {
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}