/*
 * gamish-themes.css
 * ============================================================
 * מערכת Themes מרכזית — גמיש אדמין
 * ============================================================
 * כל theme מגדיר את אותם שמות משתנים (CSS Variables)
 * הקוד בדפים משתמש רק בשמות — לא בצבעים עצמם
 *
 * לשינוי צבע: שנה כאן → הכל משתנה בכל הדפים
 * ============================================================
 *
 * Themes זמינים:
 *   data-theme="light"         — בהיר (ברירת מחדל)
 *   data-theme="dark"          — כהה
 *   data-theme="high-contrast" — לקויי ראייה
 *   data-theme="colorblind"    — עיוורון צבעים
 *   data-theme="young"         — עיצוב צעיר
 *   data-theme="palette-1"     — כחול/זהב
 *   data-theme="palette-2"     — סגול/ירוק
 *   data-theme="palette-3"     — כתום/כחול כהה
 *   data-theme="custom"        — מותאם אישית (Color Picker)
 * ============================================================
 */


/* ============================================================
   1. LIGHT — בהיר (ברירת מחדל)
   ============================================================ */
:root,
[data-theme="light"] {
    /* רקעים */
    --bg-main:            #f6f7f8;
    --bg-surface:         #ffffff;
    --bg-surface-2:       #f1f5f9;
    --bg-sidebar:         #1e293b;
    --bg-header:          #ffffff;
    --bg-hover:           #e2e8f0;

    /* טקסט */
    --text-primary:       #0f172a;
    --text-secondary:     #64748b;
    --text-muted:         #94a3b8;
    --text-on-sidebar:    #cbd5e1;
    --text-on-primary:    #ffffff;

    /* צבע ראשי */
    --color-primary:      #1978e5;
    --color-primary-dark: #1560b8;
    --color-primary-light:#dbeafe;

    /* גבולות */
    --border-color:       #e2e8f0;
    --border-focus:       #1978e5;
    --color-accent:       #8b5cf6;
    --color-border-hover: #94a3b8;

    /* סטטוסים */
    --color-success:      #16a34a;
    --color-warning:      #d97706;
    --color-danger:       #dc2626;
    --color-info:         #0284c7;
    --color-success-light: #4ade80;
    --color-success-dark: #15803d;
    --color-warning-light: #fb923c;
    --color-warning-dark: #c2410c;
    --color-danger-light: #f87171;
    --color-info-light:   #60a5fa;
    --bg-dark:            #0f172a;
    --bg-dark-2:          #1e293b;
    --border-dark:        #334155;
    --border-dark-2:      #475569;
    --bg-success:         #f6ffed;
    --bg-warning:         #fffbe6;
    --bg-danger:          #fff2f0;
    --bg-info:            #e6f7ff;

    /* צל */
    --shadow-sm:          0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:          0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg:          0 8px 24px rgba(0,0,0,0.18);

    /* RGB עבור rgba() דינמי — שימוש: rgba(var(--color-primary-rgb), 0.15) */
    --color-primary-rgb:  25, 120, 229;
    --color-success-rgb:  22, 163, 74;
    --color-danger-rgb:   220, 38, 38;
    --color-warning-rgb:  217, 119, 6;
    --color-info-rgb:     2, 132, 199;

    /* צלליות סמנטיות — שימוש: box-shadow: var(--shadow-focus) */
    --shadow-focus:       0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
    --shadow-focus-lg:    0 0 0 5px rgba(var(--color-primary-rgb), 0.20);
    --shadow-success:     0 0 8px  rgba(var(--color-success-rgb),  0.40);
    --shadow-success-lg:  0 2px 12px rgba(var(--color-success-rgb), 0.25);
    --shadow-danger:      0 0 8px  rgba(var(--color-danger-rgb),   0.45);
    --shadow-danger-lg:   0 2px 12px rgba(var(--color-danger-rgb),  0.20);
    --shadow-warning:     0 0 8px  rgba(var(--color-warning-rgb),  0.40);
    --shadow-primary:     0 0 16px rgba(var(--color-primary-rgb),  0.20);
    --shadow-primary-lg:  0 0 32px rgba(var(--color-primary-rgb),  0.35);

    /* גופן */
    --font-family:        'Heebo', 'Inter', system-ui, sans-serif;
    --font-icon:          'Material Symbols Outlined';
    --font-mono:          'Courier New', monospace;
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;
    --fw-extrabold:       800;
    --fw-black:           900;
    --radius-xs:          2px;
    --radius-sm:          4px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          16px;
    --radius-full:        50%;
    --font-size-base:     16px;
    --font-size-sm:       14px;
    --font-size-lg:       18px;
    --border-radius:      0.5rem;
}


/* ============================================================
   2. DARK — כהה
   ============================================================ */
[data-theme="dark"] {
    --bg-main:            #0d1117;
    --bg-surface:         #161b22;
    --bg-surface-2:       #21262d;
    --bg-sidebar:         #010409;
    --bg-header:          #161b22;
    --bg-hover:           #30363d;

    --text-primary:       #e6edf3;
    --text-secondary:     #8b949e;
    --text-muted:         #484f58;
    --text-on-sidebar:    #8b949e;
    --text-on-primary:    #ffffff;

    --color-primary:      #2188ff;
    --color-primary-dark: #1878db;
    --color-primary-light:#1c2d3f;

    --border-color:       #30363d;
    --border-focus:       #2188ff;
    --color-accent:       #a78bfa;
    --color-border-hover: #475569;

    --color-success:      #3fb950;
    --color-warning:      #e3b341;
    --color-danger:       #f85149;
    --color-info:         #58a6ff;
    --color-success-light: #4ade80;
    --color-success-dark: #15803d;
    --color-warning-light: #fb923c;
    --color-warning-dark: #c2410c;
    --color-danger-light: #f87171;
    --color-info-light:   #60a5fa;
    --bg-dark:            #0f172a;
    --bg-dark-2:          #1e293b;
    --border-dark:        #334155;
    --border-dark-2:      #475569;
    --bg-success:         #f6ffed;
    --bg-warning:         #fffbe6;
    --bg-danger:          #fff2f0;
    --bg-info:            #e6f7ff;

    --shadow-sm:          0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:          0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg:          0 8px 24px rgba(0,0,0,0.18);

    --color-primary-rgb:  33, 136, 255;
    --color-success-rgb:  63, 185, 80;
    --color-danger-rgb:   248, 81, 73;
    --color-warning-rgb:  227, 179, 65;
    --color-info-rgb:     88, 166, 255;
    --shadow-focus:       0 0 0 3px rgba(var(--color-primary-rgb), 0.20);
    --shadow-focus-lg:    0 0 0 5px rgba(var(--color-primary-rgb), 0.25);
    --shadow-success:     0 0 8px  rgba(var(--color-success-rgb),  0.40);
    --shadow-success-lg:  0 2px 12px rgba(var(--color-success-rgb), 0.25);
    --shadow-danger:      0 0 8px  rgba(var(--color-danger-rgb),   0.45);
    --shadow-danger-lg:   0 2px 12px rgba(var(--color-danger-rgb),  0.20);
    --shadow-warning:     0 0 8px  rgba(var(--color-warning-rgb),  0.40);
    --shadow-primary:     0 0 16px rgba(var(--color-primary-rgb),  0.25);
    --shadow-primary-lg:  0 0 32px rgba(var(--color-primary-rgb),  0.40);

    --font-family:        'Heebo', 'Inter', system-ui, sans-serif;
    --font-icon:          'Material Symbols Outlined';
    --font-mono:          'Courier New', monospace;
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;
    --fw-extrabold:       800;
    --fw-black:           900;
    --radius-xs:          2px;
    --radius-sm:          4px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          16px;
    --radius-full:        50%;
    --font-size-base:     16px;
    --font-size-sm:       14px;
    --font-size-lg:       18px;
    --border-radius:      0.5rem;
}


/* ============================================================
   3. HIGH-CONTRAST — לקויי ראייה
   ניגודיות גבוהה, גופן גדול, קווים עבים
   ============================================================ */
[data-theme="high-contrast"] {
    --bg-main:            #000000;
    --bg-surface:         #0a0a0a;
    --bg-surface-2:       #1a1a1a;
    --bg-sidebar:         #000000;
    --bg-header:          #000000;
    --bg-hover:           #333333;

    --text-primary:       #ffffff;
    --text-secondary:     #ffff00;
    --text-muted:         #cccccc;
    --text-on-sidebar:    #ffffff;
    --text-on-primary:    #000000;

    --color-primary:      #ffff00;
    --color-primary-dark: #cccc00;
    --color-primary-light:#333300;

    --border-color:       #ffffff;
    --border-focus:       #ffff00;
    --color-accent:       #ff00ff;
    --color-border-hover: #ffffff;

    --color-success:      #00ff00;
    --color-warning:      #ffaa00;
    --color-danger:       #ff4444;
    --color-info:         #00ffff;
    --color-success-light: #4ade80;
    --color-success-dark: #15803d;
    --color-warning-light: #fb923c;
    --color-warning-dark: #c2410c;
    --color-danger-light: #f87171;
    --color-info-light:   #60a5fa;
    --bg-dark:            #0f172a;
    --bg-dark-2:          #1e293b;
    --border-dark:        #334155;
    --border-dark-2:      #475569;
    --bg-success:         #f6ffed;
    --bg-warning:         #fffbe6;
    --bg-danger:          #fff2f0;
    --bg-info:            #e6f7ff;

    --shadow-sm:          0 0 0 2px #ffffff;
    --shadow-md:          0 0 0 3px #ffffff;
    --shadow-lg:          0 8px 24px rgba(0,0,0,0.18);

    --color-primary-rgb:  255, 255, 0;
    --color-success-rgb:  0, 255, 0;
    --color-danger-rgb:   255, 68, 68;
    --color-warning-rgb:  255, 170, 0;
    --color-info-rgb:     0, 255, 255;
    --shadow-focus:       0 0 0 3px rgba(var(--color-primary-rgb), 0.50);
    --shadow-focus-lg:    0 0 0 5px rgba(var(--color-primary-rgb), 0.60);
    --shadow-success:     0 0 8px  rgba(var(--color-success-rgb),  0.60);
    --shadow-success-lg:  0 2px 12px rgba(var(--color-success-rgb), 0.40);
    --shadow-danger:      0 0 8px  rgba(var(--color-danger-rgb),   0.60);
    --shadow-danger-lg:   0 2px 12px rgba(var(--color-danger-rgb),  0.40);
    --shadow-warning:     0 0 8px  rgba(var(--color-warning-rgb),  0.60);
    --shadow-primary:     0 0 16px rgba(var(--color-primary-rgb),  0.40);
    --shadow-primary-lg:  0 0 32px rgba(var(--color-primary-rgb),  0.60);

    --font-family:        'Heebo', 'Inter', system-ui, sans-serif;
    --font-icon:          'Material Symbols Outlined';
    --font-mono:          'Courier New', monospace;
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;
    --fw-extrabold:       800;
    --fw-black:           900;
    --radius-xs:          2px;
    --radius-sm:          4px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          16px;
    --radius-full:        50%;
    --font-size-base:     18px;
    --font-size-sm:       16px;
    --font-size-lg:       22px;
    --border-radius:      0.25rem;
}

[data-theme="high-contrast"] button,
[data-theme="high-contrast"] a,
[data-theme="high-contrast"] input,
[data-theme="high-contrast"] select {
    border: 2px solid #ffffff !important;
}
[data-theme="high-contrast"] button:focus,
[data-theme="high-contrast"] a:focus {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
}


/* ============================================================
   4. COLORBLIND — עיוורון צבעים
   פלטת Okabe-Ito — תקן בינלאומי לנגישות
   ============================================================ */
[data-theme="colorblind"] {
    --bg-main:            #fafafa;
    --bg-surface:         #ffffff;
    --bg-surface-2:       #f0f4f8;
    --bg-sidebar:         #1a2535;
    --bg-header:          #ffffff;
    --bg-hover:           #e8f0fe;

    --text-primary:       #1a1a1a;
    --text-secondary:     #555555;
    --text-muted:         #888888;
    --text-on-sidebar:    #d9e1ec;
    --text-on-primary:    #ffffff;

    --color-primary:      #0072b2;
    --color-primary-dark: #005a8e;
    --color-primary-light:#cce4f4;

    --border-color:       #d0d7de;
    --border-focus:       #0072b2;
    --color-accent:       #cc79a7;
    --color-border-hover: #9ca3af;

    --color-success:      #009e73;
    --color-warning:      #e69f00;
    --color-danger:       #d55e00;
    --color-info:         #56b4e9;
    --color-success-light: #4ade80;
    --color-success-dark: #15803d;
    --color-warning-light: #fb923c;
    --color-warning-dark: #c2410c;
    --color-danger-light: #f87171;
    --color-info-light:   #60a5fa;
    --bg-dark:            #0f172a;
    --bg-dark-2:          #1e293b;
    --border-dark:        #334155;
    --border-dark-2:      #475569;
    --bg-success:         #f6ffed;
    --bg-warning:         #fffbe6;
    --bg-danger:          #fff2f0;
    --bg-info:            #e6f7ff;

    --shadow-sm:          0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:          0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg:          0 8px 24px rgba(0,0,0,0.18);

    --color-primary-rgb:  0, 114, 178;
    --color-success-rgb:  0, 158, 115;
    --color-danger-rgb:   213, 94, 0;
    --color-warning-rgb:  230, 159, 0;
    --color-info-rgb:     86, 180, 233;
    --shadow-focus:       0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
    --shadow-focus-lg:    0 0 0 5px rgba(var(--color-primary-rgb), 0.20);
    --shadow-success:     0 0 8px  rgba(var(--color-success-rgb),  0.40);
    --shadow-success-lg:  0 2px 12px rgba(var(--color-success-rgb), 0.25);
    --shadow-danger:      0 0 8px  rgba(var(--color-danger-rgb),   0.45);
    --shadow-danger-lg:   0 2px 12px rgba(var(--color-danger-rgb),  0.20);
    --shadow-warning:     0 0 8px  rgba(var(--color-warning-rgb),  0.40);
    --shadow-primary:     0 0 16px rgba(var(--color-primary-rgb),  0.20);
    --shadow-primary-lg:  0 0 32px rgba(var(--color-primary-rgb),  0.35);

    --font-family:        'Heebo', 'Inter', system-ui, sans-serif;
    --font-icon:          'Material Symbols Outlined';
    --font-mono:          'Courier New', monospace;
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;
    --fw-extrabold:       800;
    --fw-black:           900;
    --radius-xs:          2px;
    --radius-sm:          4px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          16px;
    --radius-full:        50%;
    --font-size-base:     16px;
    --font-size-sm:       14px;
    --font-size-lg:       18px;
    --border-radius:      0.5rem;
}


/* ============================================================
   5. YOUNG — עיצוב צעיר
   צבעים חיים, פינות מעוגלות
   ============================================================ */
[data-theme="young"] {
    --bg-main:            #fdf4ff;
    --bg-surface:         #ffffff;
    --bg-surface-2:       #fae8ff;
    --bg-sidebar:         #4a0080;
    --bg-header:          #ffffff;
    --bg-hover:           #f3e8ff;

    --text-primary:       #1e0030;
    --text-secondary:     #7c3aed;
    --text-muted:         #a78bfa;
    --text-on-sidebar:    #e9d5ff;
    --text-on-primary:    #ffffff;

    --color-primary:      #a855f7;
    --color-primary-dark: #7c3aed;
    --color-primary-light:#f3e8ff;

    --border-color:       #e9d5ff;
    --border-focus:       #a855f7;
    --color-accent:       #ec4899;
    --color-border-hover: #c4b5fd;

    --color-success:      #10b981;
    --color-warning:      #f59e0b;
    --color-danger:       #f43f5e;
    --color-info:         #06b6d4;
    --color-success-light: #4ade80;
    --color-success-dark: #15803d;
    --color-warning-light: #fb923c;
    --color-warning-dark: #c2410c;
    --color-danger-light: #f87171;
    --color-info-light:   #60a5fa;
    --bg-dark:            #0f172a;
    --bg-dark-2:          #1e293b;
    --border-dark:        #334155;
    --border-dark-2:      #475569;
    --bg-success:         #f6ffed;
    --bg-warning:         #fffbe6;
    --bg-danger:          #fff2f0;
    --bg-info:            #e6f7ff;

    --shadow-sm:          0 2px 8px rgba(168,85,247,0.15);
    --shadow-md:          0 6px 20px rgba(168,85,247,0.20);
    --shadow-lg:          0 8px 24px rgba(0,0,0,0.18);

    --color-primary-rgb:  168, 85, 247;
    --color-success-rgb:  16, 185, 129;
    --color-danger-rgb:   244, 63, 94;
    --color-warning-rgb:  245, 158, 11;
    --color-info-rgb:     6, 182, 212;
    --shadow-focus:       0 0 0 3px rgba(var(--color-primary-rgb), 0.20);
    --shadow-focus-lg:    0 0 0 5px rgba(var(--color-primary-rgb), 0.25);
    --shadow-success:     0 0 8px  rgba(var(--color-success-rgb),  0.40);
    --shadow-success-lg:  0 2px 12px rgba(var(--color-success-rgb), 0.25);
    --shadow-danger:      0 0 8px  rgba(var(--color-danger-rgb),   0.45);
    --shadow-danger-lg:   0 2px 12px rgba(var(--color-danger-rgb),  0.20);
    --shadow-warning:     0 0 8px  rgba(var(--color-warning-rgb),  0.40);
    --shadow-primary:     0 0 16px rgba(var(--color-primary-rgb),  0.25);
    --shadow-primary-lg:  0 0 32px rgba(var(--color-primary-rgb),  0.40);

    --font-family:        'Nunito', 'Heebo', system-ui, sans-serif;
    --font-icon:          'Material Symbols Outlined';
    --font-mono:          'Courier New', monospace;
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;
    --fw-extrabold:       800;
    --fw-black:           900;
    --radius-xs:          2px;
    --radius-sm:          4px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          16px;
    --radius-full:        50%;
    --font-size-base:     16px;
    --font-size-sm:       14px;
    --font-size-lg:       18px;
    --border-radius:      1rem;
}


/* ============================================================
   6. PALETTE-1 — כחול/זהב
   ============================================================ */
[data-theme="palette-1"] {
    --bg-main:            #f0f4ff;
    --bg-surface:         #ffffff;
    --bg-surface-2:       #e8eeff;
    --bg-sidebar:         #0a1628;
    --bg-header:          #ffffff;
    --bg-hover:           #dde6ff;

    --text-primary:       #0a1628;
    --text-secondary:     #1e40af;
    --text-muted:         #6b7280;
    --text-on-sidebar:    #c7d3e8;
    --text-on-primary:    #ffffff;

    --color-primary:      #1d4ed8;
    --color-primary-dark: #1e3a8a;
    --color-primary-light:#dbeafe;

    --border-color:       #bfdbfe;
    --border-focus:       #d97706;
    --color-accent:       #7c3aed;
    --color-border-hover: #93c5fd;

    --color-success:      #059669;
    --color-warning:      #d97706;
    --color-danger:       #dc2626;
    --color-info:         #0284c7;
    --color-success-light: #4ade80;
    --color-success-dark: #15803d;
    --color-warning-light: #fb923c;
    --color-warning-dark: #c2410c;
    --color-danger-light: #f87171;
    --color-info-light:   #60a5fa;
    --bg-dark:            #0f172a;
    --bg-dark-2:          #1e293b;
    --border-dark:        #334155;
    --border-dark-2:      #475569;
    --bg-success:         #f6ffed;
    --bg-warning:         #fffbe6;
    --bg-danger:          #fff2f0;
    --bg-info:            #e6f7ff;

    --shadow-sm:          0 1px 3px rgba(29,78,216,0.10);
    --shadow-md:          0 4px 12px rgba(29,78,216,0.15);
    --shadow-lg:          0 8px 24px rgba(0,0,0,0.18);

    --color-primary-rgb:  29, 78, 216;
    --color-success-rgb:  5, 150, 105;
    --color-danger-rgb:   220, 38, 38;
    --color-warning-rgb:  217, 119, 6;
    --color-info-rgb:     2, 132, 199;
    --shadow-focus:       0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
    --shadow-focus-lg:    0 0 0 5px rgba(var(--color-primary-rgb), 0.20);
    --shadow-success:     0 0 8px  rgba(var(--color-success-rgb),  0.40);
    --shadow-success-lg:  0 2px 12px rgba(var(--color-success-rgb), 0.25);
    --shadow-danger:      0 0 8px  rgba(var(--color-danger-rgb),   0.45);
    --shadow-danger-lg:   0 2px 12px rgba(var(--color-danger-rgb),  0.20);
    --shadow-warning:     0 0 8px  rgba(var(--color-warning-rgb),  0.40);
    --shadow-primary:     0 0 16px rgba(var(--color-primary-rgb),  0.20);
    --shadow-primary-lg:  0 0 32px rgba(var(--color-primary-rgb),  0.35);

    --font-family:        'Heebo', 'Inter', system-ui, sans-serif;
    --font-icon:          'Material Symbols Outlined';
    --font-mono:          'Courier New', monospace;
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;
    --fw-extrabold:       800;
    --fw-black:           900;
    --radius-xs:          2px;
    --radius-sm:          4px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          16px;
    --radius-full:        50%;
    --font-size-base:     16px;
    --font-size-sm:       14px;
    --font-size-lg:       18px;
    --border-radius:      0.5rem;
}


/* ============================================================
   7. PALETTE-2 — סגול/ירוק
   ============================================================ */
[data-theme="palette-2"] {
    --bg-main:            #f5f0ff;
    --bg-surface:         #ffffff;
    --bg-surface-2:       #ede9fe;
    --bg-sidebar:         #1a0533;
    --bg-header:          #ffffff;
    --bg-hover:           #ddd6fe;

    --text-primary:       #1a0533;
    --text-secondary:     #5b21b6;
    --text-muted:         #8b5cf6;
    --text-on-sidebar:    #d8b4fe;
    --text-on-primary:    #ffffff;

    --color-primary:      #7c3aed;
    --color-primary-dark: #5b21b6;
    --color-primary-light:#ede9fe;

    --border-color:       #ddd6fe;
    --border-focus:       #10b981;
    --color-accent:       #ec4899;
    --color-border-hover: #c4b5fd;

    --color-success:      #10b981;
    --color-warning:      #f59e0b;
    --color-danger:       #ef4444;
    --color-info:         #6366f1;
    --color-success-light: #4ade80;
    --color-success-dark: #15803d;
    --color-warning-light: #fb923c;
    --color-warning-dark: #c2410c;
    --color-danger-light: #f87171;
    --color-info-light:   #60a5fa;
    --bg-dark:            #0f172a;
    --bg-dark-2:          #1e293b;
    --border-dark:        #334155;
    --border-dark-2:      #475569;
    --bg-success:         #f6ffed;
    --bg-warning:         #fffbe6;
    --bg-danger:          #fff2f0;
    --bg-info:            #e6f7ff;

    --shadow-sm:          0 1px 3px rgba(124,58,237,0.10);
    --shadow-md:          0 4px 12px rgba(124,58,237,0.15);
    --shadow-lg:          0 8px 24px rgba(0,0,0,0.18);

    --color-primary-rgb:  124, 58, 237;
    --color-success-rgb:  16, 185, 129;
    --color-danger-rgb:   239, 68, 68;
    --color-warning-rgb:  245, 158, 11;
    --color-info-rgb:     99, 102, 241;
    --shadow-focus:       0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
    --shadow-focus-lg:    0 0 0 5px rgba(var(--color-primary-rgb), 0.20);
    --shadow-success:     0 0 8px  rgba(var(--color-success-rgb),  0.40);
    --shadow-success-lg:  0 2px 12px rgba(var(--color-success-rgb), 0.25);
    --shadow-danger:      0 0 8px  rgba(var(--color-danger-rgb),   0.45);
    --shadow-danger-lg:   0 2px 12px rgba(var(--color-danger-rgb),  0.20);
    --shadow-warning:     0 0 8px  rgba(var(--color-warning-rgb),  0.40);
    --shadow-primary:     0 0 16px rgba(var(--color-primary-rgb),  0.20);
    --shadow-primary-lg:  0 0 32px rgba(var(--color-primary-rgb),  0.35);

    --font-family:        'Heebo', 'Inter', system-ui, sans-serif;
    --font-icon:          'Material Symbols Outlined';
    --font-mono:          'Courier New', monospace;
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;
    --fw-extrabold:       800;
    --fw-black:           900;
    --radius-xs:          2px;
    --radius-sm:          4px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          16px;
    --radius-full:        50%;
    --font-size-base:     16px;
    --font-size-sm:       14px;
    --font-size-lg:       18px;
    --border-radius:      0.5rem;
}


/* ============================================================
   8. PALETTE-3 — כתום/כחול כהה
   ============================================================ */
[data-theme="palette-3"] {
    --bg-main:            #fff7ed;
    --bg-surface:         #ffffff;
    --bg-surface-2:       #ffedd5;
    --bg-sidebar:         #1c1917;
    --bg-header:          #ffffff;
    --bg-hover:           #fed7aa;

    --text-primary:       #1c1917;
    --text-secondary:     #92400e;
    --text-muted:         #a8a29e;
    --text-on-sidebar:    #fed7aa;
    --text-on-primary:    #ffffff;

    --color-primary:      #ea580c;
    --color-primary-dark: #c2410c;
    --color-primary-light:#ffedd5;

    --border-color:       #fed7aa;
    --border-focus:       #ea580c;
    --color-accent:       #f59e0b;
    --color-border-hover: #fdba74;

    --color-success:      #16a34a;
    --color-warning:      #d97706;
    --color-danger:       #dc2626;
    --color-info:         #1d4ed8;
    --color-success-light: #4ade80;
    --color-success-dark: #15803d;
    --color-warning-light: #fb923c;
    --color-warning-dark: #c2410c;
    --color-danger-light: #f87171;
    --color-info-light:   #60a5fa;
    --bg-dark:            #0f172a;
    --bg-dark-2:          #1e293b;
    --border-dark:        #334155;
    --border-dark-2:      #475569;
    --bg-success:         #f6ffed;
    --bg-warning:         #fffbe6;
    --bg-danger:          #fff2f0;
    --bg-info:            #e6f7ff;

    --shadow-sm:          0 1px 3px rgba(234,88,12,0.10);
    --shadow-md:          0 4px 12px rgba(234,88,12,0.15);
    --shadow-lg:          0 8px 24px rgba(0,0,0,0.18);

    --color-primary-rgb:  234, 88, 12;
    --color-success-rgb:  22, 163, 74;
    --color-danger-rgb:   220, 38, 38;
    --color-warning-rgb:  217, 119, 6;
    --color-info-rgb:     29, 78, 216;
    --shadow-focus:       0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
    --shadow-focus-lg:    0 0 0 5px rgba(var(--color-primary-rgb), 0.20);
    --shadow-success:     0 0 8px  rgba(var(--color-success-rgb),  0.40);
    --shadow-success-lg:  0 2px 12px rgba(var(--color-success-rgb), 0.25);
    --shadow-danger:      0 0 8px  rgba(var(--color-danger-rgb),   0.45);
    --shadow-danger-lg:   0 2px 12px rgba(var(--color-danger-rgb),  0.20);
    --shadow-warning:     0 0 8px  rgba(var(--color-warning-rgb),  0.40);
    --shadow-primary:     0 0 16px rgba(var(--color-primary-rgb),  0.20);
    --shadow-primary-lg:  0 0 32px rgba(var(--color-primary-rgb),  0.35);

    --font-family:        'Heebo', 'Inter', system-ui, sans-serif;
    --font-icon:          'Material Symbols Outlined';
    --font-mono:          'Courier New', monospace;
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;
    --fw-extrabold:       800;
    --fw-black:           900;
    --radius-xs:          2px;
    --radius-sm:          4px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          16px;
    --radius-full:        50%;
    --font-size-base:     16px;
    --font-size-sm:       14px;
    --font-size-lg:       18px;
    --border-radius:      0.5rem;
}


/* ============================================================
   9. CUSTOM — מותאם אישית
   הערכים מוזרקים על ידי JavaScript
   ============================================================ */
[data-theme="custom"] {
    --bg-main:            var(--custom-bg-main,    #f6f7f8);
    --bg-surface:         var(--custom-bg-surface, #ffffff);
    --bg-surface-2:       var(--custom-bg-surface-2, #f1f5f9);
    --bg-sidebar:         var(--custom-bg-sidebar, #1e293b);
    --bg-header:          var(--custom-bg-header,  #ffffff);
    --bg-hover:           var(--custom-bg-hover,   #e2e8f0);

    --text-primary:       var(--custom-text-primary,    #0f172a);
    --text-secondary:     var(--custom-text-secondary,  #64748b);
    --text-muted:         var(--custom-text-muted,      #94a3b8);
    --text-on-sidebar:    var(--custom-text-on-sidebar, #cbd5e1);
    --text-on-primary:    var(--custom-text-on-primary, #ffffff);

    --color-primary:      var(--custom-primary,       #1978e5);
    --color-primary-dark: var(--custom-primary-dark,  #1560b8);
    --color-primary-light:var(--custom-primary-light, #dbeafe);

    --border-color:       var(--custom-border,  #e2e8f0);
    --border-focus:       var(--custom-primary, #1978e5);
    --color-accent:       var(--custom-accent,       #8b5cf6);
    --color-border-hover: var(--custom-border-hover, #94a3b8);

    --color-success:      #16a34a;
    --color-warning:      #d97706;
    --color-danger:       #dc2626;
    --color-info:         #0284c7;
    --color-success-light: #4ade80;
    --color-success-dark: #15803d;
    --color-warning-light: #fb923c;
    --color-warning-dark: #c2410c;
    --color-danger-light: #f87171;
    --color-info-light:   #60a5fa;
    --bg-dark:            #0f172a;
    --bg-dark-2:          #1e293b;
    --border-dark:        #334155;
    --border-dark-2:      #475569;
    --bg-success:         #f6ffed;
    --bg-warning:         #fffbe6;
    --bg-danger:          #fff2f0;
    --bg-info:            #e6f7ff;

    --shadow-sm:          0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:          0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg:          0 8px 24px rgba(0,0,0,0.18);
    --border-radius:      0.5rem;

    /* RGB וצלליות סמנטיות — custom יורש מה-light באמצעות fallback */
    --color-primary-rgb:  25, 120, 229;
    --color-success-rgb:  22, 163, 74;
    --color-danger-rgb:   220, 38, 38;
    --color-warning-rgb:  217, 119, 6;
    --color-info-rgb:     2, 132, 199;
    --shadow-focus:       0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
    --shadow-focus-lg:    0 0 0 5px rgba(var(--color-primary-rgb), 0.20);
    --shadow-success:     0 0 8px  rgba(var(--color-success-rgb),  0.40);
    --shadow-success-lg:  0 2px 12px rgba(var(--color-success-rgb), 0.25);
    --shadow-danger:      0 0 8px  rgba(var(--color-danger-rgb),   0.45);
    --shadow-danger-lg:   0 2px 12px rgba(var(--color-danger-rgb),  0.20);
    --shadow-warning:     0 0 8px  rgba(var(--color-warning-rgb),  0.40);
    --shadow-primary:     0 0 16px rgba(var(--color-primary-rgb),  0.20);
    --shadow-primary-lg:  0 0 32px rgba(var(--color-primary-rgb),  0.35);
}


/* ============================================================
   גודל גופן — data-fontsize על <html>
   ============================================================ */
[data-fontsize="small"]  { --font-size-base: 13px; --font-size-sm: 11px; --font-size-lg: 16px; }
[data-fontsize="medium"] { --font-size-base: 16px; --font-size-sm: 14px; --font-size-lg: 18px; }
[data-fontsize="large"]  { --font-size-base: 19px; --font-size-sm: 16px; --font-size-lg: 22px; }
[data-fontsize="xlarge"] { --font-size-base: 22px; --font-size-sm: 18px; --font-size-lg: 26px; }


/* ============================================================
   סוג גופן — data-font על <html>
   ============================================================ */
[data-font="heebo"]     { --font-family: 'Heebo',     sans-serif; }
[data-font="inter"]     { --font-family: 'Inter',     sans-serif; }
[data-font="rubik"]     { --font-family: 'Rubik',     sans-serif; }
[data-font="nunito"]    { --font-family: 'Nunito',    sans-serif; }
[data-font="assistant"] { --font-family: 'Assistant', sans-serif; }


/* ============================================================
   DESIGN TOKENS — ערכי מערכת גלובליים
   אינם משתנים בין themes — מוגדרים פעם אחת בלבד
   ============================================================ */
:root {

    /* ----------------------------------------------------------
       TYPOGRAPHY SCALE — סקאלת גדלי טקסט
       שימוש: var(--fs-5) במקום font-size: 14px
       ----------------------------------------------------------
       fs-1  = 10px  — תוויות מיקרו, timestamps
       fs-2  = 11px  — labels קטנים, tooltips
       fs-3  = 12px  — טקסט עזר, captions
       fs-4  = 13px  — טקסט משני, badges
       fs-5  = 14px  — טקסט גוף רגיל ★ ברירת מחדל
       fs-6  = 15px  — טקסט גוף גדול
       fs-7  = 16px  — גודל בסיס
       fs-8  = 17px  — טקסט חשוב
       fs-9  = 18px  — כותרת קטנה
       fs-10 = 20px  — כותרת בינונית
       fs-11 = 22px  — כותרת H3
       fs-12 = 24px  — כותרת H2
       fs-13 = 28px  — כותרת H1
       fs-14 = 32px  — כותרת גדולה
       fs-15 = 40px  — hero / display
    ---------------------------------------------------------- */
    --fs-1:  10px;
    --fs-2:  11px;
    --fs-3:  12px;
    --fs-4:  13px;
    --fs-5:  14px;
    --fs-6:  15px;
    --fs-7:  16px;
    --fs-8:  17px;
    --fs-9:  18px;
    --fs-10: 20px;
    --fs-11: 22px;
    --fs-12: 24px;
    --fs-13: 28px;
    --fs-14: 32px;
    --fs-15: 40px;

    /* ----------------------------------------------------------
       SPACING SCALE — סקאלת ריווח
       שימוש: var(--space-4) במקום 16px
       ----------------------------------------------------------
       space-1 =  4px  — ריווח מינימלי
       space-2 =  8px  — ריווח פנימי קטן
       space-3 = 12px  — ריווח בינוני-קטן
       space-4 = 16px  — ריווח סטנדרטי ★
       space-5 = 20px  — ריווח בינוני
       space-6 = 24px  — ריווח גדול
       space-7 = 28px  — ריווח גדול+
       space-8 = 32px  — ריווח section
       space-10= 40px  — ריווח page
       space-12= 48px  — ריווח גדול מאוד
       space-16= 64px  — ריווח hero
    ---------------------------------------------------------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ----------------------------------------------------------
       Z-INDEX SCALE — שכבות ציור
       שימוש: var(--z-modal) במקום z-index: 400
    ---------------------------------------------------------- */
    --z-base:           0;
    --z-above:          10;
    --z-dropdown:       100;
    --z-sticky:         200;
    --z-modal-backdrop: 300;
    --z-modal:          400;
    --z-toast:          500;
    --z-tooltip:        600;

    /* ----------------------------------------------------------
       ANIMATION TOKENS — אנימציות אחידות
       שימוש: transition: all var(--dur-normal) var(--ease-default)
    ---------------------------------------------------------- */
    --dur-fast:    150ms;
    --dur-normal:  250ms;
    --dur-slow:    400ms;
    --dur-xslow:   600ms;
    --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ----------------------------------------------------------
       COMPONENT TOKENS — ערכי רכיבים
       שימוש: height: var(--btn-h-md)
    ---------------------------------------------------------- */

    /* כפתורים */
    --btn-h-sm:       32px;
    --btn-h-md:       40px;
    --btn-h-lg:       48px;
    --btn-px-sm:      12px;
    --btn-px-md:      18px;
    --btn-px-lg:      24px;
    --btn-fs-sm:      var(--fs-3);
    --btn-fs-md:      var(--fs-5);
    --btn-fs-lg:      var(--fs-7);

    /* שדות קלט */
    --input-h-sm:     32px;
    --input-h-md:     40px;
    --input-h-lg:     48px;
    --input-px:       12px;
    --input-fs:       var(--fs-5);
    --input-radius:   var(--radius-md);

    /* כרטיסים */
    --card-p-sm:      var(--space-4);
    --card-p-md:      var(--space-5);
    --card-p-lg:      var(--space-8);
    --card-radius:    var(--radius-lg);
    --card-shadow:    var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);

    /* טבלאות */
    --table-row-h:       48px;
    --table-row-h-sm:    36px;
    --table-cell-px:     var(--space-4);
    --table-header-fs:   var(--fs-3);

    /* תפריטים נפתחים */
    --dropdown-p:        var(--space-2);
    --dropdown-item-h:   36px;
    --dropdown-item-px:  var(--space-4);
    --dropdown-item-fs:  var(--fs-5);
    --dropdown-radius:   var(--radius-lg);
    --dropdown-shadow:   var(--shadow-lg);

    /* מודאלים */
    --modal-p:           var(--space-6);
    --modal-radius:      var(--radius-xl);
    --modal-shadow:      var(--shadow-lg);

    /* תגיות / badges */
    --badge-px:          var(--space-2);
    --badge-py:          3px;
    --badge-fs:          var(--fs-2);
    --badge-radius:      var(--radius-md);

    /* Sidebar */
    --sidebar-item-h:    44px;
    --sidebar-item-px:   var(--space-4);
    --sidebar-item-fs:   var(--fs-5);
    --sidebar-icon-size: var(--fs-9);

    /* ----------------------------------------------------------
       BREAKPOINTS — נקודות שבירה רספונסיביות
       שימוש: @media (max-width: var(--bp-md)) — לא עובד ב-CSS
       בשימוש ב-JS: if (window.innerWidth < getComputedStyle(root).getPropertyValue('--bp-md-num'))
    ---------------------------------------------------------- */
    --bp-xs-num:  480;
    --bp-sm-num:  640;
    --bp-md-num:  768;
    --bp-lg-num:  1024;
    --bp-xl-num:  1280;
    --bp-2xl-num: 1536;
    /* ערכי px לשימוש ב-CSS custom properties וב-JS */
    --bp-xs:  480px;
    --bp-sm:  640px;
    --bp-md:  768px;
    --bp-lg:  1024px;
    --bp-xl:  1280px;
    --bp-2xl: 1536px;

    /* ----------------------------------------------------------
       LAYOUT TOKENS — מבנה דף
       שימוש: var(--layout-sidebar-side) משתנה בידי JS
    ---------------------------------------------------------- */
    /* מיקום sidebar: right = RTL עברית, left = LTR אנגלית */
    --layout-sidebar-side:    right;
    --layout-sidebar-w:       260px;
    --layout-sidebar-w-col:   96px;
    --layout-sidebar-order:   2;
    --layout-content-order:   1;
    --layout-direction:       rtl;

    /* מרווחים פנימיים לתוכן הראשי */
    --layout-content-p:       var(--space-8);
    --layout-content-p-sm:    var(--space-4);
    --layout-content-max-w:   1400px;

    /* גובה header */
    --layout-header-h:        64px;
    --layout-header-p:        var(--space-6);

    /* עמודות sidebar במובייל */
    --layout-sidebar-mobile:  bottom;   /* bottom / hidden / overlay */
    --layout-sidebar-mobile-h: 64px;

    /* ----------------------------------------------------------
       GRID TOKENS — עבודת רשת
       שימוש:
         grid-template-columns: repeat(var(--grid-cols-md), 1fr)
         gap: var(--grid-gap)
    ---------------------------------------------------------- */
    --grid-cols-1:   1;
    --grid-cols-2:   2;
    --grid-cols-3:   3;
    --grid-cols-4:   4;
    --grid-cols-6:   6;
    --grid-cols-12:  12;

    /* עמודות רספונסיביות לפי רוחב מסך */
    --grid-cols-xs:  1;   /* < 480px */
    --grid-cols-sm:  1;   /* < 640px */
    --grid-cols-md:  2;   /* < 768px */
    --grid-cols-lg:  3;   /* < 1024px */
    --grid-cols-xl:  4;   /* < 1280px */

    /* ריווחים רשת */
    --grid-gap-sm:   var(--space-3);
    --grid-gap:      var(--space-4);
    --grid-gap-lg:   var(--space-6);

    /* מימדי כרטיס */
    --card-min-w:    260px;
    --card-max-w:    480px;
    --card-w-sm:     200px;
    --card-w-md:     300px;
    --card-w-lg:     400px;

    /* ----------------------------------------------------------
       DRAG & DROP TOKENS — גרור ושחרר
       שימוש ב-JS: element.style.setProperty('--dnd-opacity-dragging', '0.4')
       שימוש ב-CSS: opacity: var(--dnd-opacity-dragging)
    ---------------------------------------------------------- */
    /* מצב גרירה */
    --dnd-opacity-dragging:   0.4;
    --dnd-scale-dragging:     1.03;
    --dnd-shadow-dragging:    var(--shadow-lg);
    --dnd-cursor-grab:        grab;
    --dnd-cursor-grabbing:    grabbing;
    --dnd-transition:         var(--dur-normal) var(--ease-default);

    /* אזור שחרור (drop zone) */
    --dnd-dropzone-bg:        var(--color-primary-light);
    --dnd-dropzone-border:    var(--color-primary);
    --dnd-dropzone-opacity:   0.6;
    --dnd-dropzone-radius:    var(--radius-lg);

    /* אנימציית מקום בסיום גרירה */
    --dnd-snap-duration:      var(--dur-slow);
    --dnd-snap-ease:          var(--ease-bounce);

    /* פס גרירה (handle icon) */
    --dnd-handle-size:        var(--fs-9);
    --dnd-handle-opacity:     0.3;
    --dnd-handle-opacity-hover: 0.8;
    --dnd-handle-color:       var(--text-muted);

    /* ----------------------------------------------------------
       TAB ORDER TOKENS — סדר טאבים
       שימוש ב-CSS: order: var(--tab-order-personal)
       שימוש ב-JS: element.style.setProperty('--tab-order-personal', '3')
    ---------------------------------------------------------- */
    /* דף נהג — סדר ברירת מחדל */
    --tab-order-personal:     1;
    --tab-order-documents:    2;
    --tab-order-work:         3;
    --tab-order-vehicles:     4;
    --tab-order-finance:      5;
    --tab-order-schedule:     6;
    --tab-order-communication:7;
    --tab-order-blacklist:    8;

    /* דף רכב — סדר ברירת מחדל */
    --tab-v-order-details:    1;
    --tab-v-order-documents:  2;
    --tab-v-order-drivers:    3;
    --tab-v-order-finance:    4;
    --tab-v-order-maintenance:5;
    --tab-v-order-status:     6;

    /* ----------------------------------------------------------
       BRAND LOGO TOKENS — לוגואי יצרנים
       שימוש: <img src="<?= getBrandLogo('ford') ?>" style="width:var(--brand-logo-size-md)">
    ---------------------------------------------------------- */
    --brand-logo-size-xs:   20px;
    --brand-logo-size-sm:   28px;
    --brand-logo-size-md:   40px;
    --brand-logo-size-lg:   56px;
    --brand-logo-size-xl:   80px;
    --brand-logo-radius:    var(--radius-sm);
    --brand-logo-bg:        var(--bg-surface-2);
    --brand-logo-padding:   var(--space-1);
    --brand-logo-opacity:   0.90;
    --brand-logo-opacity-hover: 1;
    --brand-logo-transition: opacity var(--dur-fast) var(--ease-default);

    /* ----------------------------------------------------------
       MAP TOKENS — צבעי מפות ותיחום אזורים
       שימוש ב-JS:
         const root = getComputedStyle(document.documentElement);
         const fill = root.getPropertyValue('--map-zone-service-fill');
         // מעביר ל-Leaflet / Google Maps polygon options
    ---------------------------------------------------------- */

    /* אזורי שירות (service zones) */
    --map-zone-service-fill:      rgba(var(--color-primary-rgb), 0.12);
    --map-zone-service-border:    rgba(var(--color-primary-rgb), 0.65);
    --map-zone-service-border-w:  2px;

    /* אזורי אזהרה (warning zones) */
    --map-zone-warning-fill:      rgba(var(--color-warning-rgb), 0.12);
    --map-zone-warning-border:    rgba(var(--color-warning-rgb), 0.65);
    --map-zone-warning-border-w:  2px;

    /* אזורים חסומים (blocked zones — רשימה שחורה) */
    --map-zone-blocked-fill:      rgba(var(--color-danger-rgb),  0.12);
    --map-zone-blocked-border:    rgba(var(--color-danger-rgb),  0.65);
    --map-zone-blocked-border-w:  2px;

    /* אזורי VIP / עדיפות */
    --map-zone-vip-fill:          rgba(var(--color-success-rgb), 0.12);
    --map-zone-vip-border:        rgba(var(--color-success-rgb), 0.65);
    --map-zone-vip-border-w:      2px;

    /* אזורים ניטרלים (מידע, סטטיסטיקה) */
    --map-zone-neutral-fill:      rgba(100, 116, 139, 0.10);
    --map-zone-neutral-border:    rgba(100, 116, 139, 0.50);
    --map-zone-neutral-border-w:  1px;

    /* Markers — סיכות נהגים ונקודות */
    --map-marker-driver-color:    var(--color-primary);
    --map-marker-pickup-color:    var(--color-success);
    --map-marker-dropoff-color:   var(--color-danger);
    --map-marker-size-sm:         28px;
    --map-marker-size-md:         36px;
    --map-marker-size-lg:         44px;

    /* Clusters — קיבוץ נקודות */
    --map-cluster-bg:             var(--color-primary);
    --map-cluster-border:         #ffffff;
    --map-cluster-color:          #ffffff;
    --map-cluster-size:           40px;
    --map-cluster-fs:             var(--fs-4);

    /* Routes — קווי נסיעה */
    --map-route-active-color:     var(--color-primary);
    --map-route-active-w:         4px;
    --map-route-active-opacity:   0.85;
    --map-route-alt-color:        var(--color-info);
    --map-route-alt-w:            3px;
    --map-route-alt-opacity:      0.55;
    --map-route-completed-color:  var(--color-success);
    --map-route-blocked-color:    var(--color-danger);

    /* Heatmap — צפיפות פעילות */
    --map-heat-low:               rgba(var(--color-info-rgb),    0.30);
    --map-heat-mid:               rgba(var(--color-warning-rgb), 0.55);
    --map-heat-high:              rgba(var(--color-danger-rgb),  0.80);

    /* Tooltip / Popup על מפה */
    --map-popup-bg:               var(--bg-surface);
    --map-popup-border:           var(--border-color);
    --map-popup-shadow:           var(--shadow-md);
    --map-popup-radius:           var(--radius-lg);
    --map-popup-p:                var(--space-4);
    --map-popup-fs:               var(--fs-5);

    /* ----------------------------------------------------------
       ICON SIZE TOKENS — גדלי אייקונים
       שימוש: width: var(--icon-md); height: var(--icon-md)
    ---------------------------------------------------------- */
    --icon-xs:    14px;
    --icon-sm:    16px;
    --icon-md:    20px;
    --icon-lg:    24px;
    --icon-xl:    32px;
    --icon-2xl:   40px;
    --icon-hero:  64px;
    --icon-giant: 90px;

    /* ----------------------------------------------------------
       LINE HEIGHT TOKENS — גובה שורה
       שימוש: line-height: var(--lh-normal)
    ---------------------------------------------------------- */
    --lh-none:    1;
    --lh-tight:   1.2;
    --lh-snug:    1.4;
    --lh-normal:  1.6;
    --lh-relaxed: 1.75;
    --lh-loose:   2;

    /* ----------------------------------------------------------
       OPACITY SCALE — שקיפות
       שימוש: opacity: var(--opacity-50)
    ---------------------------------------------------------- */
    --opacity-0:   0;
    --opacity-10:  0.1;
    --opacity-20:  0.2;
    --opacity-30:  0.3;
    --opacity-40:  0.4;
    --opacity-50:  0.5;
    --opacity-60:  0.6;
    --opacity-70:  0.7;
    --opacity-80:  0.8;
    --opacity-85:  0.85;
    --opacity-90:  0.9;
    --opacity-95:  0.95;
    --opacity-100: 1;

    /* ----------------------------------------------------------
       MISSING TOKENS — variables שנוספו בשדרוג CSS Audit
       מרץ 2026 — כל הקבצים משתמשים בהם
    ---------------------------------------------------------- */

    /* צל גדול במיוחד — מודאלים, dropdowns גדולים */
    --shadow-xl:        0 20px 60px rgba(0,0,0,0.22);

    /* גלאו (זוהר) — לאנימציות pulse ו-focus states */
    --glow-primary:        rgba(var(--color-primary-rgb), 0.25);
    --glow-primary-strong: rgba(var(--color-primary-rgb), 0.40);
    --glow-success:        rgba(var(--color-success-rgb), 0.30);
    --glow-danger:         rgba(var(--color-danger-rgb),  0.30);
    --glow-muted:          rgba(100, 116, 139, 0.30);

    /* טבעת פוקוס — שדות קלט ואלמנטים אינטראקטיביים */
    --focus-ring:       0 0 0 3px rgba(var(--color-primary-rgb), 0.15);

    /* גבול עדין — הפרדות קלות בין רכיבים */
    --border-subtle:    rgba(148, 163, 184, 0.10);

    /* רקע overlay — מודאלים ו-drawers */
    --overlay-bg:       rgba(0, 0, 0, 0.50);

    /* סקאלת גופן — fs-16 נוסף */
    --fs-16: 48px;

    /* גוונים כהים נוספים לסטטוסים */
    --color-info-dark:   #0369a1;
    --color-danger-dark: #b91c1c;
}


/* ============================================================
   יישום על אלמנטים בסיסיים
   ============================================================ */
html {
    font-size: var(--font-size-base, 16px);
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-family);
    transition: background-color 0.3s ease, color 0.3s ease;
}