/* ==========================================================================
   ECHO — Light & Sound · Design Tokens
   נגזר מהחומרים: לומיננס דומיננטי 5-19%, גוונים 240° / 210° / 270° / 330° / 180°
   כל ערך בקוד האתר חייב להגיע מכאן. אפס ערכים קשיחים בעמודים.
   ========================================================================== */

:root {
  /* ---------- צבע: בסיס ---------- */
  --color-bg:          #05060D;  /* כמעט שחור עם הטיית אינדיגו — הגוון הדומיננטי בחומרים */
  --color-bg-deep:     #020309;  /* לשכבות מתחת, ל-hero ולפוטר */
  --color-surface:     #0C0F1C;  /* כרטיסים */
  --color-surface-2:   #141A30;  /* כרטיס מורם / hover */
  --color-line:        rgba(255, 255, 255, 0.09);
  --color-line-strong: rgba(255, 255, 255, 0.18);

  /* ---------- צבע: טקסט ---------- */
  --color-text:        #F2F4FA;
  --color-text-dim:    #8F97B0;
  --color-text-faint:  #5A6280;

  /* ---------- צבע: מותג (נדגם מקובץ הלוגו האמיתי) ---------- */
  --color-brand:       #6E4BFF;  /* הסגול המרכזי של הוורדמארק */
  --color-brand-deep:  #4A2FCC;  /* הקצה הכהה בגרדיאנט הלוגו */
  --color-brand-light: #B899FF;  /* הקצה הבהיר — משמש בהיפוך על רקע כהה */

  /* ---------- צבע: אור (מהפרוז'קטורים בחומרים) ---------- */
  --color-accent:      #17E0D4;  /* טורקיז — CTA בלבד. משלים לסגול, ולכן קופץ. */
  --color-accent-deep: #0FB5AC;
  --color-magenta:     #FF2E7E;  /* הדגשה שלישונית בלבד — לא CTA */
  --color-amber:       #FFAE57;  /* ענבר — הבלינדרים החמים */
  --color-accent-contrast: #04211F;  /* טקסט כהה על הטורקיז — ניגודיות 9.8:1 */

  /* ---------- גרדיאנטים ---------- */
  --grad-brand:  linear-gradient(100deg, var(--color-brand-light) 0%, var(--color-brand) 55%, var(--color-brand-deep) 100%);
  --grad-cta:    linear-gradient(100deg, var(--color-accent) 0%, var(--color-brand-light) 130%);
  --grad-beam:   linear-gradient(180deg, rgba(110,75,255,.42) 0%, rgba(110,75,255,0) 78%);
  --grad-veil:   linear-gradient(180deg, rgba(5,6,13,.24) 0%, rgba(5,6,13,.62) 52%, var(--color-bg) 100%);

  /* ---------- טיפוגרפיה ---------- */
  --font-display: 'Heebo', system-ui, sans-serif;      /* כותרות — הנדסי, הדוק */
  --font-body:    'Assistant', system-ui, sans-serif;  /* גוף — עברית קריאה, הומניסטי */
  --font-mono:    'Space Grotesk', ui-monospace, monospace; /* לטינית, מספרים, תוויות טכניות */

  --fs-hero:   clamp(2.9rem, 8.4vw, 8.2rem);
  --fs-h1:     clamp(2.3rem, 5.6vw, 5rem);
  --fs-h2:     clamp(1.9rem, 4.2vw, 3.4rem);
  --fs-h3:     clamp(1.3rem, 2.2vw, 1.85rem);
  --fs-body:   1.0625rem;
  --fs-sm:     0.9375rem;
  --fs-label:  0.75rem;    /* תוויות טכניות — לטינית בלבד, אף פעם לא עברית */

  --lh-tight:  0.94;
  --lh-head:   1.08;
  --lh-body:   1.65;

  --ls-label:  0.16em;     /* letter-spacing מותר אך ורק על לטינית */
  --ws-body:   0.02em;     /* word-spacing נדיב לעברית */

  /* ---------- ריווח ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 16px;  --space-4: 24px;
  --space-5: 40px;  --space-6: 64px;  --space-7: 96px;  --space-8: 144px;
  --gutter:  clamp(20px, 5vw, 72px);
  --maxw:    1560px;

  /* ---------- רדיוסים וצל ---------- */
  --radius-sm: 6px;  --radius-md: 14px;  --radius-lg: 24px;  --radius-pill: 999px;
  --shadow-1: 0 2px 20px rgba(0,0,0,.4);
  --shadow-2: 0 24px 80px rgba(0,0,0,.65);
  --glow-brand:  0 0 60px rgba(110,75,255,.32);
  --glow-accent: 0 0 44px rgba(23,224,212,.34);

  /* ---------- תנועה: אישיות "טכני-מרשים" ---------- */
  --dur-fast: 240ms;
  --dur-base: 520ms;
  --dur-slow: 900ms;
  --dur-cine: 1400ms;
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out — נשלט, יקר */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- אלמנט חתימה: Delay Tail ---------- */
  --echo-offset: 0.14em;   /* מרחק בין "ההדים" */
  --echo-decay:  0.34;     /* דעיכת אטימות בין הד להד */

  /* ---------- שכבות ---------- */
  --z-grain: 90; --z-nav: 100; --z-cursor: 120; --z-loader: 200;
}

/* דסקטופ — יותר אוויר */
@media (min-width: 1024px) {
  :root { --fs-body: 1.125rem; }
}

/* כיבוד העדפת תנועה מופחתת */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-cine: 1ms; }
}