/*
 * אספנים — טוקנים של מערכת העיצוב.
 *
 * "Neo-Anime Dark": כהה רב-שכבתי בהשראת משחקי פרימיום יפניים, עם
 * מבנה נתונים של אפליקציה פיננסית. כל ערך שחוזר יותר מפעם אחת יושב
 * כאן, ולכן כיול של הפלטה או של הריווח הוא שינוי בקובץ אחד.
 *
 * הקובץ הזה לא מכיל אף כלל שמצייר משהו. רק ערכים.
 */

:root {
  /* ---------- שכבות משטח (Surface Elevation) ---------- */
  /* העומק נוצר מהבדלי בהירות בין שכבות, לא מצללים כבדים. */
  --surface-0: #0a0d14; /* קנבס בסיס */
  --surface-1: #131823; /* כרטיס */
  --surface-2: #1e2536; /* ריחוף / פעיל */
  --surface-3: #28324a; /* נבחר / מוגבה */

  /* קו שיער. שקוף ולא צבע מלא, כדי שיעבוד מעל כל שכבה. */
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* ---------- טקסט ---------- */
  --text-1: #f1f4fa; /* כותרות וערכים */
  --text-2: #9aa6bd; /* משני */
  --text-3: #62708c; /* רמז, מושבת */

  /* ---------- מותג ---------- */
  --brand: #8b5cf6; /* סגול סייברפאנק */
  --brand-2: #06b6d4; /* טורקיז זוהר */
  --brand-gradient: linear-gradient(112deg, var(--brand), var(--brand-2));

  /*
   * --accent הוא הצבע שכל רכיב קורא. ברירת המחדל היא המותג, ומיכל
   * עם data-game דורס אותו. כך אותו כרטיס מקבל את זהות המשחק שלו
   * בלי אף כלל נוסף.
   */
  --accent: var(--brand);
  --accent-2: var(--brand-2);

  /* ---------- מצב פיננסי ---------- */
  /* ירוק וכחול-אדום שנבחרו להיות מובחנים גם לעיוורי צבעים אדום-ירוק. */
  --up: #10b981;
  --up-glow: rgba(16, 185, 129, 0.35);
  --down: #f43f5e;
  --down-glow: rgba(244, 63, 94, 0.35);
  --flat: var(--text-3);

  /* ---------- טיפוגרפיה ---------- */
  --font-ui: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  /* מספרים בפונט ברוחב קבוע: מחיר שמתעדכן לא מזיז את מה שסביבו. */
  --font-num: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-micro: 0.6875rem; /* 11 — תגיות */
  --fs-caption: 0.75rem; /* 12 — מטא-דאטה */
  --fs-body: 0.875rem; /* 14 — ברירת מחדל במובייל */
  --fs-lead: 1rem; /* 16 */
  --fs-title: 1.125rem; /* 18 — כותרת מסך */
  --fs-display: 1.5rem; /* 24 */
  --fs-hero: 2.25rem; /* 36 — שווי התיק */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  /* ---------- ריווח (סולם 4pt) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ---------- רדיוסים ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---------- צללים והילות ---------- */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.6);
  --glow-accent: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);

  /* ---------- תנועה ---------- */
  /* עקומה עם "יציאה" חדה: התנועה מרגישה מיידית ולא נגררת. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.14s;
  --t-base: 0.22s;
  --t-slow: 0.4s;

  /* ---------- אזורים מוגנים ומידות שלד ---------- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --tabbar-h: 64px;
  --topbar-h: 56px;
  --rail-w: 240px;
  --rail-w-collapsed: 72px;
  --drawer-w: 380px;
  --content-max: 1440px;

  /* יחס קלף TCG סטנדרטי */
  --card-ratio: 63 / 88;

  --z-nav: 40;
  --z-drawer: 50;
  --z-sheet: 60;
  --z-overlay: 70;
  --z-toast: 80;
}

/*
 * ---------- זהות לפי משחק ----------
 * כל אלמנט עם data-game יורש אקסנט משלו. אין צורך במחלקה נוספת:
 * הכרטיס, הבאדג' וההילה כולם קוראים את אותו --accent.
 */
[data-game='pokemon'] {
  --accent: #facc15; /* צהוב חשמל */
  --accent-2: #3b82f6; /* הילת כחול עמוק */
}

[data-game='onepiece'] {
  --accent: #f43f5e; /* אדום מפרש */
  --accent-2: #eab308; /* זהב אוצרות */
}

[data-game='mtg'] {
  --accent: #a855f7;
  --accent-2: #6366f1;
}

[data-game='yugioh'] {
  --accent: #fb923c;
  --accent-2: #a855f7;
}

[data-game='lorcana'] {
  --accent: #06b6d4;
  --accent-2: #14b8a6;
}

[data-game='sports'] {
  --accent: #10b981; /* אמרלד טקטי */
  --accent-2: #22d3ee;
}

/* ---------- נקודות שבירה ---------- */
/* 14 פיקסלים במובייל ו-15 מטאבלט: מרחק הקריאה גדול יותר במסך גדול. */
@media (min-width: 768px) {
  :root {
    --fs-body: 0.9375rem;
    --fs-hero: 2.75rem;
    --topbar-h: 64px;
  }
}

@media (min-width: 1280px) {
  :root {
    --fs-hero: 3rem;
  }
}