/* ============================================================================ קאספריו — טוקני העיצוב של פלטפורמת הכלים. **מקור יחיד.** נגזר מ-KASPERIO/site/assets/tokens.css (מקור האמת של המותג). כל ערך צבע, פונט, רדיוס ומידה של המערכת חי כאן ורק כאן. לשנות צבע — קודם ב-tokens.css של האתר, ואז כאן. אין ערך קשיח מחוץ לקובץ הזה. מי צורך ממנו: · assets/css/app.css — @import בשורה הראשונה · ads/assets/ads.css — @import, עם ערכי נפילה לערכים של היום · studio/index.php — , עם ערכי נפילה ── שתי שכבות ───────────────────────────────────────────────────────────── שכבה א׳: ‎--ks-* — המקור. שמות שאף קובץ אחר במערכת לא משתמש בהם, ולכן כלי יכול לקרוא מהם גם כשיש לו טוקן באותו שם סמנטי (‎--ink:var(--ks-ink) עובד; --ink:var(--ink) הוא מעגל ולא עובד). שכבה ב׳: השמות הסמנטיים שהמערכת כבר מכירה (‎--bg, --txt, --accent …), שכל אחד מהם הוא רק הפניה לשכבה א׳. ⚠ אסור לשנות, למחוק או לשנות שם של טוקן בשכבה ב׳. תשעה קבצי CSS ועשרות קבצי PHP נשענים עליהם. משנים **ערך**, לא שם. ── שתי מוסכמות צבע ─────────────────────────────────────────────────────── 1) מילוי מול טקסט. צבע שמשמש כ*מילוי* שיש עליו טקסט (‎--accent, --ok-f) **קבוע בשני המצבים** — אחרת הטקסט שעליו נשבר. אותו צבע כ*טקסט* על רקע הדף (‎--accent-d, --ok) **מתבהר במצב כהה**. זה הדפוס של --resto מול ‎--resto-ink ב-tokens.css של האתר, ושל ads.css. 2) סדר מצבי הצבע: בהיר ברירת מחדל, כהה דורס — כמו באתר. שלושה בלוקים: ‎:root · @media(dark) :root:not([data-theme=light]) · :root[data-theme=dark]. שני בלוקי הכהה חייבים להישאר זהים. ========================================================================= */ /* ══ שכבה א׳ — המקור ═══════════════════════════════════════════════════ */ :root{ /* מותג. קבוע בשני המצבים */ --ks-ink:#0F172A; /* לוחית/סמל. ⚠ טקסט הדף הוא --ks-txt, לא זה */ --ks-pure-white:#FFFFFF; --ks-yellow:#FFCC15; /* צבע המותג. רקע לטקסט כהה בלבד — לבן עליו 1.6:1 */ --ks-green:#0DBD82; /* מילוי/אייקון בלבד. כטקסט: --ks-green-ink */ --ks-red:#EF4444; /* מילוי/אייקון בלבד. כטקסט: --ks-red-ink */ --ks-resto:#C2410C; /* מוצר „מסעדה". מילוי, לבן עליו 5.18:1 */ --ks-image:#7C3AED; /* מוצר „סטודיו". מילוי, לבן עליו 5.70:1 */ /* סולם אפורים (8 מדרגות) */ --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; /* 5.18:1 על לבן */ --ks-image-ink:#7C3AED; /* 5.70:1 על לבן */ --ks-green-ink:#15803D; --ks-red-ink:#B91C1C; --ks-warning:#B45309; --ks-info:#0369A1; /* משטחים וטקסט. מתהפכים במצב כהה */ --ks-bg:#F8FAFC; /* רקע הדף (site tokens --surface) */ --ks-bg-soft:#F1F5F9; /* משטח שקוע/סרגל (site tokens --surface-2) */ --ks-card:#FFFFFF; /* כרטיס (site tokens --bg) */ --ks-card-hover:#F8FAFC; --ks-line:#E2E8F0; /* קו/מסגרת (site tokens --border) */ --ks-txt:#0F172A; /* טקסט הדף. 16.6:1 על --ks-bg */ --ks-txt-dim:#5D6B7E; /* טקסט משני. 5.0:1 על --ks-bg */ /* ── צבע הפעולה. ההכרעה הכי רגישה בקובץ, ולכן היא כתובה כאן במלואה ───── ‎--accent הוותיק (הכתום ‎#ff8a3d) משמש בכלים גם כ*טקסט* (קישור, „פתח →", תווית חודש), גם כ*מסגרת* (hover של כרטיס, שדה בפוקוס) וגם כ*מילוי* (כפתור, צ'יפ נבחר). צבע אחד חייב לעבוד בשלושת התפקידים ובשני המצבים. הצהוב של המותג לא יכול למלא את התפקיד הזה: ‎#FFCC15 על לבן הוא 1.6:1, ולכן כקישור, כמסגרת וכטקסט הוא נכשל — והוא גם לא סובל טקסט לבן מעליו. הצהוב הוא **רקע לטקסט כהה בלבד**. זה כתוב במפורש ב-tokens.css של האתר. לכן: --ks-accent = צבע הפעולה. ‎--ks-resto של המותג (#C2410C) — אותה משפחת כתום שהכלים מכירים, רק שהיא עוברת AA. מתבהר ל-#E2622A במצב כהה, בדיוק כמו --resto-ink. טקסט: 5.18:1 בהיר · 5.62:1 כהה. --ks-accent-ink = הטקסט שיושב על מילוי --ks-accent. **מתהפך גם הוא**, כי המילוי עצמו מתבהר: לבן על ‎#C2410C = 5.18:1, ו---ks-ink על ‎#E2622A = 5.62:1. לבן על ‎#E2622A היה 3.0:1 — ולכן הוא לא יכול להיות קבוע. --ks-accent-brand = הצהוב עצמו, כ*מילוי* בלבד. כאן המותג נשמע: הכפתור הראשי. עם --ks-accent-brand-ink מעליו — 12.4:1. קבוע בשני המצבים (מילוי לא מתהפך). ‎--ks-accent-d נשאר כשם נרדף ל---ks-accent בשביל כלים שכבר קוראים לו. */ --ks-accent:var(--ks-resto-ink); --ks-accent-ink:var(--ks-pure-white); --ks-accent-d:var(--ks-accent); --ks-accent-brand:var(--ks-yellow); --ks-accent-brand-ink:var(--ks-ink); --ks-accent-soft:rgba(194,65,12,.12); /* הילת פוקוס רכה בגוון --ks-accent */ --ks-accent-line:rgba(194,65,12,.34); /* מסגרת בגוון --ks-accent */ --ks-accent-tint:rgba(255,204,21,.16); /* רקע רך בגוון הצהוב של המותג */ --ks-focus:var(--ks-accent); /* טבעת פוקוס. 5.0:1 על --ks-bg (הרף 3:1) */ /* סטטוס. ‎-f = מילוי (קבוע, לבן עליו עובר) · -ink = טקסט (מתבהר) */ --ks-ok-f:#15803D; /* לבן עליו 5.01:1 */ --ks-err-f:#B91C1C; /* לבן עליו 6.47:1 */ --ks-warn-f:#B45309; /* לבן עליו 5.02:1 */ /* ⚠ עוצמת ה-tint היא 6% ולא 10%. ב-10% הטקסט הירוק והכתום על גבי התג יורדים ל-4.38:1 ונכשלים ב-AA. ב-6%: ירוק 4.63:1 · כתום 4.63:1 · אדום 5.85:1. נמדד בפועל על .badge-ok במסך „מערכת". לא להחזיר ל-10%. */ --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-radius-sm בחבילת המותג */ --ks-r-md:12px; /* --ks-radius-md */ --ks-r-lg:16px; /* --ks-radius-lg */ --ks-r-pill:999px; --ks-tap:44px; /* יעד מגע. הרף של WCAG 2.2 AA */ --ks-tap-sm:36px; --ks-control-h:48px;/* --ks-control-height */ --ks-sp-2:8px; --ks-sp-3:12px; --ks-sp-4:16px; --ks-sp-5:20px; color-scheme:light dark; } /* ══ שכבה ב׳ — השמות שהמערכת כבר מכירה. הפניות בלבד ════════════════════ var() בתוך ערך של custom property נפתר בזמן שימוש, ולכן כל אחד מאלה עוקב אוטומטית אחרי מצב הצבע בלי שנחזור עליו בבלוק הכהה. */ :root{ /* ותיקים של app.css — ⚠ אסור לשנות שם */ --bg:var(--ks-bg); --bg-soft:var(--ks-bg-soft); --card:var(--ks-card); --card-hover:var(--ks-card-hover); --line:var(--ks-line); --txt:var(--ks-txt); --txt-dim:var(--ks-txt-dim); --accent:var(--ks-accent); --accent-soft:var(--ks-accent-soft); --ok:var(--ks-green-ink); --err:var(--ks-red-ink); --warn:var(--ks-warning); --radius:var(--ks-r-lg); --shadow:var(--ks-shadow); /* חדשים */ --text:var(--ks-txt); /* שם נרדף ל---txt. ads/km/att/cash קוראים לטקסט --text */ --ink:var(--ks-ink); /* ⚠ קבוע. לא טקסט של דף */ --pure-white:var(--ks-pure-white); --yellow:var(--ks-yellow); --green:var(--ks-green); --red:var(--ks-red); --resto:var(--ks-resto); --image:var(--ks-image); --resto-ink:var(--ks-resto-ink); --image-ink:var(--ks-image-ink); --green-ink:var(--ks-green-ink); --red-ink:var(--ks-red-ink); --warning:var(--ks-warning); --info:var(--ks-info); --accent-ink:var(--ks-accent-ink); --accent-d:var(--ks-accent-d); --accent-brand:var(--ks-accent-brand); --accent-brand-ink:var(--ks-accent-brand-ink); --accent-line:var(--ks-accent-line); --accent-tint:var(--ks-accent-tint); --focus:var(--ks-focus); --ok-f:var(--ks-ok-f); --ok-bg:var(--ks-ok-bg); --ok-line:var(--ks-ok-line); --err-f:var(--ks-err-f); --err-bg:var(--ks-err-bg); --err-line:var(--ks-err-line); --warn-f:var(--ks-warn-f);--warn-bg:var(--ks-warn-bg);--warn-line:var(--ks-warn-line); --info-bg:var(--ks-info-bg); --info-line:var(--ks-info-line); --shadow-lg:var(--ks-shadow-lg); --g50:var(--ks-g50); --g100:var(--ks-g100); --g200:var(--ks-g200); --g300:var(--ks-g300); --g400:var(--ks-g400); --g500:var(--ks-g500); --g700:var(--ks-g700); --g900:var(--ks-g900); --font:var(--ks-font); --font-mono:var(--ks-mono); --r-xs:var(--ks-r-xs); --r-sm:var(--ks-r-sm); --r-md:var(--ks-r-md); --r-lg:var(--ks-r-lg); --r-pill:var(--ks-r-pill); --tap:var(--ks-tap); --tap-sm:var(--ks-tap-sm); --control-h:var(--ks-control-h); --sp-2:var(--ks-sp-2); --sp-3:var(--ks-sp-3); --sp-4:var(--ks-sp-4); --sp-5:var(--ks-sp-5); } /* ══ מצב כהה. רק שכבה א׳ משתנה — שכבה ב׳ עוקבת מעצמה ═══════════════════ הרקעים מתהפכים, טוקני ה*טקסט* מתבהרים, טוקני ה*מילוי* (‎--ks-accent, --ks-ok-f, --ks-err-f, --ks-warn-f) נשארים כשהיו כדי שהטקסט שעליהם ימשיך לעבור AA. ⚠ שני הבלוקים חייבים להישאר זהים. */ @media (prefers-color-scheme:dark){ :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; /* ‎#C2410C נותן 2.6:1 על הרקע הכהה. מתבהר: 5.6:1 */ --ks-image-ink:#A78BFA; /* ‎#7C3AED נותן 3.3:1. מתבהר: 6.9:1 */ --ks-green-ink:#0DBD82; /* 6.76:1 */ --ks-red-ink:#F87171; /* 5.95:1 */ --ks-warning:#F59E0B; /* 7.67:1 */ --ks-info:#0EA5E9; /* 5.94:1 */ --ks-accent-ink:var(--ks-ink); /* המילוי מתבהר ל-#E2622A, ולכן הטקסט שעליו נהיה כהה: 5.62:1 */ --ks-accent-soft:rgba(226,98,42,.16); --ks-accent-line:rgba(226,98,42,.42); --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); } } :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-ink:var(--ks-ink); --ks-accent-soft:rgba(226,98,42,.16); --ks-accent-line:rgba(226,98,42,.42); --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); }