/* ════════════════════════════════════════════════════════════
   TOKENS — השפה העיצובית. זה הקובץ היחיד שמשנים כדי לשנות מראה.
   הערכים כאן הם הבייסליין ("מקור") שמשחזר את הסרטון.
   הערכות החלופיות מוגדרות ב-js/app.js ומחליפות את אותם משתנים.
   ════════════════════════════════════════════════════════════ */
:root {
  /* צבע */
  --accent:       #1568E0;
  --accent-deep:  #0A3FBF;
  --accent-soft:  #E9F1FD;
  --accent-ink:   #FFFFFF;
  --bg:           #F1F4F9;
  --surface:      #FFFFFF;
  --surface-2:    #F7F9FC;
  --ink:          #12213A;
  --ink-2:        #4A5568;
  --ink-3:        #8B95A5;
  --line:         #E5E9F0;
  --pos:          #12A97C;
  --neg:          #D8443C;
  --pending:      #7C5CD6;

  /* צורה */
  --r-lg: 16px;
  --r-md: 10px;
  --r-sm: 8px;

  /* ריווח */
  --gap:   14px;
  --pad-y: 16px;

  /* טיפוגרפיה */
  --font:      'Assistant', system-ui, sans-serif;
  --fs-hero:   40px;
  --fs-title:  17px;
  --fs-body:   15px;
  --fs-cap:    13px;

  /* גובה — במקור ההפרדה בקו, לא בצל */
  --shadow: 0 1px 2px rgba(18,33,58,.05);
}