/* ==========================================================================
   אביה סטודיו — אסימוני עיצוב
   נגזר מתוך ספר המותג. אין ערך צבע, גודל או מרווח בשום קובץ אחר.
   מקור: aviya/docs/02-design-language.md
   ========================================================================== */

:root {
  /* --- צבע: ראשיים (ספר המותג) --- */
  --av-charcoal:    #3D3D3D;
  --av-stone:       #8A8A85;
  --av-cream:       #F5F2ED;

  /* --- צבע: משניים (ספר המותג) --- */
  --av-gold:        #B8956B;
  --av-gold-warm:   #C4A265;
  --av-black:       #1A1A1A;

  /* --- צבע: ניטרליים (ספר המותג) --- */
  --av-gray-light:  #E8E5E0;
  --av-gray-med:    #6B6B67;
  --av-offwhite:    #FAFAF8;

  /* --- צבע: נגזרים (לא בספר המותג, ראו סעיף 2.2) --- */
  --av-gold-deep:   #7A5C34;  /* קישור וכותרת-על על רקע בהיר */
  --av-gold-press:  #A98A55;  /* זהב במצב לחיצה */
  --av-gold-soft:   #EFE7D9;  /* רקע תג רך */
  --av-line-dark:   #2E2E2E;  /* קו הפרדה בתוך שטח שחור */
  --av-line-light:  #D8D4CC;  /* קו הפרדה ומסגרת כרטיס */
  --av-field-line:  #B4AFA6;  /* גבול שדה טופס */
  --av-gray-raised: #65655F;  /* טקסט משני על משטח מוגבה. 6B6B67 נותן שם 4.26 בלבד */

  /* --- תפקידים --- */
  --av-bg:          var(--av-cream);
  --av-bg-raised:   var(--av-gray-light);
  --av-bg-field:    var(--av-offwhite);
  --av-text:        var(--av-black);
  --av-text-2:      var(--av-charcoal);
  --av-text-3:      var(--av-gray-med);
  --av-link:        var(--av-gold-deep);

  /* --- טיפוגרפיה --- */
  /* שני גופנים שנוצרו לעברית מלכתחילה, שניהם של עודד עזר.
     סקולר וואן לכותרות: גיאומטרי עם אופי, עברי לגמרי.
     היבו לגוף: ניטרלי, תשעה משקלים, קריא מאוד במסך קטן.
     אותו יוצר נותן הרמוניה, והתפקידים השונים נותנים ניגוד. */
  --av-font-display: 'Secular One', 'Heebo', 'Arial Hebrew', sans-serif;
  --av-font-body:    'Heebo', 'Arial Hebrew', system-ui, -apple-system, sans-serif;

  /* סולם נוזלי. הגודל נגזר מרוחב המסך ולא קופץ בנקודת שבירה אחת,
     ולכן אין יותר כותרת 64 פיקסלים על מסך של 800. */
  --av-t-h1:      clamp(38px, 1.6rem + 3.4vw, 76px);   --av-lh-h1: 1.06;
  --av-t-h2:      clamp(30px, 1.4rem + 1.9vw, 52px);   --av-lh-h2: 1.14;
  --av-t-h3:      clamp(25px, 1.2rem + 1.2vw, 38px);   --av-lh-h3: 1.22;
  --av-t-h4:      clamp(21px, 1.1rem + 0.6vw, 29px);   --av-lh-h4: 1.3;
  --av-t-h5:      clamp(18px, 1rem + 0.3vw, 21px);     --av-lh-h5: 1.35;
  --av-t-body:    16px;  --av-lh-body:    24px;
  --av-t-long:    clamp(16px, 0.95rem + 0.2vw, 18px);  --av-lh-long: 1.75;
  --av-t-lead:    clamp(18px, 1rem + 0.55vw, 23px);    --av-lh-lead: 1.6;
  --av-t-small:   13px;  --av-lh-small:   19px;
  --av-t-price:   clamp(19px, 1rem + 0.35vw, 22px);    --av-lh-price: 1.25;
  --av-t-over:    12px;  --av-ls-over:    0.22em;

  /* --- מרווח: בסיס 8 (ספר המותג) --- */
  --av-s-1:  8px;   --av-s-2: 16px;  --av-s-3: 24px;  --av-s-4: 32px;
  --av-s-5: 40px;   --av-s-6: 48px;  --av-s-7: 64px;  --av-s-8: 80px;
  --av-section: 96px;

  /* --- פריסה --- */
  --av-content: 1240px;
  --av-gutter:  100px;
  --av-grid-gap: 24px;

  /* --- צורה --- */
  --av-r-control: 4px;   /* כפתור ושדה */
  --av-r-card:    2px;   /* כרטיס ותמונה */
  --av-r-arch:    130px 130px 2px 2px;

  /* משקל התצוגה.
     נוטו סריף עברי במשקל 500 נותן נוכחות שפרנק רוהל 400 לא נתן,
     בעיקר על רקע כהה שם האותיות הדקות פשוט התמוססו.
     על כהה עולים למשקל 600, כי טקסט בהיר על כהה נקרא דק יותר. */
  --av-w-display: 400;
  --av-w-display-strong: 400;

  /* --- גובה בקרה --- */
  --av-control:   52px;
  --av-control-lg: 56px;

  /* --- צל --- */
  --av-shadow-card: 0 14px 34px -18px rgba(26, 26, 26, 0.45);
  --av-glow-gold:   0 0 22px rgba(196, 162, 101, 0.5);

  /* --- תנועה --- */
  --av-t-fast: 160ms ease;
  --av-t-slow: 220ms ease;
}

@media (max-width: 1200px) {
  :root { --av-gutter: 48px; }
}

@media (max-width: 782px) {
  :root {
    --av-gutter: 20px;
    --av-section: 64px;
    --av-grid-gap: 14px;
  }
}
}