/* ═══════════════════════════════════════════════════════════════════
   tokens.css — אוצר המילים של העיצוב.

   כל צבע, מרווח, גודל טקסט ורדיוס בפרויקט מגיע מכאן. main.css
   ושאר הממשק משתמשים אך ורק במשתנים האלה, לעולם לא בערך ישיר.

   הצבעים הראשי והמשני מוזרקים בזמן ריצה מ-THEME שב-config.js,
   ולכן הערכים כאן הם רק ברירת מחדל למקרה שהסקריפט טרם נטען.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── מותג. נדרסים מ-config.js ─────────────────────────────── */
  --brand-primary:      #0f5c8c;
  --brand-primary-dark: #0b4569;
  --brand-secondary:    #12a19a;

  /* ── ניטרלים ────────────────────────────────────────────────
     אפורים עם הטיה קלה לכחול, כדי שיישבו עם הצבע הראשי
     במקום להיראות כאילו נבחרו כברירת מחדל.                    */
  --ground:      #f4f6f8;   /* רקע העמוד */
  --surface:     #ffffff;   /* כרטיסים, שדות */
  --surface-alt: #eef2f5;   /* אזורים מודגשים, סיכום */
  --ink:         #16212b;   /* טקסט ראשי */
  --ink-muted:   #55677a;   /* תוויות, הסברים */
  --ink-faint:   #8496a6;   /* placeholder, טקסט משני */
  --line:        #d6dfe6;   /* מסגרות, מפרידים */
  --line-strong: #b4c2cd;   /* מסגרת שדה במצב hover */

  /* ── צבעים סמנטיים. נפרדים מצבע המותג בכוונה ─────────────── */
  --ok:          #1f7a52;
  --ok-bg:       #e7f3ed;
  --warn:        #8a6209;
  --warn-bg:     #fbf3e2;
  --error:       #b3271b;
  --error-bg:    #fdeceb;
  --success:     #176b45;
  --success-bg:  #e9f6ef;

  /* ── טיפוגרפיה ──────────────────────────────────────────────
     Heebo מאוחסן אצלנו ב-assets/fonts, ללא CDN חיצוני.
     שאר הרשימה היא נפילה חיננית לפונטי מערכת עבריים.          */
  --font-body: "Heebo", "Segoe UI", system-ui, -apple-system,
               "Arial Hebrew", "Noto Sans Hebrew", sans-serif;

  /* סולם טיפוגרפי. 16px הוא הבסיס — קטן מזה גורם ל-iOS
     להגדיל את המסך אוטומטית בפוקוס על שדה, וזה מרגיש שבור. */
  --text-xs:   0.8125rem;   /* 13px — הערות */
  --text-sm:   0.9375rem;   /* 15px — תוויות, הסברים */
  --text-base: 1rem;        /* 16px — קלט וטקסט רץ. מינימום מוחלט */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.375rem;    /* 22px — כותרות אזורים */
  --text-2xl:  1.75rem;     /* 28px — כותרת העמוד */

  --leading-tight: 1.25;
  --leading-body:  1.7;     /* עברית צריכה יותר אוויר בין שורות */

  /* ── מרווחים. סולם של 4px ──────────────────────────────────── */
  --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;

  /* ── צורה ──────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-card:  0 1px 2px rgb(22 33 43 / 0.06),
                  0 4px 16px rgb(22 33 43 / 0.05);
  --shadow-float: 0 2px 4px rgb(22 33 43 / 0.08),
                  0 12px 28px rgb(22 33 43 / 0.10);

  /* ── שטח מגע ────────────────────────────────────────────────
     44px הוא המינימום שאפשר להקיש עליו בביטחון על מובייל.
     כל כפתור ושדה בפרויקט מכבד את זה.                         */
  --tap-target: 44px;

  /* ── פריסה ─────────────────────────────────────────────────── */
  --content-max: 34rem;     /* רוחב הטופס בדסקטופ */

  /* ── תנועה ─────────────────────────────────────────────────── */
  --ease:     cubic-bezier(0.2, 0, 0.2, 1);
  --duration: 180ms;
}

/* מכבדים העדפת מערכת להפחתת תנועה. לא קישוט — יש אנשים
   שאנימציה גורמת להם לסחרחורת.                                */
@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}