/* ============================================================
   מיזינסקי · Design System — Design Tokens (single source of truth)
   RTL · Hebrew-first · automation/AI brand
   ------------------------------------------------------------
   החלפת פלטה: ראש הקובץ. הפלטה הפעילה = Periwinkle.
   לפלטת Royal×Powder — החליפי את ערכי --brand-* בבלוק שמסומן ALT.
   ============================================================ */

:root{

  /* ---------- 1 · BRAND COLOR — primary scale (Periwinkle) ---------- */
  --brand-50:#F0F0FF;
  --brand-100:#E4E4FF;   /* Lavender (soft sections) */
  --brand-200:#C9C8FF;
  --brand-300:#A6A4FF;
  --brand-400:#8482FF;
  --brand-500:#6260FF;   /* Periwinkle — core brand */
  --brand-600:#4F4DE6;
  --brand-700:#3F3DBF;
  --brand-800:#322F99;
  --brand-900:#211F66;
  --brand-950:#14123D;   /* deep — dark sections */

  /* ---------- ALT PALETTE · Royal Blue × Powder Pink ----------
     להפעלה: העתיקי ערכים אלה אל --brand-* למעלה.
     --brand-100:#FBEAEB;  (Powder Pink soft)
     --brand-500:#3447AA;  (Royal Blue)
     --brand-600:#283A93;  --brand-900:#1B2452;  --brand-950:#171D45;
     הערה: Powder Pink הוא warm — שמרי אותו כ--soft-warm במקום --brand-100
     אם רוצים גם כחול וגם ורוד יחד.
  ------------------------------------------------------------ */

  /* ---------- 2 · ACCENT (warmth / emphasis — stat numbers, highlights) ---------- */
  --accent-500:#FF6B53;  /* coral — used sparingly */
  --accent-600:#F2553B;
  --accent-soft:#FFE9E3;

  /* ---------- 3 · NEUTRALS (violet-tinted gray, harmonizes with brand) ---------- */
  --neutral-0:#FFFFFF;
  --neutral-50:#F7F7FB;
  --neutral-100:#EFEFF5;
  --neutral-200:#E2E2EC;
  --neutral-300:#CBCBD9;
  --neutral-400:#9B9BB0;
  --neutral-500:#6F6F87;
  --neutral-600:#52526A;
  --neutral-700:#3A3A50;
  --neutral-800:#24243A;
  --neutral-900:#15152A;
  --neutral-950:#0D0D1C;

  /* ---------- 4 · FUNCTIONAL ---------- */
  --success:#1FB36A;
  --warning:#F5A524;
  --error:#E5484D;
  --info:var(--brand-500);
  --whatsapp:#25D366;

  /* ---------- 5 · SEMANTIC TOKENS (use these in components, not raw scales) ---------- */
  --bg:               var(--neutral-0);
  --bg-soft:          var(--brand-100);     /* tinted section background */
  --bg-muted:         var(--neutral-50);
  --surface:          var(--neutral-0);     /* cards */
  --surface-2:        var(--neutral-50);

  --ink:              var(--neutral-900);   /* headings */
  --text:             var(--neutral-700);   /* body */
  --text-muted:       var(--neutral-500);
  --text-on-brand:    #FFFFFF;
  --text-on-dark:     #ECEBFF;
  --text-on-dark-mut: #AFADE0;

  --primary:          var(--brand-500);
  --primary-hover:    var(--brand-600);
  --primary-active:   var(--brand-700);
  --primary-soft:     var(--brand-50);

  --border:           var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --border-on-dark:   rgba(255,255,255,.16);

  --dark-bg:          var(--brand-950);     /* footer / AutoTuesday / dark covers */
  --dark-bg-2:        var(--brand-900);

  --focus-ring:       0 0 0 3px color-mix(in srgb, var(--brand-500) 45%, transparent);

  /* ---------- 6 · TYPOGRAPHY ---------- */
  --font-heading:'Heebo','Segoe UI',sans-serif;
  --font-body:'Assistant','Segoe UI',sans-serif;
  --font-display:'Secular One','Heebo',sans-serif;  /* big hero accent only */

  /* fluid type scale */
  --fs-display-xl:clamp(40px,7vw,80px);
  --fs-display:   clamp(32px,5.2vw,60px);
  --fs-h1:        clamp(30px,4.4vw,48px);
  --fs-h2:        clamp(24px,3.2vw,36px);
  --fs-h3:        22px;
  --fs-h4:        19px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12.5px;

  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --fw-black:900;

  --lh-tight:1.04; --lh-snug:1.18; --lh-normal:1.55; --lh-relaxed:1.7;
  --ls-tight:-.02em; --ls-normal:0; --ls-wide:.04em; --ls-eyebrow:.18em;

  /* ---------- 7 · SPACING (4px base) ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-30:120px;
  --section-py:clamp(56px,8vw,120px);

  /* ---------- 8 · RADII ---------- */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* ---------- 9 · SHADOWS ---------- */
  --shadow-sm:0 2px 8px rgba(21,21,42,.05);
  --shadow-md:0 8px 24px rgba(21,21,42,.08);
  --shadow-lg:0 18px 48px rgba(21,21,42,.12);
  --shadow-brand:0 14px 34px -12px color-mix(in srgb,var(--brand-500) 70%,transparent);

  /* ---------- 10 · MOTION ---------- */
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:400ms; --dur-page:600ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---------- 11 · LAYOUT ---------- */
  --container:1120px;
  --container-wide:1240px;
  --container-narrow:780px;
  --gutter:clamp(20px,4vw,32px);

  /* ---------- 12 · Z-INDEX SCALE ---------- */
  --z-base:1; --z-sticky:1100; --z-dropdown:1200; --z-overlay:1300; --z-modal:1400; --z-toast:1500;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}