/* ==========================================================================
   Button System — Tickchak Design System
   4 variants × 3 sizes × 4 themes × 3 states × highlight
   Usage: <button class="btn cta brand live">text</button>
   Required tokens: tokens.css must be imported first
   ========================================================================== */

/* === BASE === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-sm);
  border:none;cursor:pointer;outline:none;
  white-space:nowrap;
  position:relative;overflow:hidden;
  transition:
    background .3s cubic-bezier(.4,0,.2,1),
    box-shadow .3s cubic-bezier(.4,0,.2,1),
    border-color .3s cubic-bezier(.4,0,.2,1),
    transform .15s cubic-bezier(.4,0,.2,1),
    opacity .3s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active:not(.disabled){transform:scale(0.96);}
.btn.disabled{cursor:default;pointer-events:none;}

/* Ripple */
.btn .ripple{
  position:absolute;border-radius:50%;
  background:rgba(0,0,0,0.08);
  transform:scale(0);opacity:0.6;
  pointer-events:none;
}
@keyframes btn-ripple{to{transform:scale(4);opacity:0;}}
.btn .ripple.animate{animation:btn-ripple .6s cubic-bezier(.4,0,.2,1) forwards;}

/* === SIZE: Primary / CTA (44px) === */
.btn.cta{
  height:var(--dim-11);padding:0 var(--space-lg);
  border-radius:100px;
  font-size:var(--f-btn-primary);font-weight:700;
  line-height:20px;
}

/* === SIZE: Category / Tab (32px) === */
.btn.category{
  height:32px;padding:0 var(--space-lg);
  border-radius:100px;
  font-size:var(--f-btn-cat);font-weight:700;
  line-height:16px;
}

/* === SIZE: Chip / Compact (28px) === */
.btn.chip{
  height:28px;padding:0 var(--space-lg);
  border-radius:100px;
  font-size:var(--f-chip);font-weight:700;
  line-height:16px;
}

.btn.subtle{background:none;border:none;}

/* === FONT per theme === */
.btn.live{font-family:var(--font-family-live);}
.btn.app{font-family:var(--font-family-app);}

/* ============================================
   VARIANT × THEME: APP (light)
   ============================================ */
.btn.brand.app{background:var(--ta-color-brand-main);color:var(--ta-color-text-default);}
.btn.brand.app:hover:not(.disabled){background:var(--ta-color-brand-hover);box-shadow:0 4px 16px rgba(142,237,255,0.35);}
.btn.brand.app.disabled{background:var(--color-grays-200);color:var(--color-grays-500);}

.btn.primary.app{background:var(--ta-color-bg-surface);color:var(--ta-color-text-default);}
.btn.primary.app:hover:not(.disabled){background:var(--ta-color-bg-surface-hover);}
.btn.primary.app.disabled{background:var(--color-grays-200);color:var(--color-grays-500);}

.btn.neutral.app{background:var(--ta-color-bg-base);color:var(--ta-color-text-default);border:1px solid var(--ta-color-border-default);}
.btn.neutral.app:hover:not(.disabled){background:var(--ta-color-bg-surface);}
.btn.neutral.app.disabled{background:var(--ta-color-bg-base);color:var(--color-grays-500);border-color:var(--color-grays-500);}

.btn.subtle.app{color:var(--ta-color-text-default);background:none !important;border:none !important;}
.btn.subtle.app:hover:not(.disabled){background:var(--ta-color-bg-surface-hover) !important;}
.btn.subtle.app.disabled{background:none !important;}

.btn.category.app:not(.brand):not(.neutral){background:var(--ta-color-bg-surface);color:var(--ta-color-text-default);}
.btn.category.app:not(.brand):not(.neutral):hover:not(.disabled){background:var(--ta-color-bg-surface-hover);}
.btn.category.brand.app{background:var(--ta-color-brand-main);color:var(--ta-color-text-default);}
.btn.category.brand.app:hover:not(.disabled){background:var(--ta-color-brand-hover);}

.btn.chip.neutral.app{background:transparent;color:var(--ta-color-text-default);border:1px solid var(--ta-color-border-default);}
.btn.chip.neutral.app:hover:not(.disabled){background:var(--ta-color-bg-surface);}
.btn.chip.brand.app{background:var(--ta-color-brand-main);color:var(--ta-color-text-default);border:1px solid var(--ta-color-brand-main);}
.btn.chip.brand.app:hover:not(.disabled){background:var(--ta-color-brand-hover);border-color:var(--ta-color-brand-hover);}

/* ============================================
   VARIANT × THEME: APP INVERSE
   ============================================ */
.btn.brand.app.inverse{background:var(--ta-color-brand-main);color:var(--ta-color-text-default);}
.btn.brand.app.inverse:hover:not(.disabled){background:var(--ta-color-brand-hover);box-shadow:0 4px 16px rgba(142,237,255,0.35);}
.btn.brand.app.inverse.disabled{background:var(--color-grays-200);color:var(--color-grays-500);}
.btn.category.brand.app.inverse{background:var(--ta-color-brand-main);color:var(--ta-color-text-default);}
.btn.category.brand.app.inverse:hover:not(.disabled){background:var(--ta-color-brand-hover);}
.btn.chip.brand.app.inverse{background:var(--ta-color-brand-main);color:var(--ta-color-text-default);border:1px solid var(--ta-color-brand-main);}
.btn.chip.brand.app.inverse:hover:not(.disabled){background:var(--ta-color-brand-hover);border-color:var(--ta-color-brand-hover);}

.btn.primary.app.inverse{background:var(--ta-color-bg-surface-inv);color:var(--ta-color-icon-inverse);}
.btn.primary.app.inverse:hover:not(.disabled){background:var(--ta-color-bg-surface-inv-hover);}
.btn.neutral.app.inverse{background:transparent;color:var(--ta-color-icon-inverse);border:1px solid var(--ta-color-icon-inverse);}
.btn.neutral.app.inverse:hover:not(.disabled){background:rgba(255,255,255,0.1);}
.btn.subtle.app.inverse{color:var(--ta-color-icon-inverse);background:none !important;border:none !important;}
.btn.subtle.app.inverse:hover:not(.disabled){background:var(--ta-color-bg-surface-inv-hover) !important;}
.btn.category.app.inverse:not(.brand):not(.neutral){background:var(--ta-color-bg-surface-inv);color:var(--ta-color-icon-inverse);}
.btn.category.app.inverse:not(.brand):not(.neutral):hover:not(.disabled){background:var(--ta-color-bg-surface-inv-hover);}
.btn.chip.neutral.app.inverse{background:transparent;color:var(--ta-color-icon-inverse);border:1px solid var(--ta-color-icon-inverse);}

/* ============================================
   VARIANT × THEME: LIVE (dark)
   ============================================ */
.btn.brand.live{background:var(--tl-color-brand-main);color:var(--tl-color-text-inverse-default);}
.btn.brand.live:hover:not(.disabled){background:var(--tl-color-brand-hover);box-shadow:0 4px 16px rgba(255,204,0,0.35);}
.btn.brand.live.disabled{background:var(--color-grays-200);color:var(--color-grays-500);}

.btn.primary.live{background:var(--tl-color-bg-surface);color:var(--tl-color-text-default);}
.btn.primary.live:hover:not(.disabled){background:var(--tl-color-bg-surface-hover);}
.btn.primary.live.disabled{background:var(--color-grays-200);color:var(--color-grays-500);}

.btn.neutral.live{background:transparent;color:var(--tl-color-text-default);border:1px solid var(--tl-color-border-default);}
.btn.neutral.live:hover:not(.disabled){background:rgba(255,255,255,0.1);}
.btn.neutral.live.disabled{color:var(--tl-color-border-disabled);border-color:var(--tl-color-border-disabled);}

.btn.subtle.live{color:var(--tl-color-text-default);background:none !important;border:none !important;}
.btn.subtle.live:hover:not(.disabled){background:var(--tl-color-bg-surface-hover) !important;}
.btn.subtle.live.disabled{background:none !important;}

.btn.category.live:not(.brand):not(.neutral){background:var(--tl-color-bg-surface);color:var(--tl-color-text-default);}
.btn.category.live:not(.brand):not(.neutral):hover:not(.disabled){background:var(--tl-color-bg-surface-hover);}
.btn.category.live.inverse:not(.brand):not(.neutral){background:var(--tl-color-bg-surface-inv);color:var(--tl-color-text-inverse-default);}
.btn.category.live.inverse:not(.brand):not(.neutral):hover:not(.disabled){background:var(--tl-color-bg-surface-inv-hover);}
.btn.category.brand.live{background:var(--tl-color-brand-main);color:var(--tl-color-text-inverse-default);}
.btn.category.brand.live:hover:not(.disabled){background:var(--tl-color-brand-hover);}

.btn.chip.neutral.live{background:transparent;color:var(--tl-color-text-default);border:1px solid var(--tl-color-border-default);}
.btn.chip.neutral.live:hover:not(.disabled){background:rgba(255,255,255,0.1);}
.btn.chip.brand.live{background:var(--tl-color-brand-main);color:var(--tl-color-text-inverse-default);border:1px solid var(--tl-color-brand-main);}
.btn.chip.brand.live:hover:not(.disabled){background:var(--tl-color-brand-hover);border-color:var(--tl-color-brand-hover);}
.btn.chip.brand.live.disabled{background:var(--color-grays-200);color:var(--color-grays-500);border-color:var(--color-grays-200);}

/* ============================================
   VARIANT × THEME: LIVE INVERSE
   ============================================ */
.btn.brand.live.inverse{background:var(--tl-color-brand-main);color:var(--tl-color-text-inverse-default);}
.btn.brand.live.inverse:hover:not(.disabled){background:var(--tl-color-brand-hover);box-shadow:0 4px 16px rgba(255,204,0,0.35);}
.btn.brand.live.inverse.disabled{background:var(--color-grays-200);color:var(--color-grays-500);}
.btn.category.brand.live.inverse{background:var(--tl-color-brand-main);color:var(--tl-color-text-inverse-default);}
.btn.category.brand.live.inverse:hover:not(.disabled){background:var(--tl-color-brand-hover);}
.btn.chip.brand.live.inverse{background:var(--tl-color-brand-main);color:var(--tl-color-text-inverse-default);border:1px solid var(--tl-color-brand-main);}
.btn.chip.brand.live.inverse:hover:not(.disabled){background:var(--tl-color-brand-hover);border-color:var(--tl-color-brand-hover);}

.btn.primary.live.inverse{background:var(--tl-color-bg-surface-inv);color:var(--tl-color-text-inverse-default);}
.btn.primary.live.inverse:hover:not(.disabled){background:var(--tl-color-bg-surface-inv-hover);}
.btn.neutral.live.inverse{background:transparent;color:var(--tl-color-text-inverse-default);border:1px solid var(--tl-color-border-inv);}
.btn.neutral.live.inverse:hover:not(.disabled){background:var(--tl-color-bg-surface-inv);}
.btn.neutral.live.inverse.disabled{color:var(--tl-color-border-inverse-disabled);border-color:var(--tl-color-border-inverse-disabled);}
.btn.subtle.live.inverse{color:var(--tl-color-text-inverse-default);background:none !important;border:none !important;}
.btn.subtle.live.inverse:hover:not(.disabled){background:var(--tl-color-bg-surface-inv-hover) !important;}
.btn.category.live.inverse:not(.brand):not(.neutral){background:var(--tl-color-bg-surface-inv);color:var(--tl-color-text-inverse-default);}
/* מצב-מושבת ל-primary/category · live · inverse (אסף 23/07) — שלוש שכבות כמו בפיגמה:
   רקע-מושבת (bg-surface-inv, מהווריאנט) · צבע-אייקון מושבת (icon-inverse-disabled) ·
   ובנוסף כל הכפתור ב-opacity 50%. */
.btn.primary.live.inverse.disabled,
.btn.category.live.inverse.disabled:not(.brand):not(.neutral){color:var(--tl-color-icon-inverse-disabled);opacity:.5;}
.btn.chip.neutral.live.inverse{background:transparent;color:var(--tl-color-text-inverse-default);border:1px solid var(--tl-color-border-inv);}

/* ============================================
   HIGHLIGHT: filled & outline
   ============================================ */
.btn.hl-filled{background:var(--hl-gradient) !important;color:#fff !important;border:none !important;}
.btn.hl-filled:hover:not(.disabled){box-shadow:0 4px 20px rgba(51,153,255,0.4);filter:brightness(1.1);}

.btn.hl-outline{background:transparent !important;color:inherit;border:none !important;position:relative;}
.btn.hl-outline::before{
  content:'';position:absolute;inset:0;
  border-radius:inherit;padding:1.5px;
  background:var(--hl-gradient);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.btn.hl-outline:hover:not(.disabled){box-shadow:0 2px 12px rgba(51,153,255,0.25);}

/* === ICON === */
.btn.icon-only{padding:0;}
.btn.icon-only.cta{width:var(--dim-11);}
.btn.icon-only.category{width:32px;min-width:32px;}
.btn.icon-only.chip{width:28px;}
.btn .btn-ico{width:var(--dim-5);height:var(--dim-5);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
/* המכל עצמו לפי size: בפיגמה חריץ-האייקון («שמאל») של Category/Chip הוא 16×16, של CTA 20×20 —
   מכל 20 סביב אייקון 16 הוסיף 4 פיקסלים נסתרים לרוחב הכפתור (אסף 19/08: «אמור להיות 16, תבדוק במערכת») */
.btn.category .btn-ico,
.btn.chip     .btn-ico{width:var(--dim-4);height:var(--dim-4);}
/* SVG עצמו (האייקון) — גודל לפי size של הכפתור */
.btn.cta      .btn-ico svg{width:var(--dim-5);height:var(--dim-5);}   /* 20 */
.btn.category .btn-ico svg{width:var(--dim-4);height:var(--dim-4);}   /* 16 */
.btn.chip     .btn-ico svg{width:var(--dim-4);height:var(--dim-4);}   /* 16 */
/* Icon-only — CTA גדל ל-22, category/chip נשארים 16 */
.btn.icon-only.cta .btn-ico svg{width:22px;height:22px;}
/* אייקון קווי תמיד stroke-width 1 — חוקיות עיצוב מערכת.
   🔴 `vector-effect:non-scaling-stroke` נוסף 05/08/2026 (אישור אסף) ואינו קישוט:
   `stroke-width:1` נמדד ב**יחידות תיבת-הציור**, לא בפיקסלים. אייקון שמצויר
   בתיבת 24 ומוצג ב-16 קיבל קו של 0.67px, ואייקון מתיבת 12 קיבל 1.33px.
   סריקה של המאגר מצאה 14 גדלי-תיבה שונים ו-80 אייקוני-קו בעובי שגוי — כלומר
   הקווים בממשק מעולם לא היו באותו עובי, וזה לא נראה כי כל אייקון לבדו נראה סביר.
   non-scaling-stroke מוציא את הקו מהשקלול של התיבה: 1 = פיקסל אחד, תמיד.
   (אייקוני-מילוי — 96 במאגר — אינם מושפעים; הכלל נוגע רק למי שיש לו stroke.) */
.btn .btn-ico svg [stroke]{stroke-width:1;vector-effect:non-scaling-stroke;}
/* חדות (אסף 19/08 «עדיין לא מורגש»): אייקוני-פיגמה מיוצאים עם preserveAspectRatio="none" ותיבה 16.33 —
   כשנדחסים ל-16 הקו נמרח ל-2 פיקסלי-מסך אפורים במקום 1 שחור. meet = קנה-מידה אחיד;
   geometricPrecision = קווים דקים מדויקים בלי לשבור עקומות. אותו 1px, רק חד. (את preserveAspectRatio מתקנים במקור — זו תכונה, לא CSS.) */
.btn .btn-ico svg{shape-rendering:geometricPrecision;}