/* ============================================================
   Life Zone — Design Tokens
   Extracted from mirror (lifezone.co.il)
   ============================================================ */

:root {

  /* ── Colors (Elementor Global Palette) ────────────────────── */
  --color-primary:     #31AEC4;       /* טורקיז — ראשי, כפתורים, הדגשות */
  --color-secondary:   #F16262;       /* אלמוג/אדום — אלמנטים משניים, CTA */
  --color-accent:      #F9AD4A;       /* ענבר/כתום — הדגשה */
  --color-text:        #000000;       /* טקסט שחור */
  --color-white:       #FFFFFF;       /* לבן — רקע ראשי, טקסט על רקע כהה */
  --color-transparent: #02010100;     /* שקוף (כמעט) — שכבות overlay */
  --color-gray:        #BAB9BA;       /* אפור — global gray */
  --color-light-gray:  #F6F6F6;       /* אפור בהיר — רקע אזורים מתחלפים */
  --color-overlay-dark:    rgba(0, 0, 0, 0.8);   /* overlay כהה — lightbox */
  --color-overlay-medium:  rgba(0, 0, 0, 0.5);   /* overlay בינוני — hero */
  --color-overlay-soft:    #0000008F;             /* overlay רך — טקסט על תמונה */
  --color-page-transition: #FFBC7D;               /* מעבר עמוד — כתום בהיר */

  /* ── Typography — Font Families ───────────────────────────── */
  /* Google Fonts: Heebo, Arimo, Open Sans, Noto Sans Hebrew, Open Sans Hebrew Condensed */
  /* Adobe Typekit (kit bqk3mhh): cofo-peshka-variable */

  --font-primary:           "Heebo", sans-serif;                    /* פונט ראשי — כותרות וגוף */
  --font-display:           "cofo-peshka-variable", sans-serif;     /* Adobe — כותרות דקורטיביות גדולות */
  --font-body-alt:          "Open Sans", sans-serif;                /* טקסט חלופי */
  --font-accent:            "Arimo", sans-serif;                    /* הדגשות באנגלית */
  --font-hebrew-noto:       "Noto Sans Hebrew", sans-serif;         /* ניווט, פוטר */
  --font-hebrew-condensed:  "Open Sans Hebrew Condensed", sans-serif; /* מפרטים טכניים, מחירים */

  /* ── Typography — Font Weights ────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-black:    900;

  /* ── Typography — Font Sizes ──────────────────────────────── */
  --text-xs:    12px;
  --text-sm:    16px;
  --text-base:  18px;
  --text-md:    20px;
  --text-lg:    21px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   32px;
  --text-4xl:   35px;
  --text-5xl:   40px;
  --text-6xl:   48px;
  --text-7xl:   50px;
  --text-8xl:   80px;
  --text-9xl:   92px;

  /* ── Typography — Line Height & Letter Spacing ────────────── */
  --leading-normal:   1.35;
  --tracking-normal:  0.2px;

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-0:     0px;
  --space-1:     3px;
  --space-2:     5px;
  --space-3:     10px;
  --space-4:     20px;
  --space-5:     50px;
  --space-6:     100px;
  --space-7:     200px;
  --widget-gap:  20px;               /* Elementor default widget spacing */

  /* ── Layout ───────────────────────────────────────────────── */
  --container-max:      1140px;
  --container-tablet:   1024px;
  --container-mobile:   767px;

  /* ── Padding Presets ──────────────────────────────────────── */
  --padding-btn-sm:    10px;
  --padding-btn:       12px 30px;
  --padding-btn-lg:    12px 50px;
  --padding-section:   0px 20px;

  /* ── Border Radius ────────────────────────────────────────── */
  --radius-none:    0px;
  --radius-full:    100px;           /* כפתורים מעוגלים */
  --radius-circle:  50%;             /* עיגולים (אייקונים, אווטארים) */

  /* ── Shadows ──────────────────────────────────────────────── */
  /* לא נמצאו box-shadow מותאמים אישית; Elementor defaults בלבד */

  /* ── Animations (Elementor Motion Effects) ────────────────── */
  /* 5 אנימציות scroll-reveal זוהו בשימוש: */

  /* fadeInUp    — כניסה מלמטה (עיקרי — רוב האלמנטים) */
  /* fadeInRight — כניסה מימין (RTL: מופיע משמאל) */
  /* fadeInLeft  — כניסה משמאל (RTL: מופיע מימין) */
  /* fadeIn      — מופיע בעמעום */
  /* zoomIn      — כניסה עם הגדלה */
}

/* ── Animation Keyframes ──────────────────────────────────── */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

/* ── Utility Classes for Scroll-Reveal ────────────────────── */

.reveal {
  opacity: 0;
}

.reveal.active {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.reveal-up.active       { animation-name: fadeInUp; }
.reveal-right.active    { animation-name: fadeInRight; }
.reveal-left.active     { animation-name: fadeInLeft; }
.reveal-fade.active     { animation-name: fadeIn; }
.reveal-zoom.active     { animation-name: zoomIn; }