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

   נגישות:
   - html נשאר 100% כדי שהגדרת גודל הגופן של הדפדפן/מערכת תמשיך לעבוד.
   - גודל הבסיס הוא 1rem (16px בברירת מחדל) ומוכפל בהגדרת גודל הטקסט.
   - יעדי הלחיצה נמדדים ב-rem ולכן נשארים 56px ומעלה גם בטקסט קטן.
   - יעד ניגודיות: 7:1 לטקסט רגיל, 4.5:1 למשני. יש גם מצב ניגודיות גבוהה.
   ========================================================================== */

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/heebo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  /* ---------- טיפוגרפיה ---------- */
  --font: 'Heebo', 'Rubik', 'Segoe UI', 'Arial Hebrew', system-ui, sans-serif;
  --text-scale: 1;
  /*
   * 1rem = גודל הטקסט הרגיל של הדפדפן (16px כברירת מחדל).
   * הטקסט נשאר בגודל תקני ולא מנופח, בזמן שיעדי הלחיצה (--tap) נשארים
   * 56px ומעלה — הם נמדדים ב-rem ולא מושפעים מגודל הגופן.
   * מי שצריך גדול יותר מגדיל בהגדרות, וההגדלה מכפילה את --text-scale.
   */
  --fs-base: calc(1rem * var(--text-scale));

  --fs-xs: 0.78em;
  --fs-sm: 0.875em;
  --fs-md: 1em;
  --fs-lg: 1.15em;
  --fs-xl: 1.4em;
  --fs-2xl: 1.75em;
  --fs-3xl: 2.15em;

  --lh-tight: 1.2;
  --tracking-tight: -0.01em;
  --lh: 1.55;

  /* ---------- מרווחים (סקאלת 4) ---------- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;

  /* ---------- יעדי לחיצה ---------- */
  --tap: 3.5rem;        /* 56px — המינימום במערכת */
  --tap-lg: 4rem;       /* 64px — פעולות ראשיות */
  --gap-tap: 0.75rem;   /* מרווח מינימלי בין יעדי לחיצה */

  /* ---------- פינות ---------- */
  --r-sm: 0.5rem;
  --r: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.25rem;
  --r-full: 999px;

  /* ---------- תנועה ---------- */
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  --focus-w: 3px;
  --shell-max: 56rem;
  --nav-w: 16.5rem;
}

/* ================= מצב בהיר (ברירת המחדל של הטוקנים) ================= */
/* fabfin: ניטרלים קרירים, אקסנט אינדיגו, ירוק/אדום שמורים לסכומים בלבד. */
:root {
  color-scheme: light;

  --bg: #f3f5f9;
  --bg-grad: none;
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --surface-3: #e8ecf3;
  --line: #e3e8ef;
  --line-strong: #c3ccd9;

  --text: #0d1524;
  --text-2: #475467;
  --text-3: #5d6b80;
  --on-accent: #ffffff;

  --accent: #4338ca;
  --accent-2: #6366f1;
  --accent-soft: #eef0ff;
  --accent-line: #c7cbf9;
  --primary: #4338ca;
  --on-primary: #ffffff;

  --pos: #067647;
  --pos-soft: #e7f6ee;
  --neg: #b42318;
  --neg-soft: #fdeceb;
  --warn: #9a4a06;
  --warn-soft: #fef4e6;
  --info: #175cd3;
  --info-soft: #eaf2ff;

  /* ניווט צדדי — כהה תמיד, כמו במערכות פיננסיות */
  --nav-bg: #0b1224;
  --nav-bg-2: #111a33;
  --nav-line: #1c2744;
  --nav-text: #e7ebf5;
  --nav-text-2: #9aa6c2;
  --nav-active: #ffffff;
  --nav-active-bg: rgba(129, 140, 248, 0.18);

  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 4px 10px -2px rgba(16, 24, 40, 0.07), 0 14px 32px -8px rgba(16, 24, 40, 0.14);
  --shadow-3: 0 -2px 10px rgba(16, 24, 40, 0.06), 0 -24px 60px rgba(16, 24, 40, 0.16);
  --scrim: rgba(10, 16, 30, 0.5);
}

/* ================= מצב כהה ================= */
/* ברירת המחדל של המערכת היא כהה, ולכן גם "auto" נופל לכהה כשהמכשיר כהה. */
:root[data-theme='dark'],
:root:not([data-theme='light']) {
  color-scheme: dark;

  --bg: #080d18;
  --bg-grad: none;
  --surface: #0f1626;
  --surface-2: #151e31;
  --surface-3: #1d2840;
  --line: #212c44;
  --line-strong: #36445f;

  --text: #eef2f9;
  --text-2: #b4bfd1;
  --text-3: #8e9bb2;
  --on-accent: #0c1030;

  --accent: #a5b4fc;
  --accent-2: #818cf8;
  --accent-soft: #1b2046;
  --accent-line: #3a4390;
  --primary: #5552e0;
  --on-primary: #ffffff;

  --pos: #4ad79a;
  --pos-soft: #0f2a20;
  --neg: #ff8f86;
  --neg-soft: #2d1519;
  --warn: #fbbf4d;
  --warn-soft: #2a2010;
  --info: #7fb5ff;
  --info-soft: #102340;

  --nav-bg: #060a14;
  --nav-bg-2: #0b1122;
  --nav-line: #182137;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px -2px rgba(0, 0, 0, 0.45), 0 16px 36px -8px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 -2px 12px rgba(0, 0, 0, 0.5), 0 -28px 70px rgba(0, 0, 0, 0.6);
  --scrim: rgba(2, 4, 10, 0.7);
}

/* ================= ניגודיות גבוהה ================= */
:root[data-contrast='high'] {
  --line: var(--line-strong);
  --text-2: var(--text);
  --text-3: var(--text);
}
:root[data-contrast='high']:not([data-theme='light']) {
  --bg: #000000;
  --bg-grad: none;
  --surface: #0a0d12;
  --surface-2: #141a22;
  --surface-3: #1e2632;
  --line: #7d8896;
  --line-strong: #aab4c1;
  --text: #ffffff;
  --accent: #c7d0ff;
  --pos: #86f0b6;
  --neg: #ffb1ab;
  --info: #a8d6ff;
  --warn: #ffd970;
}
:root[data-contrast='high'][data-theme='light'] {
  --bg: #ffffff;
  --bg-grad: none;
  --surface: #ffffff;
  --surface-2: #f0f2f6;
  --surface-3: #e3e7ee;
  --line: #6a7480;
  --line-strong: #3d4650;
  --text: #000000;
  --accent: #312e81;
  --pos: #024a2d;
  --neg: #7d1710;
  --info: #0b3c6e;
  --warn: #5c3500;
}

/* ================= גודל טקסט ================= */
:root[data-text='small']  { --text-scale: 0.92; }
:root[data-text='large']  { --text-scale: 1.15; }
:root[data-text='xlarge'] { --text-scale: 1.32; }

/* ================= תנועה מופחתת ================= */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; --dur-slow: 1ms; }
}
:root[data-motion='reduce'] { --dur: 1ms; --dur-slow: 1ms; }