/* ==========================================================================
   Toner Shop - Design Tokens (מבוסס על סעיף 25 במסמך האפיון)
   כל הצבעים נבדקו מול WCAG 2.1 AA - ראו הערות ליד כל טוקן.
   ========================================================================== */

:root {

  /* --- צבעים --- */

  /* Navy - צבע היסוד. 9.41:1 על לבן, 8.99:1 על --color-bg-alt. עומד ב-AA לטקסט רגיל. */
  --color-navy: #024783;

  /* הדגשה נגישה - לקישורים/כפתורים/טקסט על רקע בהיר. 5.00:1 על לבן. עומד ב-AA. */
  --color-accent: #0077A8;

  /* תכלת המותג המקורית (מהלוגו) - דקורטיבי בלבד! 2.70:1 על לבן - נכשל ב-AA.
     לשימוש רק ברקעים/גרפיקה גדולה בלי טקסט, או כטקסט/אייקון גדול על --color-navy (3.48:1). */
  --color-brand-cyan: #00A8E8;

  --color-bg: #FFFFFF;
  --color-bg-alt: #F8FAFC;

  /* טקסט גוף. 14.76:1 על לבן. */
  --color-text: #1F2933;
  /* טקסט משני/מוחלש. 6.42:1 על לבן - עומד ב-AA גם לטקסט רגיל. */
  --color-text-muted: #55606B;

  --color-white: #FFFFFF;

  /* בלוק סייג משפטי / Callout */
  --color-disclaimer-bg: #FFF4E5;
  /* טקסט על רקע הסייג - נייבי, עקבי עם המותג. 8.66:1. */
  --color-disclaimer-text: #024783;

  --color-border: #E2E8F0;

  /* טקסט על גבי רקע --color-accent (כפתורים וכו'). לבן, 5.00:1 על #0077A8. */
  --color-on-accent: #FFFFFF;

  /* --- העשרת הפלטה: עוד גווני כחול/תכלת + נגיעת צבע משלימה עדינה ---
     כל הטוקנים הבאים דקורטיביים בלבד (רקעים/צ'יפים מאחורי אייקונים,
     גרדיאנטים) - לא משמשים לטקסט קריטי, ולא נוגעים בטוקנים שנבדקו
     ל-AA מעלה (navy/accent/text/muted) שנשארים ללא שינוי. */

  /* רקע כחול-תכלת בהיר ל"מדורים חלופיים" ול-Feature Block - 8.55:1 מול navy,
     13.41:1 מול טקסט גוף - עדיף בהרבה על הצורך המינימלי, בטוח לכל טקסט. */
  --color-tint-blue: #EAF6FC;

  /* רקע "צ'יפ" עגול מאחורי אייקונים (סרגל אמון / כרטיסים / Why-Us) */
  --color-chip-blue: #D3EDF9;
  --color-chip-blue-border: #A9DDF3;

  /* נייבי עמוק לגרדיאנטים (Hero, CTA) - תמיד יחד עם טקסט לבן, ולכן רק
     מוסיף ניגודיות מעבר ל-navy הבסיסי, לא פוגע בה. */
  --color-navy-deep: #013259;

  /* נגיעת צבע משלימה וחמה - לשימוש ממוקד בלבד (תג "15 שנות ניסיון"),
     דקורטיבי מאחורי אייקון בלבד. */
  --color-chip-warm: #FBEEDC;
  --color-chip-warm-border: #E8C68C;

  /* AnyDesk - כפתור ההורדה משתמש בגוון האדום הרשמי של המותג (Blaze Red
     #EF443B), אך מוכהה מעט לצורך ניגודיות AA על טקסט לבן (5.41:1) - עדיין
     באותה משפחת "אדום AnyDesk" ומזוהה בבירור כאותו מותג. */
  --color-anydesk-red: #C7302A;
  --color-anydesk-red-dark: #9E2620;

  /* כוכבי דירוג (קרוסלת ביקורות גוגל) - זהב, דקורטיבי בלבד. */
  --color-star-gold: #F5A623;

  /* --- טיפוגרפיה --- */
  --font-family-base: 'Heebo', 'Segoe UI', Arial, sans-serif;

  --fs-h1: 2.5rem;        /* 40px desktop */
  --fs-h1-mobile: 1.75rem;   /* 28px */
  --fs-h2: 1.75rem;       /* 28px desktop */
  --fs-h2-mobile: 1.375rem;  /* 22px */
  --fs-h3: 1.25rem;       /* 20px */
  --fs-h3-mobile: 1.125rem;  /* 18px */
  --fs-body: 1.0625rem;   /* 17px */
  --fs-body-mobile: 1rem; /* 16px */
  --fs-button: 1rem;      /* 16px */
  --fs-small: 0.875rem;   /* 14px */
  --fs-small-mobile: 0.8125rem; /* 13px */

  --lh-h1: 1.2;
  --lh-h2: 1.3;
  --lh-h3: 1.4;
  --lh-body: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- סקאלת מרווחים (יחידת בסיס 4px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --section-padding: 80px;
  --section-padding-mobile: 48px;

  /* --- רדיוסים --- */
  --radius-sm: 8px;   /* כפתורים, אלמנטים קטנים */
  --radius-md: 16px;  /* כרטיסים */
  --radius-lg: 24px;  /* תמונות/מכולות גדולות */

  /* --- צללים --- */
  --shadow-resting: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 4px 16px rgba(2, 71, 131, 0.12);
  --shadow-hover-strong: 0 20px 40px rgba(2, 71, 131, 0.22);

  /* Soft colored "glow" halo, layered alongside the neutral shadows above
     (see .card in content.css) for a subtle tech/depth feel behind cards
     and the hero banner. */
  --glow-card-resting: 0 0 24px 2px rgba(0, 168, 232, 0.12);
  --glow-card-hover: 0 0 40px 8px rgba(0, 168, 232, 0.4);

  /* --- Layout --- */
  --container-max: 1160px;
  --header-height: 72px;
  --mobile-bar-height: 56px;
}