/*
Theme Name: JemsWPService Pro
Theme URI: https://jemscomputer.com
Author: Jems Computer
Author URI: https://jemscomputer.com
Description: A professional, SEO-optimized WordPress theme for universal service businesses. Features modern design, Google Ads ready, mobile-first responsive layout, extensive customization options, enhanced security, and optimized performance.
Version: 1.0.6
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jemscomputer.com
Tags: business, service, modern, responsive, customizable, seo, ads-ready, professional
*/

/* ===================================
   CSS VARIABLES
   Global design tokens
   =================================== */

:root {
  /* Primary Colors */
  --color-primary: #2563eb;
  --color-primary-dark: #1e40af;
  --color-primary-darker: #1e3a8a;
  --color-primary-light: #3b82f6;
  --color-primary-lighter: #60a5fa;

  /* Secondary Colors */
  --color-secondary: #10b981;
  --color-secondary-dark: #059669;
  --color-secondary-light: #34d399;

  /* Accent Colors */
  --color-accent: #f59e0b;
  --color-accent-dark: #d97706;
  --color-accent-darker: #b45309;
  --color-accent-light: #fbbf24;
  --color-accent-lighter: #fde68a;

  /* Special Colors */
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1da851;
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* Text Colors */
  --color-text-primary: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-light: #9ca3af;
  --color-text-lighter: #d1d5db;
  --color-text-white: #ffffff;
  --color-text-on-dark: #f3f4f6;

  /* Background Colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-tertiary: #f3f4f6;
  --color-bg-dark: #111827;
  --color-bg-darker: #000000;

  /* Border Colors */
  --color-border-light: #e5e7eb;
  --color-border-medium: #d1d5db;
  --color-border-dark: #9ca3af;

  /* Gradient Backgrounds */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  --gradient-accent: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
  --gradient-hero: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  --gradient-card: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Poppins', 'Inter', sans-serif;
  --font-mono: 'Courier New', Consolas, monospace;

  /* Font Sizes - Fluid Typography */
  --font-size-xs: clamp(0.75rem, 1vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 1.5vw, 1rem);
  --font-size-base: clamp(1rem, 2vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 2.5vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 3vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 4vw, 2rem);
  --font-size-3xl: clamp(2rem, 5vw, 3rem);

  /* Spacing Scale */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows - Consistent System */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --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-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* Transitions */
  --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);

  /* Z-index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-tooltip: 1200;

  /* Layout */
  --container-max-width: 1280px;
  --content-max-width: 768px;
  --header-height: 80px;
  --header-height-mobile: 70px;

  /* Touch Targets */
  --touch-target-min: 48px;
  --touch-target-comfortable: 56px;
}

/* ===================================
   CSS RESET & BASE STYLES
   Minimal base styles only
   =================================== */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden !important;
  max-width: 100vw;
}

body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  max-width: 100vw;
  position: relative;
}

/* ===================================
   NOTE: All specific styles moved to assets/css/
   - Base styles → assets/css/base.css
   - Components → assets/css/components.css  
   - Utilities → assets/css/utilities.css
   - Sections → assets/css/sections/
   - Header → assets/css/header.css
   - Footer → assets/css/footer.css
   - Fixes → assets/css/fixes.css
   =================================== */