/*
Theme Name: Zenith Master
Theme URI: https://go2zenith.com
Author: Zenith Business Growth
Author URI: https://go2zenith.com
Description: Master parent theme for Zenith Site Builder — SEO/GEO/LLM optimized WordPress theme system for local service businesses
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: Proprietary
License URI: https://go2zenith.com/license
Text Domain: zenith-master
Tags: local-business, seo, geo, llm, service-business, custom-theme
*/

/* ==========================================================================
   ZENITH DESIGN SYSTEM — CSS Custom Properties
   ==========================================================================
   All variables defined here serve as defaults for the parent theme.
   Child themes override these in their own :root block to customize
   the look and feel per client without touching parent theme code.
   ========================================================================== */

:root {

  /* -----------------------------------------------------------------------
     COLORS — Brand Palette
     ----------------------------------------------------------------------- */

  /* Primary brand color and variants */
  --z-color-primary:          #1a56db;
  --z-color-primary-light:    #3b82f6;
  --z-color-primary-dark:     #1e40af;
  --z-color-primary-contrast:  #ffffff;

  /* Secondary accent color */
  --z-color-secondary:          #7c3aed;
  --z-color-secondary-light:    #a78bfa;
  --z-color-secondary-dark:     #5b21b6;
  --z-color-secondary-contrast:  #ffffff;

  /* Accent / CTA color */
  --z-color-accent:          #f59e0b;
  --z-color-accent-light:    #fbbf24;
  --z-color-accent-dark:     #d97706;
  --z-color-accent-contrast:  #1a1a1a;

  /* -----------------------------------------------------------------------
     COLORS — Neutrals
     ----------------------------------------------------------------------- */
  --z-color-white:      #ffffff;
  --z-color-black:      #0a0a0a;
  --z-color-gray-50:    #f9fafb;
  --z-color-gray-100:   #f3f4f6;
  --z-color-gray-200:   #e5e7eb;
  --z-color-gray-300:   #d1d5db;
  --z-color-gray-400:   #9ca3af;
  --z-color-gray-500:   #6b7280;
  --z-color-gray-600:   #4b5563;
  --z-color-gray-700:   #374151;
  --z-color-gray-800:   #1f2937;
  --z-color-gray-900:   #111827;

  /* -----------------------------------------------------------------------
     COLORS — Semantic / Feedback
     ----------------------------------------------------------------------- */
  --z-color-success:    #16a34a;
  --z-color-warning:    #ea580c;
  --z-color-error:      #dc2626;
  --z-color-info:       #0891b2;

  /* -----------------------------------------------------------------------
     COLORS — Surfaces & Backgrounds
     ----------------------------------------------------------------------- */
  --z-color-bg-body:      #ffffff;
  --z-color-bg-surface:   #f9fafb;
  --z-color-bg-muted:     #f3f4f6;
  --z-color-bg-inverse:   #111827;
  --z-color-bg-overlay:   rgba(0, 0, 0, 0.5);

  /* -----------------------------------------------------------------------
     COLORS — Text
     ----------------------------------------------------------------------- */
  --z-color-text-primary:     #111827;
  --z-color-text-secondary:   #4b5563;
  --z-color-text-muted:       #9ca3af;
  --z-color-text-inverse:     #f9fafb;
  --z-color-text-link:        var(--z-color-primary);
  --z-color-text-link-hover:  var(--z-color-primary-dark);

  /* -----------------------------------------------------------------------
     COLORS — Borders
     ----------------------------------------------------------------------- */
  --z-color-border:         #e5e7eb;
  --z-color-border-strong:  #d1d5db;
  --z-color-border-focus:   var(--z-color-primary);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Font Families
     ----------------------------------------------------------------------- */
  --z-font-heading:   'Inter', system-ui, -apple-system, sans-serif;
  --z-font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --z-font-mono:      'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Font Sizes (modular scale ~1.25)
     ----------------------------------------------------------------------- */
  --z-text-xs:    0.75rem;    /* 12px */
  --z-text-sm:    0.875rem;   /* 14px */
  --z-text-base:  1rem;       /* 16px */
  --z-text-lg:    1.125rem;   /* 18px */
  --z-text-xl:    1.25rem;    /* 20px */
  --z-text-2xl:   1.5rem;     /* 24px */
  --z-text-3xl:   1.875rem;   /* 30px */
  --z-text-4xl:   2.25rem;    /* 36px */
  --z-text-5xl:   3rem;       /* 48px */
  --z-text-6xl:   3.75rem;    /* 60px */

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Font Weights
     ----------------------------------------------------------------------- */
  --z-weight-light:     300;
  --z-weight-normal:    400;
  --z-weight-medium:    500;
  --z-weight-semibold:  600;
  --z-weight-bold:      700;
  --z-weight-extrabold: 800;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Line Heights
     ----------------------------------------------------------------------- */
  --z-leading-none:    1;
  --z-leading-tight:   1.25;
  --z-leading-snug:    1.375;
  --z-leading-normal:  1.5;
  --z-leading-relaxed: 1.625;
  --z-leading-loose:   2;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Letter Spacing
     ----------------------------------------------------------------------- */
  --z-tracking-tighter: -0.05em;
  --z-tracking-tight:   -0.025em;
  --z-tracking-normal:   0em;
  --z-tracking-wide:     0.025em;
  --z-tracking-wider:    0.05em;

  /* -----------------------------------------------------------------------
     SPACING — Consistent scale (4px base)
     ----------------------------------------------------------------------- */
  --z-space-0:    0;
  --z-space-1:    0.25rem;   /* 4px */
  --z-space-2:    0.5rem;    /* 8px */
  --z-space-3:    0.75rem;   /* 12px */
  --z-space-4:    1rem;      /* 16px */
  --z-space-5:    1.25rem;   /* 20px */
  --z-space-6:    1.5rem;    /* 24px */
  --z-space-8:    2rem;      /* 32px */
  --z-space-10:   2.5rem;    /* 40px */
  --z-space-12:   3rem;      /* 48px */
  --z-space-16:   4rem;      /* 64px */
  --z-space-20:   5rem;      /* 80px */
  --z-space-24:   6rem;      /* 96px */
  --z-space-32:   8rem;      /* 128px */

  /* -----------------------------------------------------------------------
     LAYOUT — Container & Content Widths
     ----------------------------------------------------------------------- */
  --z-container-sm:    640px;
  --z-container-md:    768px;
  --z-container-lg:    1024px;
  --z-container-xl:    1280px;
  --z-container-2xl:   1440px;
  --z-container-max:   1440px;
  --z-content-width:   720px;
  --z-container-pad:   var(--z-space-6);

  /* -----------------------------------------------------------------------
     LAYOUT — Header & Footer
     ----------------------------------------------------------------------- */
  --z-header-height:       80px;
  --z-header-height-scroll: 64px;
  --z-footer-pad-y:        var(--z-space-16);

  /* -----------------------------------------------------------------------
     LAYOUT — Sidebar
     ----------------------------------------------------------------------- */
  --z-sidebar-width:   280px;
  --z-sidebar-gap:     var(--z-space-8);

  /* -----------------------------------------------------------------------
     LAYOUT — Section Spacing
     ----------------------------------------------------------------------- */
  --z-section-pad-y:   var(--z-space-20);
  --z-section-pad-x:   var(--z-container-pad);

  /* -----------------------------------------------------------------------
     SHADOWS — Elevation system
     ----------------------------------------------------------------------- */
  --z-shadow-xs:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --z-shadow-sm:    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --z-shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --z-shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --z-shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --z-shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --z-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --z-shadow-none:  0 0 0 0 transparent;

  /* -----------------------------------------------------------------------
     BORDER RADIUS
     ----------------------------------------------------------------------- */
  --z-radius-none:  0;
  --z-radius-sm:    0.25rem;   /* 4px */
  --z-radius-md:    0.375rem;  /* 6px */
  --z-radius-lg:    0.5rem;    /* 8px */
  --z-radius-xl:    0.75rem;   /* 12px */
  --z-radius-2xl:   1rem;      /* 16px */
  --z-radius-3xl:   1.5rem;    /* 24px */
  --z-radius-full:  9999px;
  --z-radius-default: var(--z-radius-lg);

  /* -----------------------------------------------------------------------
     TRANSITIONS & ANIMATION
     ----------------------------------------------------------------------- */
  --z-duration-fast:    150ms;
  --z-duration-normal:  250ms;
  --z-duration-slow:    400ms;
  --z-duration-slower:  600ms;
  --z-ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --z-ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --z-ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --z-ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --z-ease-bounce:      cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --z-transition-base:  var(--z-duration-normal) var(--z-ease-default);
  --z-transition-fast:  var(--z-duration-fast) var(--z-ease-default);
  --z-transition-slow:  var(--z-duration-slow) var(--z-ease-default);

  /* -----------------------------------------------------------------------
     Z-INDEX — Layering scale
     ----------------------------------------------------------------------- */
  --z-index-dropdown:   100;
  --z-index-sticky:     200;
  --z-index-header:     300;
  --z-index-overlay:    400;
  --z-index-modal:      500;
  --z-index-toast:      600;

  /* -----------------------------------------------------------------------
     BUTTONS — Default button tokens
     ----------------------------------------------------------------------- */
  --z-btn-pad-x:         var(--z-space-6);
  --z-btn-pad-y:         var(--z-space-3);
  --z-btn-radius:        var(--z-radius-lg);
  --z-btn-font-size:     var(--z-text-base);
  --z-btn-font-weight:   var(--z-weight-semibold);
  --z-btn-transition:    var(--z-transition-fast);

  /* -----------------------------------------------------------------------
     FORMS — Input tokens
     ----------------------------------------------------------------------- */
  --z-input-pad-x:       var(--z-space-4);
  --z-input-pad-y:       var(--z-space-3);
  --z-input-radius:      var(--z-radius-lg);
  --z-input-border:      var(--z-color-border);
  --z-input-border-focus: var(--z-color-border-focus);
  --z-input-bg:          var(--z-color-white);
  --z-input-font-size:   var(--z-text-base);

  /* -----------------------------------------------------------------------
     CARDS — Card component tokens
     ----------------------------------------------------------------------- */
  --z-card-pad:          var(--z-space-6);
  --z-card-radius:       var(--z-radius-xl);
  --z-card-shadow:       var(--z-shadow-sm);
  --z-card-shadow-hover: var(--z-shadow-md);
  --z-card-border:       var(--z-color-border);
  --z-card-bg:           var(--z-color-white);
}

/* ==========================================================================
   BASE RESET & DEFAULTS
   ========================================================================== */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--z-font-body);
  font-size: var(--z-text-base);
  font-weight: var(--z-weight-normal);
  line-height: var(--z-leading-normal);
  color: var(--z-color-text-primary);
  background-color: var(--z-color-bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TYPOGRAPHY BASE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--z-font-heading);
  font-weight: var(--z-weight-bold);
  line-height: var(--z-leading-tight);
  color: var(--z-color-text-primary);
}

h1 { font-size: var(--z-text-5xl); letter-spacing: var(--z-tracking-tighter); }
h2 { font-size: var(--z-text-4xl); letter-spacing: var(--z-tracking-tight); }
h3 { font-size: var(--z-text-3xl); }
h4 { font-size: var(--z-text-2xl); }
h5 { font-size: var(--z-text-xl); }
h6 { font-size: var(--z-text-lg); }

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

a {
  color: var(--z-color-text-link);
  text-decoration: none;
  transition: color var(--z-transition-fast);
}

a:hover {
  color: var(--z-color-text-link-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

.z-container {
  width: 100%;
  max-width: var(--z-container-max);
  margin-inline: auto;
  padding-inline: var(--z-container-pad);
}

.z-section {
  padding-block: var(--z-section-pad-y);
  padding-inline: var(--z-section-pad-x);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (mobile-first)
   ========================================================================== */

@media (min-width: 640px) {
  :root {
    --z-container-pad: var(--z-space-8);
  }
}

@media (min-width: 1024px) {
  :root {
    --z-container-pad:  var(--z-space-8);
    --z-section-pad-y:  var(--z-space-24);
  }
}

@media (min-width: 1280px) {
  :root {
    --z-container-pad: var(--z-space-10);
  }
}