/* ==========================================================================
   Tickchak Design System — Shared Tokens
   Single source of truth for spacing, radii, typography, colors.
   מקור-האמת לצבעים: משתני-הפיגמה (primitives ← semantic-color-app ← semantic-color-live).
   26/08/2026 — סונכרן סולם ה-slate (אפור-כחול): הסמנטיים הוסבו מ-שחור/אפור ל-slate.
   notes/semantic-colors-*.md הם תיעוד היסטורי (28/07) ולא עודכנו לסולם החדש.
   ========================================================================== */

/* ==========================================================================
   Google Sans — הפונט של כל המערכת (נעמי 27/08)
   הקבצים מוטמעים במאגר (general/fonts/googlesans/) ולא נטענים מהרשת: הדמו
   נפתח גם בלי חיבור, ואין תלות בשרת חיצוני. הפונט כולל עברית מלאה (נבדק —
   87 תווי-עברית כולל ניקוד), ולכן הוא מחליף את Rubik ו-Assistant כאחד.
   שני משקלים בלבד — Regular 400 ו-Bold 700; משקלי-הביניים (500/600) נגזרים
   ע"י הדפדפן מהם, כי אין קבצים נפרדים.
   ========================================================================== */
@font-face{
  font-family:'Google Sans';
  src:url('fonts/googlesans/GoogleSans-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Google Sans';
  src:url('fonts/googlesans/GoogleSans-Bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}
/* גרסת 17pt — חיתוך אופטי לטקסט-גוף. שמורה כמשפחה נפרדת לשימוש מכוון,
   ואינה ברירת-המחדל. */
@font-face{
  font-family:'Google Sans 17pt';
  src:url('fonts/googlesans/GoogleSans_17pt-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Google Sans 17pt';
  src:url('fonts/googlesans/GoogleSans_17pt-Bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  /* ===== Spacing (Mobile values per Figma) ===== */
  --space-2xs:2px;                             /* אושר ע"י אסף 02.07 — צעד קומפקטי לתגים בתוך כרטיסים */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-2xl:32px;
  --space-3xl:40px;

  /* ===== Dimensions ===== */
  --dim-4:16px;
  --dim-5:20px;
  --dim-6:24px;
  --dim-7:28px;
  --dim-8:32px;
  --dim-10:40px;
  --dim-11:44px;

  /* ===== Border Radius ===== */
  --r-none:0;
  --r-sm:4px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-2xl:24px;
  --r-full:999px;
  --border-radius-none:0;
  --border-radius-sm:4px;
  --border-radius-md:8px;
  --border-radius-lg:12px;
  --border-radius-xl:16px;
  --border-radius-2xl:24px;
  --border-radius-full:999px;

  /* ===== Typography — sizes ===== */
  --font-size-heading-hero:32px;
  --font-size-heading-hero-name:24px;   /* וריאנט hero לשם ישות (חשבון/אירוע/לקוח). 32 דסקטופ ↓ — App */
  --font-size-heading-page:20px;
  --font-size-heading-sub:18px;
  --font-size-heading-modal:20px;
  --font-size-heading-popup:22px;       /* כותרת פופ — 22 בכל מסך (אסף 22/07). מקור: רכיב-הפופ
                                           בפיגמה Design-System 2212-15870. לא h3 (18) ולא
                                           heading-modal (20, כותרת המיני-פופ). */
  --font-size-heading-card:16px;
  --font-size-h1:32px;
  --font-size-h2:20px;
  --font-size-h3:18px;
  --font-size-body:16px;
  --font-size-body-small:14px;
  --font-size-caption:12px;
  --font-size-helper:12px;
  --font-size-label:14px;
  --font-size-text-metric-primary:32px;
  --font-size-text-metric-secondary:20px;
  --font-size-text-metric-tertiary:14px;
  --font-size-button-primary:16px;
  --font-size-button-category:14px;
  --font-size-button-chip:12px;

  /* ===== Typography — weights ===== */
  --font-weight-light:300;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;

  /* ===== Typography — line heights ===== */
  --line-height-button-primary:20px;
  --line-height-button-category:16px;
  --line-height-button-chip:16px;
  --line-height-caption:16px;
  --line-height-body:20px;
  --line-height-body-small:16px;

  /* ===== Typography — fonts ===== */
  /* נעמי 27/08 — Google Sans בכל המערכת; Assistant/Rubik נשארו רשת-ביטחון
     בלבד, למקרה שקובץ-פונט לא נטען. */
  --font-family-app:'Google Sans','Assistant',sans-serif;
  --font-family-live:'Google Sans','Rubik',sans-serif;
  --font-family-optical:'Google Sans 17pt','Google Sans',sans-serif;

  /* ===== Primitives — Grays ===== */
  /* 16/08/2026 — יושר לפיגמה (DS · Foundations ← primitives ← color/Grays/100 = #f5f5f5).
     היה #ededed. פיגמה היא מקור-האמת (הכרעת אסף). שאר הסולם (200–700) כבר תואם. */
  --color-grays-100:#f5f5f5;
  --color-grays-200:#e0e0e0;
  --color-grays-300:#cccccc;
  --color-grays-400:#b1b1b1;
  --color-grays-500:#999999;
  --color-grays-600:#666666;
  --color-grays-700:#333333;

  /* ===== Primitives — Slate (אפור-כחול) =====
     26/08/2026 — הסולם החדש מפיגמה (DS · Foundations ← primitives ← color/slate).
     רוב הסמנטיים הוסבו אליו; Grays נשארים רק בטוקנים שהוחלט בכוונה להשאיר. */
  --color-slate-50:#f8fafc;
  --color-slate-100:#e9eff5;
  --color-slate-200:#cedde9;
  --color-slate-300:#a3c1d6;
  --color-slate-400:#729fbe;
  --color-slate-500:#5083a7;
  --color-slate-600:#3d698c;
  --color-slate-700:#325572;
  --color-slate-800:#2d495f;
  --color-slate-900:#293e51;
  --color-slate-950:#1b2836;
  --color-slate-alpha-05:rgba(61,105,140,0.05);
  --color-slate-alpha-10:rgba(61,105,140,0.1);
  --color-slate-alpha-25:rgba(61,105,140,0.25);
  --color-slate-alpha-40:rgba(61,105,140,0.4);
  --color-slate-alpha-60:rgba(61,105,140,0.6);

  /* ===== Primitives — Alphas =====
     נמשכו מספריית primitives בפיגמה (Design System Tickchak), 26/07/2026 — לא הומצאו.
     שימוש: שכבות-כיסוי מעל תוכן (רקע כהה מאחורי פופ/מודל) ושכבות-בהיר על תמונה.
     הסמנטיקה בפיגמה: bg/surface/* הם אליאסים לאותם ערכים — אבל משמעותם «מצב-רכיב»
     (default/hover/selected), ולכן אין להשתמש בהם לשכבת-כיסוי. */
  --color-black-alpha-05:rgba(0,0,0,0.05);
  --color-black-alpha-10:rgba(0,0,0,0.1);
  --color-black-alpha-30:rgba(0,0,0,0.3);
  --color-black-alpha-40:rgba(0,0,0,0.4);
  --color-white-alpha-10:rgba(255,255,255,0.1);
  --color-white-alpha-20:rgba(255,255,255,0.2);
  --color-white-alpha-30:rgba(255,255,255,0.3);
  --color-white-alpha-40:rgba(255,255,255,0.4);

  /* ===== Primitives — Brand ===== */
  --color-turquoise-50:#f0fdff;
  --color-turquoise-100:#e0fbff;
  --color-turquoise-200:#c0f6ff;
  --color-turquoise-400:#8eedff;
  --color-turquoise-500:#5dc5d7;
  --color-turquoise-600:#33a7b6;
  --color-turquoise-700:#1f6f7a;
  --color-yellows-50:#fffceb;
  --color-yellows-100:#fff8db;
  --color-yellows-300:#ffde58;
  --color-yellows-400:#ffcc00;
  --color-green-50:#fcffe7;
  --color-green-200:#d4e468;
  --color-green-400:#b9ca20;
  --color-green-600:#465b17;
  --color-reds-50:#ffcccc;
  --color-reds-400:#ff0000;
  --color-oranges-100:#fff2d6;
  --color-oranges-200:#f7b766;
  --color-oranges-400:#f28c00;
  --color-oranges-600:#a85f00;
  --color-blue-50:#e3f0ff;
  --color-blue-200:#89c4ff;
  --color-blue-400:#3399ff;
  --color-blue-600:#0055b2;
  --color-pink-200:#ffb2de;
  --color-pink-600:#800049;
  --color-reds-200:#ff6666;
  --color-reds-600:#cc0000;

  /* ===== Primitives — Solids ===== */
  --color-solids-white:#ffffff;              /* Figma: color/Solids/white */
  --color-solids-black:#000000;              /* Figma: color/Solids/black — שחור-אמיתי (גלולות/בסיס), לא slate */

  /* ===== TA (App) Semantic Colors — light mode =====
     26/08/2026 — יושר לפיגמה (semantic-color-app). האפורים שנשארו — בכוונה
     (הכרעת אסף 26/08): brand/disabled · text/disabled-brand · icon/disabled · success/text. */
  --ta-color-bg-base:#ffffff;
  --ta-color-bg-baseAlt:#000000;
  --ta-color-bg-surface:var(--color-slate-alpha-10);
  --ta-color-bg-surface-hover:var(--color-slate-alpha-25);
  --ta-color-bg-surface-selected:var(--color-slate-alpha-60);
  --ta-color-bg-surface-disabled:var(--color-slate-alpha-05);
  --ta-color-bg-surface-inv:var(--color-slate-alpha-40);
  --ta-color-bg-surface-inv-hover:var(--color-slate-alpha-25);
  --ta-color-bg-surface-inv-selected:var(--color-slate-alpha-60);
  --ta-color-bg-surface-inv-disabled:var(--color-slate-alpha-25);
  --ta-color-brand-main:#8eedff;
  --ta-color-brand-hover:#c0f6ff;
  --ta-color-brand-subtle:#e0fbff;
  --ta-color-brand-selected:#f0fdff;
  --ta-color-brand-disabled:var(--color-grays-200);                              /* Grays בכוונה */
  --ta-color-text-default:var(--color-slate-900);
  --ta-color-text-subtle:var(--color-slate-alpha-60);
  --ta-color-text-disabled:var(--color-slate-alpha-40);
  --ta-color-text-disabled-brand:var(--color-grays-400);                         /* Grays בכוונה */
  --ta-color-text-inverse:var(--color-slate-50);
  --ta-color-text-inverse-subtle:var(--color-white-alpha-40);
  --ta-color-text-inverse-disabled:var(--color-slate-alpha-40);
  --ta-color-border-default:var(--color-slate-900);
  --ta-color-border-brand:#8eedff;
  --ta-color-border-subtle:var(--color-slate-alpha-25);
  --ta-color-border-disabled:var(--color-slate-alpha-10);
  --ta-color-border-inverse-default:var(--color-slate-50);
  --ta-color-border-inverse-subtle:var(--color-slate-alpha-60);
  --ta-color-border-inverse-disabled:var(--color-slate-alpha-25);
  --ta-color-icon-default:var(--color-slate-900);
  --ta-color-icon-inverse:var(--color-slate-50);
  --ta-color-icon-disabled:var(--color-grays-400);                               /* Grays בכוונה */
  --ta-color-icon-inverse-disabled:var(--color-slate-alpha-40);
  --ta-color-state-success-main:#465b17;
  --ta-color-state-success-bg:#b9ca20;
  --ta-color-state-success-border:#465b17;
  --ta-color-state-success-text:#333333;
  --ta-color-state-success-subtle:#fcffe7;
  --ta-color-state-error-main:#ff0000;
  --ta-color-state-error-bg:#ffcccc;
  --ta-color-state-error-border:#ff0000;
  --ta-color-state-error-text:#ffffff;
  --ta-color-state-warning-main:#f28c00;
  --ta-color-state-warning-bg:#fff2d6;
  --ta-color-state-warning-border:#f28c00;
  --ta-color-state-warning-text:#ffffff;
  --ta-color-state-info-main:#3399ff;
  --ta-color-state-info-bg:#e3f0ff;
  --ta-color-state-info-border:#3399ff;
  --ta-color-state-info-text:#ffffff;
  --ta-color-state-inactive-bg:rgba(0,0,0,0.3);                                  /* מקביל ל-success-bg עבור מצב כבוי/לא-פעיל (נקודת סטטוס) */
  --ta-color-chart-line:var(--color-turquoise-500);                              /* Turquoise/500 */
  --ta-color-chart-line-return:var(--color-turquoise-700);                       /* Turquoise/700 */
  --ta-color-chart-area:color-mix(in srgb, var(--color-turquoise-500) 18%, transparent);  /* 5DC5D7 @ 18% */
  --ta-color-chart-tooltip-bg:var(--color-turquoise-600);                        /* Turquoise/600 */
  --ta-color-chart-tooltip-text:var(--color-turquoise-50);                       /* Turquoise/50 */

  /* ===== TL (Live) Semantic Colors — dark mode (regular) =====
     26/08/2026 — יושר לפיגמה (semantic-color-live). האפורים שנשארו — בכוונה
     (הכרעת אסף 26/08): brand/disabled · text/disabled-brand · icon/disabled-brand · success/text. */
  --tl-color-bg-base:#000000;
  --tl-color-bg-baseAlt:#ffffff;
  --tl-color-bg-surface:var(--color-slate-alpha-40);
  --tl-color-bg-surface-hover:var(--color-slate-alpha-25);
  --tl-color-bg-surface-selected:var(--color-slate-alpha-60);
  --tl-color-bg-surface-disabled:var(--color-slate-alpha-25);
  --tl-color-bg-surface-inverse:var(--color-slate-alpha-10);
  --tl-color-bg-surface-inv:var(--color-slate-alpha-10);
  --tl-color-bg-surface-inv-hover:var(--color-slate-alpha-25);
  --tl-color-bg-surface-inv-selected:var(--color-slate-alpha-60);
  --tl-color-bg-surface-inv-disabled:var(--color-slate-alpha-05);
  --tl-color-brand-main:#ffcc00;
  --tl-color-brand-hover:#ffde58;
  --tl-color-brand-subtle:#fff8db;
  --tl-color-brand-selected:#fffceb;
  --tl-color-brand-disabled:var(--color-grays-200);                              /* Grays בכוונה */
  --tl-color-text-default:var(--color-slate-50);
  --tl-color-text-subtle:var(--color-white-alpha-40);
  --tl-color-text-disabled:var(--color-slate-alpha-40);
  --tl-color-text-disabled-brand:var(--color-grays-400);                         /* Grays בכוונה */
  --tl-color-text-inverse-default:var(--color-slate-900);
  --tl-color-text-inverse-subtle:var(--color-slate-alpha-60);
  --tl-color-text-inverse-disabled:var(--color-slate-alpha-40);
  --tl-color-border-default:var(--color-slate-50);
  --tl-color-border-brand:#ffcc00;
  --tl-color-border-subtle:var(--color-slate-alpha-60);
  --tl-color-border-disabled:var(--color-slate-alpha-25);
  --tl-color-border-inverse-default:var(--color-slate-900);
  --tl-color-border-inv:var(--color-slate-900);
  --tl-color-border-inverse-subtle:var(--color-slate-alpha-25);
  --tl-color-border-inverse-disabled:var(--color-slate-alpha-10);
  --tl-color-icon-default:#ffffff;                                               /* פיגמה: Solids/white (שונה מהאפפ בכוונה) */
  --tl-color-icon-disabled:var(--color-slate-alpha-40);
  --tl-color-icon-disabled-brand:var(--color-grays-400);                         /* Grays בכוונה */
  --tl-color-icon-inverse:var(--color-slate-900);
  --tl-color-icon-inverse-disabled:var(--color-slate-alpha-40);
  --tl-color-state-success-main:#465b17;
  --tl-color-state-success-bg:#b9ca20;
  --tl-color-state-success-border:#465b17;
  --tl-color-state-success-text:#333333;
  --tl-color-state-success-subtle:#fcffe7;
  --tl-color-state-error-main:#ff0000;
  --tl-color-state-error-bg:#ffcccc;
  --tl-color-state-error-border:#ff0000;
  --tl-color-state-error-text:#ffffff;
  --tl-color-state-warning-main:#f28c00;
  --tl-color-state-warning-bg:#fff2d6;
  --tl-color-state-warning-border:#f28c00;
  --tl-color-state-warning-text:#ffffff;
  --tl-color-state-info:#3399ff;
  --tl-color-state-info-main:#3399ff;
  --tl-color-state-info-bg:#e3f0ff;
  --tl-color-state-info-border:#3399ff;
  --tl-color-state-info-text:#ffffff;
  --tl-color-state-inactive-bg:rgba(255,255,255,0.4);                            /* TL/color/state/inactive/bg — dark: White Alphas/white40 · light: Black Alphas/black30. היה 0.3 בלי מקור בפיגמה; יושר לטוקן שנוצר 03/08 */

  /* ===== Highlight gradient ===== */
  --hl-gradient:linear-gradient(135deg,#3399ff,#ff4bb2);

  /* ===== Button font sizes (legacy aliases) ===== */
  --f-btn-primary:16px;
  --f-btn-cat:14px;
  --f-chip:12px;
  --f-caption:12px;
  --f-body-sm:14px;
  --f-body:16px;

  /* ===== Special — Coupon gradient ===== */
  --color-coupon-red:#ee3c5c;
  --color-coupon-orange:#fa6203;
  --color-success-subtle:#fcffe7;  /* light green-yellow bg for success */

  /* ===== Effects — glass + shadows ===== */
  --color-glass-light:rgba(255,255,255,0.6);
  --color-glass-dark:rgba(0,0,0,0.4);
  --shadow-float:0 0 27px rgba(0,0,0,0.25);
  --shadow-card:0 2px 12px rgba(0,0,0,0.08);
  --shadow-popup:0 12px 48px rgba(0,0,0,0.3);
  --blur-glass:10px;
}

@media(min-width:768px){
  :root{
    --font-size-heading-hero:44px;
    --font-size-heading-hero-name:32px;
    --font-size-heading-page:28px;
    --font-size-heading-sub:20px;
    --font-size-h1:44px;
    --font-size-h2:28px;
    --font-size-h3:20px;
  }
}