/* ═══════════════════════════════════════════════════════════════════════════
   קאספריו · שכבת המותג של כל ארגז הכלים (27/09/2026)

   ישראל, 27/09: „תחיל עיצוב קאספריו על מערכת הכלים הראשית, כל המערכת, כל
   הכפתורים, כולל הצוות והכל". היקף: כלי המסעדה + אירועים (הכלי הפנימי).
   לא כאן: מסמך הצעת המחיר ללקוח (events/q — בעיצוב של המסעדה), מיילים,
   ספר הבשר והמדריכים (שף ישראל).

   נטען דרך app_btn_css() (core/layout.php) — אחרי הגיליון של כל כלי, בכל כלי.

   ספר המותג (KASPERIO/brand/kasperio-design-tokens.md):
     · Ink ‎#0F172A — הצבע הראשי: קישורים, בחירה, מסגרת בפוקוס, צ'יפ פעיל.
     · צהוב ‎#FFCC15 — פעולה: הכפתור הראשי (buttons.css) וקו הלשונית הפעילה.
       מילוי בלבד, תמיד עם דיו כהה. לא כטקסט ולא כמסגרת (1.6:1).
     · Slate, כרטיס לבן, Heebo.
   עד היום ‎--ks-accent היה הטרהקוטה של Resto ‎#C2410C, ולכן כל הכלים נראו כתומים.
   Resto נשאר צבע *המוצר* (‎--ks-resto) — לא צבע הפעולה.

   ⚠ לא טוענים כאן את tokens.css שוב: ‎@import שני היה דורס את השמות הסמנטיים
     (‎--radius, --shadow…) שכל כלי קבע לעצמו. מגדירים רק את שכבה א׳ (‎--ks-*),
     בספציפיות גבוהה מ-tokens.css (‎html:root מול ‎:root), כך שזה עובד גם בכלי
     שלא טוען את tokens.css בכלל (טיפים, משימות, תמחור) — שם ה-fallback הישן
     הכתום/בז' מתחלף בערכי המותג.
   ⚠ שני בלוקי הכהה חייבים להישאר זהים (כמו ב-tokens.css).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Heebo';src:url('/assets/fonts/Heebo-VF.ttf') format('truetype');font-weight:100 900;font-display:swap}

/* ── 1. טוקני המותג (שכבה א׳) — בהיר ── */
html:root{
  --ks-ink:#0F172A; --ks-pure-white:#FFFFFF; --ks-yellow:#FFCC15;
  --ks-green:#0DBD82; --ks-red:#EF4444; --ks-resto:#C2410C; --ks-image:#7C3AED;
  --ks-g50:#F8FAFC; --ks-g100:#F1F5F9; --ks-g200:#E2E8F0; --ks-g300:#CBD5E1;
  --ks-g400:#94A3B8; --ks-g500:#64748B; --ks-g700:#334155; --ks-g900:#0F172A;
  --ks-resto-ink:#C2410C; --ks-image-ink:#7C3AED; --ks-green-ink:#15803D; --ks-red-ink:#B91C1C;
  --ks-warning:#B45309; --ks-info:#0369A1;
  --ks-bg:#F8FAFC; --ks-bg-soft:#F1F5F9; --ks-card:#FFFFFF; --ks-card-hover:#F8FAFC;
  --ks-line:#E2E8F0; --ks-txt:#0F172A; --ks-txt-dim:#5D6B7E;

  /* צבע הפעולה = Ink (היה ‎#C2410C). מילוי דיו עם טקסט לבן: 17.8:1 */
  --ks-accent:#0F172A;
  --ks-accent-d:#0F172A;
  --ks-accent-ink:#FFFFFF;
  --ks-accent-brand:#FFCC15;
  --ks-accent-brand-ink:#0F172A;
  --ks-accent-soft:rgba(15,23,42,.07);
  --ks-accent-line:rgba(15,23,42,.26);
  --ks-accent-tint:rgba(255,204,21,.16);
  --ks-focus:#0F172A;

  --ks-ok-f:#15803D; --ks-err-f:#B91C1C; --ks-warn-f:#B45309;
  --ks-ok-bg:rgba(21,128,61,.06);   --ks-ok-line:rgba(21,128,61,.40);
  --ks-err-bg:rgba(185,28,28,.06);  --ks-err-line:rgba(185,28,28,.40);
  --ks-warn-bg:rgba(180,83,9,.06);  --ks-warn-line:rgba(180,83,9,.38);
  --ks-info-bg:rgba(3,105,161,.06); --ks-info-line:rgba(3,105,161,.34);
  --ks-shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --ks-shadow-lg:0 24px 64px rgba(15,23,42,.16);
  --ks-font:"Heebo","Inter",system-ui,"Segoe UI",Rubik,Arial,sans-serif;
  --ks-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ks-r-xs:6px; --ks-r-sm:8px; --ks-r-md:12px; --ks-r-lg:16px; --ks-r-pill:999px;
  --ks-tap:44px; --ks-tap-sm:36px; --ks-control-h:48px;
  --ks-sp-2:8px; --ks-sp-3:12px; --ks-sp-4:16px; --ks-sp-5:20px;
}

/* ── 1ב. כהה (שני הבלוקים זהים) ── */
@media (prefers-color-scheme:dark){
  html:root:not([data-theme="light"]){
    --ks-bg:#0B1220; --ks-bg-soft:#131F35; --ks-card:#0F172A; --ks-card-hover:#131F35;
    --ks-line:#1E293B; --ks-txt:#F8FAFC; --ks-txt-dim:#94A3B8;
    --ks-resto-ink:#E2622A; --ks-image-ink:#A78BFA; --ks-green-ink:#0DBD82; --ks-red-ink:#F87171;
    --ks-warning:#F59E0B; --ks-info:#0EA5E9;
    --ks-accent:#E2E8F0; --ks-accent-d:#E2E8F0; --ks-accent-ink:#0F172A; --ks-focus:#E2E8F0;
    --ks-accent-soft:rgba(226,232,240,.10); --ks-accent-line:rgba(226,232,240,.30);
    --ks-accent-tint:rgba(255,204,21,.14);
    --ks-ok-bg:rgba(13,189,130,.14);   --ks-ok-line:rgba(13,189,130,.42);
    --ks-err-bg:rgba(248,113,113,.14); --ks-err-line:rgba(248,113,113,.42);
    --ks-warn-bg:rgba(245,158,11,.14); --ks-warn-line:rgba(245,158,11,.40);
    --ks-info-bg:rgba(14,165,233,.13); --ks-info-line:rgba(14,165,233,.38);
    --ks-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --ks-shadow-lg:0 24px 64px rgba(0,0,0,.5);
  }
}
html:root[data-theme="dark"]{
  --ks-bg:#0B1220; --ks-bg-soft:#131F35; --ks-card:#0F172A; --ks-card-hover:#131F35;
  --ks-line:#1E293B; --ks-txt:#F8FAFC; --ks-txt-dim:#94A3B8;
  --ks-resto-ink:#E2622A; --ks-image-ink:#A78BFA; --ks-green-ink:#0DBD82; --ks-red-ink:#F87171;
  --ks-warning:#F59E0B; --ks-info:#0EA5E9;
  --ks-accent:#E2E8F0; --ks-accent-d:#E2E8F0; --ks-accent-ink:#0F172A; --ks-focus:#E2E8F0;
  --ks-accent-soft:rgba(226,232,240,.10); --ks-accent-line:rgba(226,232,240,.30);
  --ks-accent-tint:rgba(255,204,21,.14);
  --ks-ok-bg:rgba(13,189,130,.14);   --ks-ok-line:rgba(13,189,130,.42);
  --ks-err-bg:rgba(248,113,113,.14); --ks-err-line:rgba(248,113,113,.42);
  --ks-warn-bg:rgba(245,158,11,.14); --ks-warn-line:rgba(245,158,11,.40);
  --ks-info-bg:rgba(14,165,233,.13); --ks-info-line:rgba(14,165,233,.38);
  --ks-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --ks-shadow-lg:0 24px 64px rgba(0,0,0,.5);
}

/* ── 2. הגופן: Heebo בכל הכלים (עד היום רק הוכרז, אף כלי לא טען אותו) ── */
body{font-family:var(--ks-font)}
button,input,select,textarea{font-family:inherit}

/* ── 3. לשונית פעילה בסרגל העליון: דיו + קו צהוב ישר מתחת (UI token, לא מרקר) ── */
.ord-topnav a.is-active,.rcp-topnav a.is-active,.ord-top-admin.is-active,.rcp-top-admin.is-active,
.cf-topnav a.is-active,.km-topnav a.is-active{
  color:var(--ks-txt); background:transparent; font-weight:800;
  box-shadow:inset 0 -3px 0 var(--ks-yellow); border-radius:9px 9px 0 0}
.at-nav a.is-on,.ev-nav a.is-active{color:var(--ks-txt); border-bottom-color:var(--ks-yellow); font-weight:800}
.hdr-nav a.is-active{color:var(--ks-txt); border-bottom:2px solid var(--ks-yellow); font-weight:700}

/* ── 4. סרגל תחתון בטלפון: הפעילה בדיו, והסמל שלה בגלולה צהובה ── */
.ord-tab.is-active,.rcp-tab.is-active,.km-tab.is-active,.cf-tab.is-active,.at-tab.is-active{color:var(--ks-txt); font-weight:800}
.ord-tab.is-active .ord-tab-ic,.rcp-tab.is-active .rcp-tab-ic,.km-tab.is-active .km-tab-ic{
  background:var(--ks-yellow); color:var(--ks-ink); border-radius:999px; padding:2px 14px}
.cf-tab.is-active > span:first-child,.at-tab.is-active > i{
  display:inline-block; background:var(--ks-yellow); color:var(--ks-ink); border-radius:999px; padding:1px 14px}

/* ── 5. שדה בפוקוס: מסגרת דיו והילה צהובה (כמו באתר) ── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,select:focus-visible,textarea:focus-visible{
  border-color:var(--ks-accent); box-shadow:0 0 0 3px rgba(255,204,21,.45); outline:none}

/* ── 6. רכיבים משותפים עם צבע קשיח ── */
/* עוזר העזרה (core/help_widget.php — <style> בתוך הדף, לכן הספציפיות) */
html body .apphelp-card{--ah-gold:var(--ks-yellow); --ah-card:var(--ks-card); --ah-bg:var(--ks-bg);
  --ah-line:var(--ks-line); --ah-txt:var(--ks-txt); --ah-dim:var(--ks-txt-dim)}
html body .apphelp-m.me{color:var(--ks-ink)}
/* סיור ההיכרות בתמחור (km/assets/tour.js): טקסט כהה קבוע על מילוי הפעולה */
html body .ktour-next{background:var(--ks-yellow); color:var(--ks-ink)}
html body .ktour-dots i.on{background:var(--ks-txt)}