/* ==========================================================================
   M חשמל — Design System v1.1 — Tokens (alias layer)
   Source of truth for colors & typography: Elementor Site Settings.
   This file maps Elementor globals to --np-* and defines the tokens Elementor
   does not have (space, radius, shadow, motion, z-index, containers).
   NO brand HEX values here.
   ========================================================================== */

:root {
  /* ---- Colors: brand (Elementor system globals) ---- */
  --np-color-brand-primary:          var(--e-global-color-primary);
  --np-color-brand-primary-hover:    var(--e-global-color-np_brand_primary_hover);
  --np-color-brand-primary-soft:     var(--e-global-color-np_brand_primary_soft);
  --np-color-brand-secondary:        var(--e-global-color-secondary);
  --np-color-brand-secondary-hover:  var(--e-global-color-np_brand_secondary_hover);
  --np-color-accent:                 var(--e-global-color-accent); /* promo / highlights only — never primary CTA */

  /* ---- Colors: neutral scale ---- */
  --np-color-neutral-0:   var(--e-global-color-np_neutral_0);
  --np-color-neutral-50:  var(--e-global-color-np_neutral_50);
  --np-color-neutral-100: var(--e-global-color-np_neutral_100);
  --np-color-neutral-200: var(--e-global-color-np_neutral_200);
  --np-color-neutral-300: var(--e-global-color-np_neutral_300);
  --np-color-neutral-400: var(--e-global-color-np_neutral_400);
  --np-color-neutral-500: var(--e-global-color-np_neutral_500);
  --np-color-neutral-600: var(--e-global-color-np_neutral_600);
  --np-color-neutral-800: var(--e-global-color-text);
  --np-color-neutral-900: var(--e-global-color-np_neutral_900);

  /* ---- Colors: semantic ---- */
  --np-color-text:            var(--np-color-neutral-800);
  --np-color-text-secondary:  var(--np-color-neutral-600);
  --np-color-text-muted:      var(--np-color-neutral-500);
  --np-color-text-inverse:    var(--np-color-neutral-0);
  --np-color-bg-page:         var(--np-color-neutral-50);
  --np-color-bg-surface:      var(--np-color-neutral-0);
  --np-color-bg-subtle:       var(--np-color-neutral-100);
  --np-color-border:          var(--np-color-neutral-200);
  --np-color-border-strong:   var(--np-color-neutral-300);
  --np-color-success:         var(--e-global-color-np_success);
  --np-color-success-soft:    var(--e-global-color-np_success_soft);
  --np-color-warning:         var(--e-global-color-np_warning);
  --np-color-warning-soft:    var(--e-global-color-np_warning_soft);
  --np-color-error:           var(--e-global-color-np_error);
  --np-color-error-soft:      var(--e-global-color-np_error_soft);
  --np-color-info:            var(--np-color-brand-primary);
  --np-color-info-soft:       var(--np-color-brand-primary-soft);
  --np-color-sale:            var(--e-global-color-np_sale);
  --np-color-sale-soft:       var(--np-color-error-soft);
  --np-color-price:           var(--np-color-neutral-900);
  --np-color-old-price:       var(--np-color-neutral-500);
  --np-color-focus:           var(--e-global-color-np_focus_ring);

  /* ---- Typography (Elementor global fonts) ---- */
  --np-font-family: var(--e-global-typography-text-font-family), Arial, sans-serif;

  --np-font-h1-size: var(--e-global-typography-np_h1-font-size);   --np-font-h1-weight: var(--e-global-typography-np_h1-font-weight);   --np-font-h1-lh: var(--e-global-typography-np_h1-line-height);
  --np-font-h2-size: var(--e-global-typography-primary-font-size); --np-font-h2-weight: var(--e-global-typography-primary-font-weight); --np-font-h2-lh: var(--e-global-typography-primary-line-height);
  --np-font-h3-size: var(--e-global-typography-secondary-font-size); --np-font-h3-weight: var(--e-global-typography-secondary-font-weight); --np-font-h3-lh: var(--e-global-typography-secondary-line-height);
  --np-font-h4-size: var(--e-global-typography-np_h4-font-size);   --np-font-h4-weight: var(--e-global-typography-np_h4-font-weight);   --np-font-h4-lh: var(--e-global-typography-np_h4-line-height);
  --np-font-body-large-size: var(--e-global-typography-np_body_large-font-size); --np-font-body-large-weight: var(--e-global-typography-np_body_large-font-weight); --np-font-body-large-lh: var(--e-global-typography-np_body_large-line-height);
  --np-font-body-size: var(--e-global-typography-text-font-size);  --np-font-body-weight: var(--e-global-typography-text-font-weight);  --np-font-body-lh: var(--e-global-typography-text-line-height);
  --np-font-body-small-size: var(--e-global-typography-np_body_small-font-size); --np-font-body-small-weight: var(--e-global-typography-np_body_small-font-weight); --np-font-body-small-lh: var(--e-global-typography-np_body_small-line-height);
  --np-font-caption-size: var(--e-global-typography-np_caption-font-size); --np-font-caption-weight: var(--e-global-typography-np_caption-font-weight); --np-font-caption-lh: var(--e-global-typography-np_caption-line-height);
  --np-font-label-size: var(--e-global-typography-accent-font-size); --np-font-label-weight: var(--e-global-typography-accent-font-weight); --np-font-label-lh: var(--e-global-typography-accent-line-height);
  --np-font-price-large-size: var(--e-global-typography-np_price_large-font-size); --np-font-price-large-weight: var(--e-global-typography-np_price_large-font-weight); --np-font-price-large-lh: var(--e-global-typography-np_price_large-line-height);
  --np-font-price-regular-size: var(--e-global-typography-np_price_regular-font-size); --np-font-price-regular-weight: var(--e-global-typography-np_price_regular-font-weight); --np-font-price-regular-lh: var(--e-global-typography-np_price_regular-line-height);
  --np-font-button-size: var(--e-global-typography-np_button-font-size); --np-font-button-weight: var(--e-global-typography-np_button-font-weight); --np-font-button-lh: var(--e-global-typography-np_button-line-height);

  /* ---- Layout ---- */
  --np-container:        1320px;
  --np-container-wide:   1440px; /* product archive / grid only */
  --np-container-narrow: 800px;
  --np-gutter:           16px;

  /* ---- Spacing (base 4) ---- */
  --np-space-1: 4px;
  --np-space-2: 8px;
  --np-space-3: 12px;
  --np-space-4: 16px;
  --np-space-5: 24px;
  --np-space-6: 32px;
  --np-space-7: 48px;
  --np-space-8: 64px;
  --np-space-9: 96px;

  /* ---- Radius ---- */
  --np-radius-sm:   6px;
  --np-radius-md:   10px;
  --np-radius-lg:   16px;
  --np-radius-pill: 999px;

  /* ---- Shadows (minimal) ---- */
  --np-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .06);
  --np-shadow-md: 0 8px 24px rgba(15, 23, 42, .12);

  /* ---- Motion ---- */
  --np-motion-fast:   150ms;
  --np-motion-normal: 200ms;
  --np-motion-slow:   300ms;
  --np-ease:          ease-out;

  /* ---- Z-index scale ---- */
  --np-z-base:     0;
  --np-z-raised:   10;
  --np-z-sticky:   100;
  --np-z-dropdown: 200;
  --np-z-overlay:  300;
  --np-z-modal:    400;
  --np-z-toast:    500;

  /* ---- Component sizes ---- */
  --np-touch:        44px;
  --np-field-height: 48px;
  --np-focus-ring:   2px solid var(--np-color-focus);
}

@media (min-width: 768px) {
  :root { --np-gutter: 24px; }
}

/* Motion: respect user preference globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}