/* ============================================================
 * DESIGN TOKENS — Direction D · Open Toolkit
 * CSS Custom Properties בלבד. שינוי ערך כאן = שינוי בכל האתר.
 * ============================================================ */

:root {
  /* ---- Colors ---- */
  --msl-navy:        #0B1E3F;
  --msl-navy-2:      #132E5A;   /* hover של Navy */
  --msl-navy-3:      #1E3A6F;   /* tints */
  --msl-amber:       #F59E0B;   /* CTA + highlights */
  --msl-amber-2:     #FB923C;   /* gradient pair */
  --msl-amber-soft:  #FEF3C7;   /* highlight bar מתחת לכותרות */
  --msl-cream:       #FAF7F0;   /* רקע ראשי */
  --msl-cream-2:     #F3EEDF;   /* alternate section */
  --msl-ink:         #0F172A;   /* טקסט כותרות */
  --msl-body:        #334155;   /* טקסט גוף */
  --msl-muted:       #64748B;   /* טקסט משני */
  --msl-line:        #E2E8F0;   /* borders */
  --msl-green:       #10B981;   /* live / free / success */
  --msl-red:         #DC2626;   /* warnings / alerts */
  --msl-white:       #FFFFFF;

  /* ---- Typography ---- */
  --msl-font-heading: "Heebo", -apple-system, system-ui, sans-serif;
  --msl-font-body:    "Assistant", -apple-system, system-ui, sans-serif;
  --msl-font-mono:    "SF Mono", Menlo, Consolas, monospace;

  --msl-fs-h1:      clamp(34px, 4.5vw, 58px);
  --msl-fs-h2:      clamp(26px, 3.5vw, 42px);
  --msl-fs-h3:      clamp(20px, 2.4vw, 28px);
  --msl-fs-h4:      20px;
  --msl-fs-deck:    19px;
  --msl-fs-body:    16px;
  --msl-fs-small:   14px;
  --msl-fs-caption: 13px;
  --msl-fs-badge:   11px;

  --msl-lh-tight:  1.05;
  --msl-lh-snug:   1.25;
  --msl-lh-normal: 1.55;
  --msl-lh-loose:  1.7;

  /* ---- Spacing (step scale) ---- */
  --msl-s-1: 4px;
  --msl-s-2: 8px;
  --msl-s-3: 12px;
  --msl-s-4: 16px;
  --msl-s-5: 20px;
  --msl-s-6: 24px;
  --msl-s-7: 32px;
  --msl-s-8: 44px;
  --msl-s-9: 56px;
  --msl-s-10: 72px;
  --msl-s-11: 96px;

  /* ---- Radius ---- */
  --msl-r-sm: 8px;
  --msl-r-md: 12px;
  --msl-r-lg: 16px;
  --msl-r-xl: 24px;
  --msl-r-pill: 999px;

  /* ---- Shadow ---- */
  --msl-shadow-card: 0 8px 20px rgba(11, 30, 63, 0.06);
  --msl-shadow-card-hover: 0 20px 40px rgba(11, 30, 63, 0.12);
  --msl-shadow-cta: 0 12px 24px rgba(11, 30, 63, 0.18);
  --msl-shadow-cta-amber: 0 10px 22px rgba(245, 158, 11, 0.28);
  --msl-shadow-sticky: 0 4px 18px rgba(11, 30, 63, 0.06);

  /* ---- Transitions ---- */
  --msl-t-fast: 150ms ease;
  --msl-t-med:  220ms ease;

  /* ---- Z-index ---- */
  --msl-z-topbar: 90;
  --msl-z-header: 100;
  --msl-z-modal:  200;
  --msl-z-toast:  300;
}