/* ==========================================================================
   במזרח — tokens.css
   מקור יחיד לצבע, ריווח, טיפוגרפיה, רדיוסים, תנועה ושכבות.
   נגזר מ-docs/prototypes/*.html (13.9.2026) + PLAN §8 + research/tech/fonts.
   חוק: אסור ערך בקוד CSS שלא מוגדר כאן. אין הצללות. צבע פעולה יחיד: ירקן.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- צבע: ניוטרלים (PLAN 8.2) ------------------------------------- */
  --bg: #FFFFFF;
  --surface: #F6F7F8;
  --line: #E4E6EA;
  --text: #16181C;
  --text-muted: #5F646D;

  /* ---- צבע: ירקן, הצבע היחיד ---------------------------------------- */
  --jade: #14584A;
  --jade-strong: #0B3A30;   /* hover / active / כותרות על רקע בהיר */
  --jade-mid: #7FA79A;      /* גבולות מודגשים, אייקונים משניים */
  --jade-soft: #E7EFEC;     /* רקע תגיות, שורות מודגשות */

  /* ---- צבע: תפקידים (aliases — הקוד משתמש בהם, לא בערכים) ---------- */
  --color-action: var(--jade);
  --color-action-hover: var(--jade-strong);
  --color-action-contrast: #FFFFFF;
  --color-link: var(--jade);
  --color-link-hover: var(--jade-strong);
  --color-focus: var(--jade);
  --color-selection-bg: var(--jade-soft);
  --color-logo: var(--text);                 /* הלוגו = דיו כהה, יושב על --text */

  /* טונים למודולי נתונים (רצועת חודשים, טבלאות). בלי צבע שני: הבידול
     הוא ירקן/ניוטרל + תווית טקסט בכל תא (PLAN 4.5, WCAG). */
  --tone-good-bg: var(--jade-soft);
  --tone-good-fg: var(--jade-strong);
  --tone-mid-bg: var(--surface);
  --tone-mid-fg: var(--text);
  --tone-poor-bg: var(--line);
  --tone-poor-fg: var(--text-muted);

  /* ---- טיפוגרפיה: משפחות (מקומי, woff2; ראה research/tech/fonts) ---- */
  --font-head: "Heebo", "Arial Hebrew", Arial, system-ui, sans-serif;
  --font-body: "Open Sans", "Heebo", "Arial Hebrew", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;

  /* משקלים בפועל באבות-הטיפוס: 400/500/700 לכותרות, 400/600 לגוף */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- טיפוגרפיה: סולם גדלים (מהאבות-טיפוס: 12·13·14·15·16·17·18·20·22·26·30·46) */
  --fs-2xs: 0.75rem;                                   /* 12px  תוויות תא, כיתוב */
  --fs-xs: 0.8125rem;                                  /* 13px  מטא, breadcrumb */
  --fs-sm: 0.875rem;                                   /* 14px  טבלאות, כרטיסים */
  --fs-base: 0.9375rem;                                /* 15px  גוף ברירת מחדל */
  --fs-md: 1.0625rem;                                  /* 17px  גוף מודגש / lede */
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 18→20 H4 */
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);  /* 22→26 H3 */
  --fs-2xl: clamp(1.625rem, 1.4rem + 1.1vw, 1.875rem); /* 26→30 H2 */
  --fs-display: clamp(2rem, 1.4rem + 2.8vw, 2.875rem); /* 32→46 H1 */

  --lh-tight: 1.15;      /* כותרות */
  --lh-snug: 1.3;        /* כותרות משנה, כרטיסים */
  --lh-base: 1.5;        /* ממשק, טבלאות */
  --lh-relaxed: 1.65;    /* גוף קריאה */
  --lh-body: 1.75;       /* body ברירת מחדל */
  --lh-loose: 1.8;       /* רשימות בכרטיסים */
  --lh-list: 2.1;        /* רשימות קישורים בפוטר */

  /* ---- רוחבי קריאה (measure) ---- */
  --measure-prose: 70ch;   /* פסקה רגילה (p) */
  --measure-sub: 52ch;     /* כותרת-משנה של סקשן */
  --measure-faq: 62ch;     /* תשובת FAQ */
  --measure-answer: 78ch;  /* משפט תשובה / הערה */
  --measure-lead: 34em;    /* lead בעמוד פנימי */
  --measure-foot: 26em;    /* "על האתר" בפוטר */
  --list-indent: 1.25em;
  --list-indent-prose: 1.4em;

  --tracking-display: -0.7px;   /* H1 */
  --tracking-heading: -0.6px;   /* H2 */
  --tracking-normal: 0;

  /* ---- ריווח (בסיס 4px; הערכים שמופיעים באבות-הטיפוס) ---------------- */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 18px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 28px;
  --space-11: 32px;
  --space-12: 40px;
  --space-13: 56px;
  --space-14: 64px;

  /* תפקידי ריווח */
  --gap-inline: var(--space-4);      /* בין תגיות/כפתורים בשורה (10) */
  --gap-grid: var(--space-6);        /* בין כרטיסים בגריד (16) */
  --gap-grid-wide: 26px;             /* בין עמודות בפריסת עמוד */
  --pad-card: 26px 28px;             /* כרטיס תוכן */
  --pad-card-compact: var(--space-6) var(--space-7);
  --pad-control: 8px 14px;           /* כפתור/קלט */
  --pad-chip: 3px 10px;              /* תגית קטנה */
  --section-gap: var(--space-13);    /* בין סקשנים; לא אחיד — ראה 8.2.1 */
  --section-gap-lg: var(--space-14);

  /* ---- פריסה --------------------------------------------------------- */
  --wrap: 1180px;
  --wrap-narrow: 760px;              /* טור קריאה */
  --measure: 30em;                   /* רוחב שורה מקסימלי לפסקה */
  --gutter: var(--space-9);          /* שוליים צדדיים במובייל/דסקטופ */
  --bp-sm: 640px;                    /* לתיעוד; media queries לא קוראים var */
  --bp-md: 980px;

  /* ---- מבנה: מידות קבועות (הקוד לא כותב px; רק טוקנים) ---------- */
  --header-h: 68px;
  --header-h-sm: 60px;
  --logo-h: 40px;
  --logo-h-sm: 34px;
  --control-h: 48px;        /* כפתור ראשי, קלט */
  --tap: 40px;              /* יעד מגע: כפתור אייקון */
  --avatar: 34px;
  --avatar-lg: 52px;
  --cell-h: 32px;           /* תא ברצועת חודשים */
  --score-w: 26px;          /* פס ציון "למי מתאים" */
  --score-h: 5px;
  --mosaic-h: 430px;
  --mosaic-h-md: 320px;
  --mosaic-h-sm: 240px;
  --gallery-h: 400px;
  --hero-max-h: 620px;
  --hero-max-h-sm: 420px;
  --table-min: 520px;       /* טבלת נתונים: מתחת לזה גלילה פנימית */
  --strip-min: 660px;       /* רצועת חודשים */
  --strip-label-w: 180px;   /* עמודת שם האזור ברצועה (table-layout: fixed → 12 החודשים ברוחב זהה) */
  --col-min: 220px;         /* עמודת key/value */
  --kv-key-w: 34%;          /* עמודת המפתח בטבלת מפתח/ערך (מודול כניסה) */

  /* ---- רדיוסים (PLAN 8: 16 לתמונות/כרטיסים, 10 לפקדים) -------------- */
  --r-xs: 4px;        /* תגיות תא, badges זעירים */
  --r-control: 10px;  /* כפתורים, קלטים, טאבים */
  --r-card: 16px;     /* כרטיסים, תמונות, מודולים */
  --r-pill: 999px;    /* צ'יפים */
  --r-round: 50%;     /* אווטאר/אייקון עגול */

  /* ---- קווים והצללות ------------------------------------------------- */
  --line-w: 1px;
  --hairline: 2px;          /* קו הדגשה: outline של "עכשיו", border-top של פוסט, חץ FAQ */
  --underline-offset: 3px;
  --focus-offset: 3px;
  --icon-baseline: -5px;    /* יישור אייקון-תא לטקסט */
  --border: var(--line-w) solid var(--line);
  --border-strong: var(--line-w) solid var(--jade-mid);
  --shadow: none;     /* אפס הצללות. מוגדר במפורש כדי שאף אחד לא ימציא. */
  --focus-ring: 0 0 0 3px var(--jade-soft), 0 0 0 5px var(--jade);

  /* ---- תנועה --------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- שכבות --------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 10;
  --z-header: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* ---- אייקונים (Phosphor Regular, sprite מקומי) -------------------- */
  --icon-xs: 14px;          /* בתוך תגית */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: currentColor;

  /* ---- תמונות -------------------------------------------------------- */
  --ratio-hero: 16 / 9;
  --ratio-hero-wide: 21 / 9;  /* .hero-bleed בדסקטופ */
  --ratio-hero-sm: 4 / 3;     /* .hero-bleed במובייל */
  --ratio-region: 2 / 1;      /* כרטיס אזור */
  --ratio-card: 3 / 2;
  --ratio-square: 1 / 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}