/* ==========================================================================
   SafePoint — Design Tokens  ·  v2 "Refined"
   כיוון: נקי, מאופק, מקצועי. נייר ודיו, לא פסטלים.
   הסגול הוא *דיו כהה* ומבטא סמכות — לא רקע לבנדר.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. צבע — פרימיטיבים
     ---------------------------------------------------------------------- */

  /* סגול המותג. 500 = צבע הלוגו, לשימוש מדוד בלבד.
     העוגן החזותי של האתר הוא 800 (חציל עמוק), לא 500. */
  --sp-purple-50:  #F7F4F9;
  --sp-purple-100: #EDE6F1;
  --sp-purple-200: #DACEE3;
  --sp-purple-300: #C0AECD;
  --sp-purple-400: #A386B5;
  --sp-purple-500: #9866C1; /* צבע הלוגו */
  --sp-purple-600: #6F4E86;
  --sp-purple-700: #533A64;
  --sp-purple-800: #3B2947; /* ★ עוגן — כפתורים, כותרות, פוטר */
  --sp-purple-900: #251A2D;

  /* ניטרליים — נייר חמים, לא אפור קר */
  --sp-neutral-0:   #FFFFFF;
  --sp-neutral-50:  #FBFAF8;
  --sp-neutral-100: #F4F2EE;
  --sp-neutral-200: #E8E5DF;
  --sp-neutral-300: #D6D2CA;
  --sp-neutral-400: #A9A49C;
  --sp-neutral-500: #77716A;
  --sp-neutral-600: #565049;
  --sp-neutral-700: #3A3531;
  --sp-neutral-800: #262220;
  --sp-neutral-900: #15120F;

  /* ----------------------------------------------------------------------
     1b. צבעי קטגוריה — עמומים. דיו וקווים בלבד, לעולם לא רקע רווי.
     ---------------------------------------------------------------------- */
  --sp-body-50:  #FBF6F1;  /* כתום — גוף (טרה־קוטה עמומה) */
  --sp-body-100: #F3E8DD;
  --sp-body-300: #CBA383;
  --sp-body-500: #9C6440;
  --sp-body-700: #6B4227;

  --sp-hair-50:  #F3F5F0;  /* ירוק — שיער (זית עמום) */
  --sp-hair-100: #E4E9DE;
  --sp-hair-300: #A3B398;
  --sp-hair-500: #5A6E4F;
  --sp-hair-700: #38472F;

  --sp-blue-50:  #F1F3F7;  /* כחול — קטגוריה שמורה (כחול דיו) */
  --sp-blue-100: #E0E5EE;
  --sp-blue-300: #9AA8C0;
  --sp-blue-500: #4E5F80;
  --sp-blue-700: #2F3B52;

  /* מצבים — שקטים */
  --sp-success-50:  #F1F5F1;
  --sp-success-700: #3D6647;
  --sp-warning-50:  #FBF6EC;
  --sp-warning-700: #7D5C1F;
  --sp-danger-50:   #FBF1F0;
  --sp-danger-700:  #8A3A34;

  /* ----------------------------------------------------------------------
     2. צבע — סמנטי
     ---------------------------------------------------------------------- */
  --sp-bg:            var(--sp-neutral-0);
  --sp-bg-subtle:     var(--sp-neutral-50);
  --sp-bg-muted:      var(--sp-neutral-100);
  --sp-bg-ink:        var(--sp-purple-800);

  --sp-text:          var(--sp-neutral-800);
  --sp-text-muted:    var(--sp-neutral-600);
  --sp-text-subtle:   var(--sp-neutral-500);
  --sp-text-inverse:  var(--sp-neutral-0);

  --sp-rule:          var(--sp-neutral-200);  /* קו שיער — המפריד הראשי */
  --sp-rule-strong:   var(--sp-neutral-300);
  --sp-border:        var(--sp-rule);
  --sp-border-strong: var(--sp-rule-strong);
  --sp-border-focus:  var(--sp-purple-600);

  /* פעולה — חציל עמוק, לא לבנדר */
  --sp-action:        var(--sp-purple-800);
  --sp-action-hover:  var(--sp-purple-900);
  --sp-action-active: var(--sp-purple-900);
  --sp-accent:        var(--sp-purple-500); /* קווים דקים ומצבים פעילים בלבד */

  /* קטגוריה פעילה (נדרסת ע״י [data-cat]) */
  --sp-cat:      var(--sp-purple-600);
  --sp-cat-soft: var(--sp-purple-50);
  --sp-cat-ink:  var(--sp-purple-800);

  /* ----------------------------------------------------------------------
     3. טיפוגרפיה
     Tzofia נושא הכול, כולל כותרות — Light ובגדלים גדולים.
     Peleg שמור לרגעי מותג ספורים (--sp-font-accent).
     ---------------------------------------------------------------------- */
  --sp-font-body:    "FUP Begin", "FUP Tzofia", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sp-font-display: var(--sp-font-body);
  --sp-font-accent:  "FUP Peleg", var(--sp-font-body);

  --sp-text-2xs: 0.6875rem;
  --sp-text-xs:  0.75rem;
  --sp-text-sm:  0.8125rem;
  --sp-text-md:  0.9375rem;
  --sp-text-lg:  1.0625rem;
  --sp-text-xl:  1.25rem;
  --sp-text-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
  --sp-text-3xl: clamp(1.625rem, 1.35rem + 1.3vw, 2.125rem);
  --sp-text-4xl: clamp(2rem, 1.55rem + 2.1vw, 2.875rem);
  --sp-text-5xl: clamp(2.5rem, 1.8rem + 3.2vw, 4rem);

  --sp-weight-light:    300;
  --sp-weight-regular:  400;
  --sp-weight-medium:   500;
  --sp-weight-semibold: 600;
  --sp-weight-bold:     600;

  --sp-leading-tight:   1.1;
  --sp-leading-snug:    1.22;
  --sp-leading-normal:  1.65;
  --sp-leading-relaxed: 1.85;

  --sp-tracking-tight:  -0.022em;
  --sp-tracking-snug:   -0.012em;
  --sp-tracking-normal: 0;
  --sp-tracking-wide:   0.08em;
  --sp-tracking-wider:  0.18em;

  /* ----------------------------------------------------------------------
     4. מרווחים — נדיבים
     ---------------------------------------------------------------------- */
  --sp-space-1:  0.25rem;
  --sp-space-2:  0.5rem;
  --sp-space-3:  0.75rem;
  --sp-space-4:  1rem;
  --sp-space-5:  1.25rem;
  --sp-space-6:  1.5rem;
  --sp-space-8:  2rem;
  --sp-space-10: 2.5rem;
  --sp-space-12: 3rem;
  --sp-space-16: 4rem;
  --sp-space-20: 5rem;
  --sp-space-24: 6rem;
  --sp-space-32: 8rem;

  --sp-section-y:       clamp(4.5rem, 3rem + 7vw, 9rem);
  --sp-section-y-tight: clamp(3rem, 2rem + 4vw, 5rem);

  /* ----------------------------------------------------------------------
     5. רדיוסים — כמעט חדים. עיקר ההבדל מ־v1.
     ---------------------------------------------------------------------- */
  --sp-radius-xs:  1px;
  --sp-radius-sm:  2px;
  --sp-radius-md:  2px;
  --sp-radius-lg:  3px;
  --sp-radius-xl:  4px;
  --sp-radius-2xl: 4px;
  --sp-radius-pill: 999px; /* רק נקודות ומונים זעירים */

  /* ----------------------------------------------------------------------
     6. צללים — כמעט ואין. הגבול הוא קו שיער, לא צל.
     ---------------------------------------------------------------------- */
  --sp-shadow-xs: none;
  --sp-shadow-sm: 0 1px 2px rgba(21, 18, 15, 0.04);
  --sp-shadow-md: 0 2px 12px rgba(21, 18, 15, 0.05);
  --sp-shadow-lg: 0 10px 34px rgba(21, 18, 15, 0.07);
  --sp-shadow-xl: 0 24px 60px rgba(21, 18, 15, 0.09);
  --sp-shadow-brand: var(--sp-shadow-md);

  /* ----------------------------------------------------------------------
     7. תנועה
     ---------------------------------------------------------------------- */
  --sp-duration-fast:   120ms;
  --sp-duration-base:   200ms;
  --sp-duration-slow:   380ms;
  --sp-duration-slower: 620ms;
  --sp-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --sp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sp-ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------------------
     8. פריסה
     ---------------------------------------------------------------------- */
  --sp-container:        1280px;
  --sp-container-narrow: 760px;
  --sp-container-wide:   1480px;
  --sp-gutter:           clamp(1.25rem, 0.5rem + 3.5vw, 3.5rem);

  /* ----------------------------------------------------------------------
     9. שכבות
     ---------------------------------------------------------------------- */
  --sp-z-sticky:   100;
  --sp-z-header:   200;
  --sp-z-dropdown: 300;
  --sp-z-modal:    500;
}

/* ==========================================================================
   מיפוי קטגוריות — דיו בלבד
   ========================================================================== */
[data-cat="heal"] { --sp-cat: var(--sp-purple-600); --sp-cat-soft: var(--sp-purple-50); --sp-cat-ink: var(--sp-purple-800); --sp-cat-rgb: 152 102 193; }
[data-cat="body"] { --sp-cat: var(--sp-body-500);   --sp-cat-soft: var(--sp-body-50);   --sp-cat-ink: var(--sp-body-700); --sp-cat-rgb: 156 100 64; }
[data-cat="hair"] { --sp-cat: var(--sp-hair-500);   --sp-cat-soft: var(--sp-hair-50);   --sp-cat-ink: var(--sp-hair-700); --sp-cat-rgb: 90 110 79; }
[data-cat="blue"] { --sp-cat: var(--sp-blue-500);   --sp-cat-soft: var(--sp-blue-50);   --sp-cat-ink: var(--sp-blue-700); --sp-cat-rgb: 78 95 128; }