/* ============================================================================
   פאזל — טוקני העיצוב · "Sunrise Glow"
   ============================================================================

   נכתב 2.09.2026. הפלטה עצמה הוכרעה 28.08 ומתועדת ב-docs/pazel-master.md
   חלק ד'. הקובץ הזה הוא היישום שלה, והוא נטען לפני styles.css.

   למה טוקנים לפני מסכים
   ---------------------
   המסמך המרכז קובע: "השלב הראשון ביישום — משתני CSS. כל הפלטה כטוקנים לפני
   שנוגעים במסך אחד, אחרת נצבור חוב מיד." מסך שמעוצב בערכים ידניים צריך
   להיכתב מחדש כשמשנים החלטה אחת. כאן משנים במקום אחד.

   הכלל היחיד שאסור להפר
   ---------------------
   אין ערך צבע, מרווח או רדיוס שנכתב ישירות ב-styles.css. הכול דרך var().
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------- מותג ---
     חמישה צבעים, לכל אחד תפקיד אחד בדיוק. האדום נמחק בכוונה: הוא נשא שלושה
     תפקידים סותרים (מותג, שגיאה, הסרה) ובלבל. אם תידרש שגיאה — --danger. */
  --navy:      #233A47;   /* מבנה, כותרות, טקסט ראשי, הדר */
  /* --orange מוגדר למטה, יחד עם --orange-cta */
  --turquoise: #5FA08D;   /* שולם, הושלם */
  --yellow:    #F9CE47;   /* שים לב, ממתין */
  --sage:      #9CBE7B;   /* משתתף */

  /* גוונים כהים לטקסט בלבד. הצבעים למעלה נועדו למשטחים ולמילויים; חלקם
     נכשלים בניגודיות מול לבן, ולכן לכל אחד יש כאן תאום קריא.
     כל הערכים כאן נמדדו ולא הוערכו — scripts/check-contrast.js מריץ את
     המדידה מחדש בכל פעם. --orange-ink הוכהה מ-#C4560A שנתן 4.48:1, כלומר
     נכשל בשתי מאיות. ⚠️ --yellow הוא 1.51:1 מול לבן — לעולם לא לטקסט. */
  --orange-ink:    #B24A04;
  --turquoise-ink: #2F6B58;
  --yellow-ink:    #8A6200;
  --sage-ink:      #4F6B36;

  /* גרסאות רכות למילוי רקע של תגיות ופסים */
  --orange-soft:    #FEF0E6;
  --turquoise-soft: #EAF3F0;
  --yellow-soft:    #FEF7E2;
  --sage-soft:      #F0F5E9;

  /* ------------------------------------------------------------- משטחים ---
     לא לבן טהור לרקע: הפלטה חמה, ולבן טהור נלחם בה — הכתום נקרא כזועק. */
  /* רקע המסך — חול רך. הועמק מ-#FDFAF6 ב-2.09: הגרסה הקודמת נקראה כלבן,
     והכרטיסים הלבנים כמעט לא נפרדו ממנה. ההעמקה נותנת לכרטיס להיראות
     כמשטח שצף מעל הרקע — וזה מה שמייצר את תחושת העומק. */
  --bg:          #F1EADD;
  /* משטח חם ולא לבן טהור. נתנאל חזר על "הרקע לבן" ארבע פעמים לאורך
     2.09 — ולבן טהור בתוך פלטה חמה באמת נקרא כזר, כמו נייר שהודבק על
     שולחן עץ. הגוון הזה עדיין מרים את הכרטיס מהרקע (1.15:1), אבל הוא
     שייך לאותה משפחה. שינוי הטוקן הזה מטפל בכל המשטחים בבת אחת. */
  --surface:     #FDFAF5;
  --surface-sunk:#F5F2ED;  /* כרטיס שקוע — פריט לא פעיל */
  --border:      #E8E3DA;
  /* גבול נתפס: הוא הגדרה היחידה של שבבים וכפתורים משניים אחרי שהמילוי
     הלבן הוסר, ולכן הוא רכיב ממשק שדורש 3:1 — לא קישוט. #D6CFC2 נתן
     1.55:1 והיה בלתי נראה כמעט. */
  --border-strong:#8C7F66;

  /* --------------------------------------------------------------- טקסט ---
     שתי רמות בלבד. שלוש רמות אפור מייצרות היררכיה מדומה שאיש לא קורא. */
  --text:     #233A47;   /* 12.6:1 מול --bg */
  /* הוכהה פעמיים. #7A8B93 המקורי נתן 3.4:1, ו-#5F7079 ירד ל-4.30:1
     כשהרקע הועמק ל-#F1EADD — כלומר תיקון אחד יצר את הכשל הבא. */
  --text-soft:#556770;
  --text-on-dark: #FDFAF6;

  /* -------------------------------------------------------------- שגיאה ---
     צבע אחד, לשגיאה אמיתית בלבד. לא להסרה ולא לאזהרה. */
  --danger:      #C0392B;
  --danger-soft: #FBEAE8;

  /* ------------------------------------------------------------- משתתפים ---
     צבע קבוע לכל משתתף, נגזר דטרמיניסטית מ-personId דרך personColor().
     שישה גוונים שנבדלים זה מזה גם בעיוורון צבעים, וכולם עוברים 4.5:1 מול לבן
     כדי שאפשר יהיה לכתוב עליהם אות ראשונה.
     נבדק: כולם עוברים 4.5:1 עם טקסט לבן, והזוג הקרוב ביותר בגלגל הגוונים
     רחוק 49° — כלומר הם נבדלים גם למי שאינו מבחין בין אדום לירוק.
     ⚠️ צבע לבדו לעולם לא מספיק — כל מצב נושא גם אייקון וגם טקסט. */
  /* חמישה צבעי משתתפים. הירוק ירד ב-3.09 — הוא היה זהה ל---turquoise-ink
     שהוא צבע "שולם", וכרטיס משתתף נראה כמו כרטיס ששולם. */
  --p1: #3A5F8A;   /* 212° */
  --p2: #B24A04;   /*  24° */
  --p3: #7B4E96;   /* 278° */
  --p4: #A83E6B;   /* 335° */
  --p5: #55701F;   /*  80° */

  /* -------------------------------------------------------------- מרווח ---
     סולם של 4px. מספר שאינו בסולם הוא כמעט תמיד טעות. */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;  --s9: 56px;

  /* ------------------------------------------------------------- רדיוסים --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* -------------------------------------------------------------- צללים ---
     שטוח. הוסרו 2.09 אחרי ביקורת של נתנאל — "נראה כמו הדבקה של דברים על
     רקע" — ואחרי ש-ui-ux-pro-max החזיר את אותה מסקנה בשני חיפושים נפרדים:
     "Flat Design · no shadows" ו-"--shadow: none · avoid shadows".

     הסיבה עניינית ולא טעם: **צל הוא בדיוק מה שגורם לאלמנט להיראות מונח
     מעל משטח במקום להיות חלק ממנו.** משטח נפרד עכשיו בניגודיות ובקו גבול,
     לא בגובה מדומה. זה גם הדפוס של כל ממשק עכשווי.

     נשאר צל אחד — לשכבה שבאמת מרחפת מעל הכול (דו-שיח, גיליון). שם הוא
     נושא מידע: הוא אומר "זה חוסם את מה שמתחת". */
  /* עודכן שוב 2.09 — הפעם למרכז.
     הגרסה הראשונה השתמשה בצללים כבדים ונקראה כ-2015. הסרתי אותם לגמרי,
     והתוצאה נקראה **מתה**. ui-ux-pro-max נתן את הכיוון בשם מדויק:
     "Soft UI Evolution — softer than flat, clearer than neumorphism".
     עומק עדין ורב-שכבתי שמרים את המשטח מהרקע בלי להכריז על עצמו. */
  --shadow-1: 0 1px 2px rgba(35,58,71,.05), 0 2px 8px rgba(35,58,71,.05);
  --shadow-2: 0 2px 4px rgba(35,58,71,.06), 0 8px 24px rgba(35,58,71,.07);
  --shadow-cta: 0 2px 6px rgba(196,78,5,.22), 0 8px 20px rgba(196,78,5,.18);
  --shadow-3: 0 12px 40px rgba(35,58,71,0.18);

  /* שני כתומים, ולכל אחד תפקיד אחד.
     ---------------------------------
     --orange הוא כתום המותג. הוא צובע משטחים ומדגישים בלבד — פס
     התקדמות, פס בקצה שורה שנבחרה, תגיות. **לא יושב עליו טקסט לעולם**,
     ולכן הבהירות שלו היא נכס ולא בעיה.

     --orange-cta הוא הכתום של הכפתור, והוא נושא טקסט לבן.
     הגרסה הראשונה שמה טקסט נייבי על הכתום הבהיר, כי לבן נתן 2.59:1
     ונכשל. נתנאל פסל את המראה הזה 2.09 — "הכיתוב השחור על הכתום".
     הבדיקה הראתה שאין דרך אמצע: כדי שלבן יעבור, הכתום חייב לרדת
     ל-#C44E05 לפחות. הפיצול הזה שומר את שני הדברים — מותג חי,
     וכפתור קריא. */
  --orange:       #F8802A;
  --orange-cta:   #C44E05;   /* לבן עליו: 4.73:1 */
  --on-orange:    #FFFFFF;

  /* --------------------------------------------------------- טיפוגרפיה ---
     סאנס בלבד, כולל למספרים. המונוספייס נתן תחושת קבלה ישנה — בדיוק מה
     שהעיצוב הזה בא להסיר.
     --num הוא הגיבור: הסכום שלך בגודל שאי אפשר לפספס. */
  /* Rubik — נבחר 2.09 מתוך ארבע חלופות שנבדקו בהשוואה ויזואלית.
     הוא עגול וידידותי יותר מ-Assistant בלי לוותר על רצינות, ויש לו טווח
     משקלים רחב (300–900) שמאפשר את הניגוד הטיפוגרפי שהמסך צריך.
     נבחר גם משום שהוא תוכנן לעברית ולטינית יחד — והלוגו הוא "Pazel". */
  --font: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --t-xs:   13px;
  --t-sm:   14.5px;
  --t-base: 16px;   /* ⚠️ מינימום מוחלט לכל שדה קלט — iOS מזים מתחת לזה */
  --t-lg:   18px;
  --t-xl:   22px;
  --t-2xl:  28px;
  --num-sm: 20px;
  --num-md: 30px;
  --num-hero: 44px;

  --lh-tight: 1.2;
  --lh-body:  1.5;

  --w-normal: 400;
  --w-med:    600;
  --w-bold:   700;
  --w-black:  800;

  /* מספרים בעברית RTL: ספרות בעלות רוחב אחיד לא "קופצות" כשהסכום מתעדכן
     בזמן אמת, וזה קורה כאן בכל חטיפה של פריט. */
  --num-feat: tabular-nums;

  /* ---------------------------------------------------------------- מגע ---
     44px הוא המינימום של אפל, 48 של גוגל. לוקחים את הגדול — התנאי האמיתי
     הוא יד אחת, בעמידה, כשכולם ממהרים. */
  --tap-min: 48px;

  /* -------------------------------------------------------------- תנועה ---
     תנועה שהיא משוב — כן. תנועה שהיא קישוט — לא. שום דבר מעל 300ms. */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* כניסה ויציאה אינן סימטריות. אלמנט שנכנס צריך שהעין תספיק לעקוב אחריו;
     אלמנט שיוצא כבר נקרא, וכל מילישנייה נוספת היא המתנה. היחס ~2:3
     הוא ההמלצה של Material Motion, ומה שגורם לממשק להרגיש זריז
     בלי שהתנועה תיראה חטופה. */
  --dur-enter: 225ms;
  --dur-exit: 150ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* -------------------------------------------------------------- מיקוד ---
     טבעת מיקוד גלויה היא דרישת נגישות, לא קישוט. אסור להסתיר בלי חלופה. */
  --focus-ring: 0 0 0 3px rgba(248,128,42,0.45);

  /* ----------------------------------------------------------- שכבות ז' --- */
  --z-sticky: 50;
  --z-banner: 80;
  --z-overlay: 100;
  --z-toast: 120;
}

/* מכבדים משתמש שביקש פחות תנועה. הכלל הזה גורף בכוונה: קל לשכוח אנימציה
   בודדת, וברירת מחדל בטוחה עדיפה על רשימה שצריך לתחזק. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-enter: 0ms; --dur-exit: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* מסך בניגודיות גבוהה — מחזקים גבולות במקום להסתמך על צל בלבד. */
@media (prefers-contrast: more) {
  :root { --border: #B9B0A0; --border-strong: #8C8375; --text-soft: #4A5A63; }
}

/* אייקוני SVG מוטבעים. קו אחיד, יורשים צבע מהטקסט, ומיושרים לגובה השורה.
   מחליפים את האימוג'ים — ראה js/config.js. */
.ic {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.19em;
}
.ic.solid { fill: currentColor; stroke: none; }

/* ============================================================================
   מצב כהה
   ============================================================================
   נוסף 2.09. הסיבה אינה אופנה: **פאזל משמשת בערב, במסעדה, בתאורה נמוכה**
   — בדיוק המצב שבו מסך בהיר מסנוור ומי שמסתכל עליו נראה כמו מי שמסתיר
   את הטלפון. זה גם הפער הבולט ביותר מול אפליקציה של 2026.

   העיקרון: לא היפוך. גוונים כהים מדושנים פחות, וטקסט שאינו לבן טהור —
   לבן טהור על שחור יוצר הילה ומעייף. הניגודיות נמדדת בנפרד לכל מצב;
   ערכים שעובדים בבהיר אינם מבטיחים כלום בכהה.

   הפעלה: לפי העדפת המערכת בלבד. אין מתג בממשק — עוד החלטה שהמשתמש לא
   צריך לקבל, והמערכת כבר יודעת את התשובה.
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* משטחים — כהה עם נגיעת נייבי, לא שחור. שחור טהור נראה כחור. */
    --bg:           #16212A;
    --surface:      #1E2C36;
    --surface-sunk: #18242D;
    --border:       #2C3D49;
    --border-strong:#41586A;

    /* טקסט — שמנת ולא לבן טהור */
    --text:         #E8EEF2;
    --text-soft:    #A0B2BE;
    --text-on-dark: #E8EEF2;

    /* המותג — הכתום מתבהר מעט כדי לשמור נוכחות על רקע כהה */
    --navy:         #101A22;
    --orange:       #FF8F3D;
    --orange-cta:   #E0670F;
    --on-orange:    #16212A;
    --orange-ink:   #FFA867;
    --orange-soft:  #33241A;
    --turquoise:    #6FB9A3;
    --turquoise-ink:#8FD3BC;
    --turquoise-soft:#17302A;
    --yellow-ink:   #E5C56A;
    --yellow-soft:  #322A16;
    --sage-ink:     #A9C98A;
    --sage-soft:    #232D1B;
    --danger:       #F08579;
    --danger-soft:  #35201E;

    /* צבעי המשתתפים מתבהרים — הכהים נבלעים ברקע הכהה */
    --p1: #6B9BD0;
    --p2: #E8823A;
    --p3: #B183CE;
    --p4: #E0709F;
    --p5: #92B84E;

    /* צל כמעט לא נראה על כהה — ההפרדה עוברת לגבול */
    --shadow-1: 0 1px 2px rgba(0,0,0,.35);
    --shadow-2: 0 2px 6px rgba(0,0,0,.4);
    --shadow-3: 0 12px 40px rgba(0,0,0,.55);
    --shadow-cta: 0 2px 10px rgba(224,103,15,.32);
    --focus-ring: 0 0 0 3px rgba(255,143,61,.5);
  }
}

/* הסמל — ארבע חתיכות מלאות, אחת בצבע המותג.
   הגרסה הקודמת הייתה קווי מתאר בעובי 9 יחידות, והיא נמרחה ונעלמה
   בגדלים קטנים — בדיוק במקומות שבהם סמל עובד: אייקון אפליקציה, לשונית
   דפדפן, תצוגה מקדימה בוואטסאפ. הבריף של סקיל העיצוב אמר את זה במפורש:
   "Flat Design — simple shapes, no gradients".

   החתיכה הכתומה היא **החלק שלך** — אותה מטאפורה שחוזרת בחגיגת הסיום. */
.pz-navy   { fill: var(--navy); }
.pz-accent { fill: var(--orange); }
body:not([data-screen="landing"]) .brand .pz-navy { fill: var(--text-on-dark); }

/* 🔴 במצב כהה --navy כמעט זהה לרקע (1.1:1) והסמל נעלם. הוא חייב לקבל
   את צבע הטקסט. נתפס בבדיקה אוטומטית 2.09, לא בעין — הצבעים כל כך
   קרובים שהעין מפספסת את זה בצילום. */
@media (prefers-color-scheme: dark) {
  .pz-navy { fill: var(--text); }
}

/* התפרים בין חתיכות הפאזל. בלעדיהם שלוש החתיכות הכהות נמזגו לגוש אחד
   ונתנאל לא זיהה בהן פאזל — "לא מזהים 4 חתיכות". קו בצבע הרקע סביב כל
   חתיכה יוצר את המרווח שהעין צריכה כדי להפריד ביניהן. */
.pz-navy path, .pz-accent {
  stroke: var(--bg);
  stroke-width: 5;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
body:not([data-screen="landing"]) .brand .pz-navy path,
body:not([data-screen="landing"]) .brand .pz-accent { stroke: var(--navy); }