/* ==========================================================
   tokens.css — המקום היחיד לשינוי המראה של האתר.
   כשהלוגו יגיע: מחליפים כאן את הצבעים, עם אותם שמות משתנים.
   ========================================================== */

:root {
  /* ---- פלטה (זמנית, עד הלוגו) ---- */
  --color-ink:    #262324;  /* טקסט ראשי */
  --color-petrol: #167373;  /* צבע מוביל: כותרות, קישורים, כפתורים עם טקסט לבן */
  --color-sage:   #80A6A2;  /* מסגרות ורקעי כרטיסים */
  --color-cream:  #F2EADF;  /* רקע האתר */
  --color-coral:  #F27E63;  /* הדגשה, כפתור "דברו איתי" (טקסט כהה בלבד!) */

  /* גוונים נגזרים מהפלטה בלבד */
  --color-paper:       #F8F3EC; /* cream בהיר יותר: פספרטו למסגרות */
  --color-cream-deep:  #E7DCCD; /* cream כהה מעט: קווים ומשטחים */
  --color-sage-soft:   #D5E0DC; /* sage מדולל: רקע רצועות */
  --color-sage-deep:   #5E8581; /* sage כהה: קווי מסגרת */
  --color-petrol-deep: #0F5A5A; /* petrol כהה: hover */
  --color-coral-soft:  #F8CDBF; /* coral מדולל */
  --color-coral-deep:  #8C5044; /* coral מוכהה לכיוון ink: טקסט שגיאה (5.3:1 על cream) */
  --color-white:       #FFFFFF;

  /* ניגודיות מאושרת (WCAG AA):
     ink/cream 13:1 | petrol/cream 4.7:1 | white/petrol 5.6:1 | ink/coral 5.9:1 | ink/sage 5.9:1
     אסור: coral או sage כטקסט על cream, טקסט לבן על coral */

  /* ---- טיפוגרפיה ---- */
  --font-display: "Karantina", "IBM Plex Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
  --font-body: "IBM Plex Sans Hebrew", "Arial Hebrew", "Segoe UI", Arial, sans-serif;

  --text-xs:  0.8125rem;
  --text-sm:  0.9375rem;
  --text-md:  1.0625rem;
  --text-lg:  1.25rem;
  --text-xl:  clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --display-s: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem);
  --display-m: clamp(3rem, 2rem + 4.5vw, 5.5rem);
  --display-l: clamp(4.5rem, 2.5rem + 11vw, 11rem);

  --leading-tight: 0.92;
  --leading-body: 1.7;
  --measure: 62ch;

  /* ---- מרווחים ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: clamp(4.5rem, 3rem + 6vw, 8rem);
  --page-pad: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --page-max: 1240px;

  /* ---- צורות: כלל אחד לכל האתר ----
     מסגרות ותמונות: 14px | כפתורים: pill | שדות טופס: 10px */
  --radius-frame: 14px;
  --radius-field: 10px;
  --radius-pill: 999px;
  --mat: clamp(8px, 1.2vw, 14px); /* עובי הפספרטו סביב וידאו/תמונה */

  /* ---- תנועה ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-ui: 220ms;
  --dur-reveal: 900ms;

  /* ---- מעבר בין סקשנים: וילון נערם ---- */
  --radius-curtain: clamp(20px, 3vw, 40px);       /* פינות עליונות של סקשן שעולה */
  --curtain-shadow: 0 -18px 40px rgb(38 35 36 / 0.18);
  --curtain-scale: 0.94;                            /* הסקשן הקודם מתכווץ עד */
  --curtain-dim: 0.45;                              /* ומחשיך עד (שכבת ink) */

  /* ---- שכבות ---- */
  --z-header: 10;
  --z-fab: 20;
  --z-banner: 30;
  --z-dialog: 40;
}