/* ============================================================
   tokens.css — שפת העיצוב של מוני
   ------------------------------------------------------------
   הפלטה: ירוק, ירוק בהיר, לבן ושחור.

   שתי החלטות שמחזיקות את כל השאר:

   1. ירוק = מותג, פעולה, וכסף שחזר. **לא** "הכול בסדר".
      לחומרת הממצאים יש סולם נפרד, ו"תקין" הוא היעדר ממצא —
      בדיו שקט. אחרת מסך מלא בצבע המותג נקרא כ"אין בעיות".

   2. השחור אינו שטוח ואינו רקע לכל האפליקציה. הוא **משטח
      חתימה אחד בכל מסך** — הלוח שבו יושב הסכום — עם ספרות
      בניאון ירוק. זה נותן את התחושה העתידנית בלי להפוך
      אפליקציה של נתונים למסך כהה שקשה לעבוד בו כל היום.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- דיו: שחור עם נטייה ירקרקה, לא שחור שטוח ---------- */
  --ink:        #0A0F0C;   /* כותרות, משטח החתימה */
  --ink-2:      #16201B;   /* משטח כהה משני */
  --ink-3:      #4F6058;   /* טקסט משני */
  --ink-4:      #87978F;   /* רמז, תווית */

  /* ---------- נייר ---------- */
  --paper:      #FFFFFF;
  --paper-2:    #F2F7F4;   /* רקע העמוד, לבן עם נטייה ירקרקה */
  --line:       #E2EAE5;
  --line-2:     #CBD9D2;

  /* ---------- ירוק ---------- */
  --green:      #0FA968;   /* פעולה וזהות */
  --green-deep: #0A7A4B;   /* ירוק לטקסט על לבן — ניגודיות תקינה */
  --green-mid:  #AFEBCD;   /* ירוק בהיר */
  --green-soft: #E7F8EF;   /* רקע רך */
  --neon:       #3DF29B;   /* רק על משטח כהה. לעולם לא על לבן */

  /* ---------- חומרת ממצא: סולם נפרד מהמותג ---------- */
  --high:       #DB3B40;
  --high-soft:  #FDECEC;
  --med:        #D98300;
  --med-soft:   #FFF4E2;
  --info:       var(--ink-3);
  --info-soft:  var(--paper-2);

  /* ---------- מרווח, פינות, צל ---------- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --pad:  16px;
  --gap:  12px;

  /* צל רך בלבד. בלי זוהר ובלי שכבות — זוהר נראה מיושן */
  --shadow-1: 0 1px 2px rgba(10, 15, 12, .04), 0 2px 8px rgba(10, 15, 12, .04);
  --shadow-2: 0 2px 6px rgba(10, 15, 12, .06), 0 12px 32px rgba(10, 15, 12, .07);
  --shadow-ink: 0 8px 30px rgba(10, 15, 12, .28);

  /* ---------- תנועה: איטית ורכה ---------- */
  --t-fast: 140ms;
  --t:      220ms;
  --t-slow: 420ms;
  --ease:   cubic-bezier(.22, .61, .36, 1);

  /* ---------- טיפוגרפיה ---------- */
  --font: "Heebo", "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* ספרות בעמודה חייבות רוחב אחיד, אחרת סכומים לא מתיישרים */
  --font-num: "SF Mono", "Menlo", ui-monospace, monospace;
}

/* ---------- מצב כהה ---------- */
/* נתמך, אך אינו ברירת המחדל: זו אפליקציה שעובדים בה שעות על נתונים. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:        #F2F7F4;
  --ink-2:      #DCE7E1;
  --ink-3:      #9FB0A8;
  --ink-4:      #6E7F77;
  --paper:      #101713;
  --paper-2:    #0A0F0C;
  --line:       #1E2A24;
  --line-2:     #2A3831;
  --green:      #1FD186;
  --green-deep: #3DF29B;
  --green-mid:  #1A4634;
  --green-soft: #0F2A1E;
  --high-soft:  #2A1416;
  --med-soft:   #2A1F0C;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
}

/* ---------- בסיס ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper-2);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 .4em;
  line-height: 1.2;
  letter-spacing: -.02em;      /* כותרות עתידניות: צפופות מעט */
  font-weight: 700;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 .8em; }

a { color: var(--green-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* כל סכום באפליקציה עובר דרך המחלקה הזאת. רוחב ספרה אחיד
   הוא מה שמבדיל טבלת כספים מקצועית מטבלה שנראית זרוקה. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}