/* =============================================================
   EZ ONE Design Tokens
   Single source of truth. All component CSS uses var(--ez-*).
   Client branding overrides via plugin-injected client-tokens.css.
   ============================================================= */
:root {

  /* ── Colors ──────────────────────────────────────────────── */
  --ez-color-brand:     #0e4bf1;
  --ez-color-accent:    #ffb400;
  --ez-color-text:      #1f2937;
  --ez-color-muted:     #6b7280;
  --ez-color-bg:        #ffffff;
  --ez-color-surface:   #f8fafc;
  --ez-color-border:    #e5e7eb;
  --ez-color-white:     #ffffff;
  --ez-color-dark:      #111827;

  /* Semantic aliases — overridden per client via client-tokens.css */
  --ez-color-primary:   var(--ez-color-brand);
  --ez-color-secondary: var(--ez-color-dark);

  /* ── Typography ──────────────────────────────────────────── */
  --ez-font-body:    'Inter', Arial, sans-serif;
  --ez-font-heading: 'Inter', Arial, sans-serif;

  --ez-font-size-xs:   0.75rem;
  --ez-font-size-sm:   0.875rem;
  --ez-font-size-base: 1rem;
  --ez-font-size-md:   1.125rem;
  --ez-font-size-lg:   1.25rem;
  --ez-font-size-xl:   1.5rem;
  --ez-font-size-2xl:  2rem;
  --ez-font-size-3xl:  2.5rem;
  --ez-font-size-4xl:  3.25rem;

  --ez-font-weight-normal:   400;
  --ez-font-weight-medium:   500;
  --ez-font-weight-semibold: 600;
  --ez-font-weight-bold:     700;

  --ez-line-height-tight:   1.2;
  --ez-line-height-snug:    1.4;
  --ez-line-height-normal:  1.6;
  --ez-line-height-relaxed: 1.8;

  /* ── Spacing (8 px base unit) ────────────────────────────── */
  --ez-space-1:  0.25rem;
  --ez-space-2:  0.5rem;
  --ez-space-3:  0.75rem;
  --ez-space-4:  1rem;
  --ez-space-6:  1.5rem;
  --ez-space-8:  2rem;
  --ez-space-10: 2.5rem;
  --ez-space-12: 3rem;
  --ez-space-16: 4rem;
  --ez-space-20: 5rem;
  --ez-space-24: 6rem;

  /* Named scale aliases */
  --ez-space-xs: var(--ez-space-2);
  --ez-space-sm: var(--ez-space-4);
  --ez-space-md: var(--ez-space-6);
  --ez-space-lg: var(--ez-space-10);
  --ez-space-xl: var(--ez-space-16);

  /* Section vertical padding */
  --ez-section-py: var(--ez-space-16);

  /* ── Border Radius ───────────────────────────────────────── */
  --ez-radius-sm:   4px;
  --ez-radius-md:   8px;
  --ez-radius-lg:   16px;
  --ez-radius-xl:   24px;
  --ez-radius-pill: 9999px;
  --ez-radius-full: 50%;

  /* ── Shadows ─────────────────────────────────────────────── */
  --ez-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --ez-shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --ez-shadow-lg: 0 10px 24px rgba(0,0,0,.10);
  --ez-shadow-xl: 0 20px 40px rgba(0,0,0,.10);

  /* ── Transitions ─────────────────────────────────────────── */
  --ez-transition-fast:   150ms ease;
  --ez-transition-normal: 250ms ease;
  --ez-transition-slow:   400ms ease;

  /* ── Layout ──────────────────────────────────────────────── */
  --ez-container-max:    1200px;
  --ez-container-narrow:  860px;
  --ez-container-wide:   1440px;
  --ez-container-px:     var(--ez-space-sm);

  /* Backwards-compatible alias */
  --ez-container: var(--ez-container-max);

  /* ── Z-index ─────────────────────────────────────────────── */
  --ez-z-raised:   10;
  --ez-z-dropdown: 100;
  --ez-z-sticky:   200;
  --ez-z-fixed:    300;
  --ez-z-modal:    400;

  /* ── Buttons ─────────────────────────────────────────────── */
  --ez-btn-py:          0.75rem;
  --ez-btn-px:          1.5rem;
  --ez-btn-font-size:   var(--ez-font-size-base);
  --ez-btn-font-weight: var(--ez-font-weight-semibold);
  --ez-btn-radius:      var(--ez-radius-md);
  --ez-btn-min-h:       44px;

  /* ── Hero ────────────────────────────────────────────────── */
  --ez-hero-min-h:        80vh;
  --ez-hero-min-h-mobile: 60vh;

  /* ── Page Banner ─────────────────────────────────────────── */
  --ez-banner-min-h:        280px;
  --ez-banner-min-h-mobile: 180px;

  /* ── Cards ───────────────────────────────────────────────── */
  --ez-card-px:     var(--ez-space-md);
  --ez-card-py:     var(--ez-space-md);
  --ez-card-radius: var(--ez-radius-md);
  --ez-card-shadow: var(--ez-shadow-md);
  --ez-card-bg:     var(--ez-color-white);

  /* ── Forms ───────────────────────────────────────────────── */
  --ez-input-py:     0.625rem;
  --ez-input-px:     var(--ez-space-sm);
  --ez-input-border: 1px solid var(--ez-color-border);
  --ez-input-radius: var(--ez-radius-sm);

  /* ── Sticky CTA bar ──────────────────────────────────────── */
  --ez-sticky-cta-h:  64px;
  --ez-sticky-cta-bg: var(--ez-color-dark);
}