/* ==========================================================================
   tokens.css — משתני העיצוב של האתר. אין כאן שום סלקטור פרט ל-:root.
   כל שינוי מראה גורף מתחיל כאן.
   ========================================================================== */

:root {
  /* ---------- צבע · Dark (ברירת מחדל) ---------- */
  --bg:            #0A0B0F;
  --bg-elevated:   #12141C;
  --surface:       rgba(255,255,255,.035);
  --surface-hover: rgba(255,255,255,.06);
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);

  --text:          #E7E9EE;
  --text-muted:    #9AA0AE;
  --text-faint:    #6B7280;

  --accent:        #00E5FF;
  --accent-2:      #7C5CFF;
  --accent-grad:   linear-gradient(135deg, #00E5FF 0%, #7C5CFF 100%);
  --on-accent:     #0A0B0F;          /* טקסט על גרדיאנט — כהה, לא לבן (ניגודיות) */
  --glow:          0 0 0 1px rgba(0,229,255,.25), 0 8px 32px rgba(124,92,255,.18);

  --ok:   #34D399;
  --warn: #FBBF24;
  --err:  #F87171;

  --shadow-card: 0 12px 40px rgba(0,0,0,.35);

  /* ---------- טיפוגרפיה ---------- */
  --font-sans: 'Inter', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JBMono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-hero: clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-h1:   clamp(1.8rem, 3.5vw, 2.75rem);
  --fs-h2:   clamp(1.35rem, 2.4vw, 1.75rem);
  --fs-h3:   1.15rem;
  --fs-lede: 1.0625rem;
  --fs-body: 1.0625rem;
  --fs-sm:   .9375rem;
  --fs-xs:   .8125rem;
  --lh-body: 1.75;

  /* ---------- מרווחים (סקאלת 4) ---------- */
  --s-1:  .25rem;
  --s-2:  .5rem;
  --s-3:  .75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;

  /* ---------- צורה ---------- */
  --radius:    14px;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --blur:      20px;
  --maxw:      1180px;
  --maxw-text: 760px;

  /* ---------- תנועה ---------- */
  --dur-fast:   120ms;
  --dur:        220ms;
  --dur-slow:   380ms;
  --ease:       cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

/* ---------- Light ---------- */
:root[data-theme="light"] {
  --bg:            #F7F8FA;
  --bg-elevated:   #FFFFFF;
  --surface:       rgba(10,11,15,.03);
  --surface-hover: rgba(10,11,15,.055);
  --border:        rgba(10,11,15,.09);
  --border-strong: rgba(10,11,15,.16);

  --text:          #0F1218;
  --text-muted:    #4B5563;
  --text-faint:    #6B7280;

  --accent:        #0891B2;
  --accent-2:      #6D3AF0;
  --accent-grad:   linear-gradient(135deg, #0891B2 0%, #6D3AF0 100%);
  --on-accent:     #FFFFFF;
  --glow:          0 0 0 1px rgba(8,145,178,.2), 0 8px 28px rgba(109,58,240,.12);

  --ok:   #059669;
  --warn: #B45309;
  --err:  #DC2626;

  --shadow-card: 0 12px 32px rgba(10,11,15,.10);
}