/* =========================================================
   TOKENS — שחור על לבן. סקאלה תקנית. בלי גרדיאנטים.
   הערכים כאן ברירת מחדל; app.js דורס אותם מ-theme ב-site.json
   ========================================================= */

/* ה-@font-face יושב ב-font.css — שם מחליפים פונט */

:root {
  /* ---------- צבע ----------
     מונוכרום מלא. הדגשה = היפוך לשחור, לא צבע. */
  --bg: #FFFFFF;
  --surface: #F6F6F7;     /* משטח עדין, לכרטיסים ולשדות */
  --line: #E3E3E6;        /* קו שיער — הגבול היחיד באתר */
  --line-strong: #C9C9CE;
  --ink: #0B0B0C;         /* טקסט ראשי */
  --muted: #6E6E76;       /* טקסט משני — 5.4:1 על לבן */
  --accent: #0B0B0C;      /* מצבים פעילים. שנו כאן כדי להוסיף צבע מותג */
  --on-accent: #FFFFFF;

  /* עותק קפוא של שני הקטבים.
     ערכי custom properties מוחלפים בזמן חישוב, ולכן היורשים מקבלים
     את הערך של :root — גם אם --ink/--bg נדרסים בהמשך העץ.
     זה מה שמאפשר לסקשן ההפוך להתהפך בלי ערכים קשיחים. */
  --ink-0: var(--ink);
  --bg-0: var(--bg);

  /* ---------- טיפוגרפיה ----------
     --font והמשקלים מוגדרים ב-font.css, ליד ה-@font-face, ונדרסים
     מ-theme.font ב-site.json. הם לא מוגדרים כאן בכוונה: tokens.css
     נטען אחרי font.css, ולכן הגדרה כאן הייתה דורסת אותה בשקט. */

  /* סקאלה נזילה בטווח התקני של בניית אתרים */
  --fs-h1:    clamp(2rem, 5.2vw, 3.25rem);        /* 32 → 52 */
  --fs-h2:    clamp(1.5rem, 3.2vw, 2.125rem);     /* 24 → 34 */
  --fs-h3:    clamp(1.0625rem, 1.5vw, 1.25rem);   /* 17 → 20 */
  --fs-lead:  clamp(1rem, 1.3vw, 1.125rem);       /* 16 → 18 */
  --fs-body:  1rem;                               /* 16 */
  --fs-sm:    .875rem;                            /* 14 */
  --fs-xs:    .8125rem;                           /* 13 */
  --fs-label: .6875rem;                           /* 11, tracked */

  --lh-tight: 1.15;
  --lh-snug: 1.4;
  --lh-body: 1.65;

  /* ---------- מרווח ---------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;

  --pad-x: clamp(1.25rem, 5vw, 3rem);          /* שוליים צדדיים */
  --section-y: clamp(3.5rem, 7.5vw, 6.5rem);   /* ריפוד אנכי לסקשן */
  --maxw: 1160px;
  --measure: 68ch;                             /* אורך שורה מקסימלי */

  --header-h: 60px;                            /* מסונכרן עם scroll-padding */

  /* ---------- צורה ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------- תנועה ---------- */
  --speed: 1;
  --t-fast: calc(.15s / var(--speed));
  --t: calc(.28s / var(--speed));
  --t-slow: calc(.6s / var(--speed));
  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --header-h: 72px; }
}

/* ---------- ניגודיות גבוהה ----------
   שחור־לבן טהור, בלי אפורים, גבולות מודגשים */
html[data-contrast='high'] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --line: #000000;
  --line-strong: #000000;
  --ink: #000000;
  --muted: #000000;
  --accent: #000000;
  --on-accent: #FFFFFF;
}

/* ---------- מצב כהה (מתג "היפוך צבעים" בווידג'ט הנגישות) ---------- */
html[data-invert='on'] {
  --bg: #0B0B0C;
  --surface: #161617;
  --line: #2A2A2D;
  --line-strong: #3E3E43;
  --ink: #F4F4F5;
  --muted: #A1A1AA;
  --accent: #F4F4F5;
  --on-accent: #0B0B0C;
  color-scheme: dark;
}