/* ============================================================================
   Arova · טוקני עיצוב
   ----------------------------------------------------------------------------
   זהו מקור האמת לכל ערך ויזואלי באתר: צבע, גודל טקסט, ריווח, אנימציה.
   כלל ברזל: קובץ CSS באתר לא כותב ערך קשיח (כמו 24px או #C6A75E) —
   הוא תמיד מושך משתנה מכאן. כך שינוי גוון אחד מתעדכן בכל האתר בבת אחת.
   ============================================================================ */

:root {

  /* ==========================================================================
     1. צבעי המותג
     ========================================================================== */

  /* שלושת הגוונים שנבחרו. הם המקור לכל השאר. */
  --brand-clay-light: #EADBCE;
  --brand-clay-mid:   #CBAB92;
  --brand-clay-deep:  #6E4E38;

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

     ⚠ כל גוון כויל מול הרקע הכהה ביותר שעליו הוא מופיע (#EADBCE)
     ולא מול הבהיר ביותר. כיול מול הבהיר בלבד הוא בדיוק הטעות שגרמה
     בעבר ל-navy-300 לעבור בעמוד הבית ולהיכשל בתוך כרטיס. */

  --clay-50:  #F6F0EA;   /* רקע ראשי של האתר */
  --clay-100: #F0E6DD;   /* מקטע מתחלף */
  --clay-200: #EADBCE;   /* ← נתון הלקוח — כרטיסים, הדגשת מקטע, תוויות */
  --clay-300: #D3C5B9;   /* קו מפריד רגיל */
  --clay-400: #CBAB92;   /* ← נתון הלקוח — הדגשה דקורטיבית, קווים על רקע כהה */
  --clay-500: #8F7867;   /* קו מודגש — 3.07:1 גם על הרקע הכהה ביותר */
  --clay-600: #795B47;   /* טקסט עזר — 4.56:1 גם על הרקע הכהה ביותר */
  --clay-700: #6E4E38;   /* ← נתון הלקוח — פסקאות */
  --clay-800: #513A29;   /* מחירים והדגשת טקסט */
  --clay-900: #3E2C1F;   /* כותרות, מקטע כהה, פוטר, כפתור ראשי */


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

  --color-surface:        var(--clay-50);    /* רקע ראשי */
  --color-surface-alt:    var(--clay-100);   /* רקע מקטע מתחלף */
  --color-surface-raised: #FFFFFF;           /* כרטיס שמורם מהרקע */
  --color-surface-dark:   var(--clay-900);   /* מקטע כהה — פוטר, כפתור ראשי */

  --color-text:        var(--clay-900);  /* כותרות וטקסט ראשי — 11.72:1 */
  --color-text-soft:   var(--clay-700);  /* פסקאות — 6.61:1 */
  --color-text-muted:  var(--clay-600);  /* תוויות, הערות — 5.46:1 */
  --color-text-invert: var(--clay-200);  /* טקסט על רקע כהה — 9.79:1 */
  /* טקסט משני על רקע כהה. השקיפות המינימלית שעדיין עוברת AA היא .60
     (4.58:1); .72 נבחר כדי להשאיר מרווח ביטחון — 5.88:1.
     בפוטר היו ערכי rgba קשיחים של .5 ו-.55 שנתנו 3.68 ו-4.10 ונכשלו. */
  --color-text-invert-soft: rgba(234, 219, 206, .72);

  --color-accent:      var(--clay-400);  /* הדגשה ויזואלית — קו, אייקון, מסגרת */
  --color-accent-text: var(--clay-800);  /* הדגשה כטקסט על רקע בהיר — 9.35:1 */
  --color-accent-soft: var(--clay-400);  /* הדגשה על רקע כהה — 6.17:1 */

  --color-line:        rgba(62, 44, 31, .14);    /* קו מפריד על רקע בהיר */
  /* מסגרת שדה טופס וצ׳יפ מסנן — הגבול הוא הדבר היחיד שמסמן איפה השדה
     מתחיל, ולכן WCAG 1.4.11 דורש לו 3:1. גוון מלא ולא שקיפות, כדי
     שהיחס יישאר קבוע ולא ישתנה לפי הרקע שמתחתיו. */
  --color-line-strong: var(--clay-500);          /* קו מודגש, מסגרת שדה */
  --color-line-invert: rgba(234, 219, 206, .22); /* קו על רקע כהה */

  /* טבעת פוקוס. בעבר כחול מובהק; בפלטה החדשה אין כחול, ולכן הגוון
     הכהה ביותר — 11.72:1 מול רקע העמוד, הרבה מעל הנדרש. */
  --color-focus: var(--clay-900);

  /* מצבי מערכת — נשארים כפי שהם בכוונה.
     שגיאה חייבת להיראות כשגיאה, והצלחה כהצלחה. אילו צבענו אותן בחמרה
     הן היו נבלעות בעיצוב ומאבדות את התפקיד שלהן. */
  --color-success: #2E7D5B;
  --color-error:   #B0344B;
  --color-warning: #A8761E;


  /* ==========================================================================
     3. טיפוגרפיה
     הגדלים משתנים לפי רוחב המסך באמצעות clamp() — מינימום, גמיש, מקסימום.
     כך אין צורך ב-media query נפרד לכל גודל טקסט.
     ========================================================================== */

  --font-heading-he: 'Noto Serif Hebrew', 'David Libre', Georgia, serif;
  --font-heading-en: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --font-body:       'Rubik', 'Assistant', system-ui, -apple-system, sans-serif;
  --font-mono:       ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* פונט הכותרות מתחלף אוטומטית לפי שפת העמוד — ההגדרה ב-typography.css */
  --font-heading: var(--font-heading-he);

  /* ---- סקאלת גדלים ---- */
  --text-2xs:     0.6875rem;                          /* 11px — תוויות זעירות */
  --text-xs:      0.75rem;                            /* 12px */
  --text-sm:      0.875rem;                           /* 14px */
  --text-base:    1rem;                               /* 16px — גוף טקסט */
  --text-lg:      1.125rem;                           /* 18px — פסקת פתיחה */
  --text-xl:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl:     clamp(1.5rem,  1.3rem + 1vw,   2rem);
  --text-3xl:     clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);
  --text-4xl:     clamp(2.25rem,  1.7rem + 2.6vw, 3.75rem);
  --text-display: clamp(2.75rem,  1.9rem + 4vw,   5rem);   /* כותרת היירו */

  /* ---- משקלים ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ---- גובה שורה ----
     כותרת גדולה צריכה שורות צפופות; פסקה צריכה שורות מרווחות. */
  --leading-tight:   1.14;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  /* ---- ריווח אותיות ----
     ריווח חיובי בכותרות קטנות ובאותיות גדולות משדר יוקרה.
     בעברית ריווח אותיות פוגע בקריאות — לכן מוגדר 0 ומופעל רק על לטינית. */
  --tracking-wide:  0.08em;
  --tracking-wider: 0.2em;    /* לתוויות UPPERCASE באנגלית בלבד */
  --tracking-none:  0;

  /* רוחב שורה מרבי לקריאות — מעל ~70 תווים העין מאבדת את השורה */
  --measure:        68ch;
  --measure-narrow: 46ch;


  /* ==========================================================================
     4. ריווח
     סקאלה על בסיס 4px. באתר יוקרה עדיף תמיד הערך הגדול יותר —
     צפיפות היא מה שמבדיל אתר זול מאתר יקר.
     ========================================================================== */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-9:  4rem;      /* 64px */
  --space-10: 5rem;      /* 80px */
  --space-11: 6.5rem;    /* 104px */
  --space-12: 8rem;      /* 128px */

  /* ריווח אנכי בין מקטעים — גדל עם המסך */
  /* ריווח בין מקטעים — שלוש דרגות ולא ערך אחד.
     קודם היה כאן ערך יחיד שהוחל על כל מקטע בכל עמוד, כלומר היחס בין
     המרווח הגדול לקטן היה 1:1. ריווח אחיד הוא מה שגורם לאתר להיראות
     כמו תבנית: אין היררכיה, ואי אפשר לדעת מה מקטע ראשי ומה משני. */
  --section-gap-sm: clamp(2.5rem, 1.4rem + 4vw, 4rem);   /* 40→64  — רשת צפופה, נתונים */
  --section-gap:    clamp(3.5rem, 2rem + 6vw,   7rem);   /* 56→112 — ברירת מחדל */
  --section-gap-lg: clamp(5rem,   3rem + 8vw,   9rem);   /* 80→144 — מקטע הצהרתי, סיום */


  /* ==========================================================================
     5. פריסה
     ========================================================================== */

  --container:        1240px;   /* רוחב תוכן מרבי */
  --container-narrow: 760px;    /* לטקסט ארוך — מאמר, תנאי שימוש */
  --gutter:           clamp(1.25rem, 4vw, 3rem);   /* שוליים מהקצה */

  /* הוגדל מ-76 כדי לתת ללוגו ולניווט יותר נוכחות */
  --header-height: 96px;


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

  --radius-none: 0;
  /* 2px ו-4px הם כמעט פינה חדה — הם נקראים כברירת מחדל של דפדפן
     ולא כהחלטה עיצובית. הועלו לערכים שהעין מזהה כמכוונים. */
  --radius-sm:   4px;      /* תגיות */
  --radius-field: 8px;     /* שדה טופס — רך מספיק כדי לא להיראות
                              כמו טופס מערכת, חד מספיק כדי לא
                              להיראות כמו כפתור */
  --radius-md:   10px;     /* כרטיסים, לוחות */
  --radius-lg:   16px;     /* מדיה גדולה */
  --radius-pill: 999px;
  /* כפתורים מעוגלים לגמרי. זה ההבדל הוויזואלי הגדול ביותר בין
     כפתור שנראה כמו רכיב מעוצב לבין מלבן. */
  --radius-btn:  999px;

  --field-height: 46px;    /* גובה שדה. 52 היה גבוה מדי ונתן לטופס
                              קצר מראה של שאלון */
  --border-hair: 1px;
  --border-thin: 1.5px;

  --shadow-sm: 0 1px 2px rgba(30, 21, 15, .04);
  --shadow-md: 0 4px 16px rgba(30, 21, 15, .06);
  --shadow-lg: 0 18px 48px rgba(30, 21, 15, .10);
  /* צל ייעודי למצב hover של כפתור. עמוק ורווי מ-shadow-lg, שנועד
     לכרטיס במנוחה — כאן הוא צריך להיקרא כהרמה מהמשטח. */
  --shadow-hover: 0 14px 22px -8px rgba(30, 21, 15, .30),
                  0 30px 60px -12px rgba(30, 21, 15, .22);


  /* ==========================================================================
     7. תנועה
     אנימציה מהירה וקופצנית משדרת זול. איטית ורכה משדרת יוקרה.
     ========================================================================== */

  --duration-fast:   200ms;   /* שינוי צבע, hover */
  --duration-base:   400ms;   /* מעברי ברירת מחדל */
  --duration-slow:   650ms;   /* כניסת אלמנט למסך */
  --duration-slower: 900ms;   /* אנימציית היירו */

  --ease-out:   cubic-bezier(.22, .61, .36, 1);    /* יציאה רכה — ברירת המחדל */
  --ease-in-out:cubic-bezier(.65, .05, .36, 1);
  --ease-luxe:  cubic-bezier(.16, 1, .3, 1);       /* האטה ארוכה ומעודנת */
  /* חריגה קלה מעבר ליעד וחזרה. זה מה שגורם לתנועה להיות מורגשת
     ולא רק לקרות. 1.32 ולא יותר — מעבר לזה זה נקרא שובבי ולא יוקרתי. */
  --ease-pop:   cubic-bezier(.34, 1.32, .48, 1);

  --transition-base: all var(--duration-base) var(--ease-out);

  /* מרחק ההחלקה של תוכן שנכנס למסך, והכיוון שלו.
     transform הוא תמיד פיזי ואינו מתהפך לפי כיוון הקריאה, ולכן
     הסימן נקבע כאן במפורש: התוכן נכנס תמיד מהצד שממנו העין
     מתחילה לקרוא — מימין בעברית, משמאל באנגלית. */
  --enter-shift: -44px;
  --enter-step:  110ms;


  /* ==========================================================================
     8. שכבות
     ========================================================================== */

  --z-base:    1;
  --z-sticky:  100;
  --z-dropdown: 150;   /* תפריט צף — מעל תוכן דביק, מתחת להאדר */
  --z-header:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}

html[dir="rtl"] { --enter-shift: 44px; }


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

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   1ms;
    --duration-base:   1ms;
    --duration-slow:   1ms;
    --duration-slower: 1ms;
  }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}