/* Shared design tokens + primitives for news.mtsg.co.il's generator-built
   pages (article / archive / category — see newsbot/newsbot.js's
   buildArticleHtml / buildArchivePages / buildCategoryPages).
   Phase 1 of the news redesign (2026-10-01): pulled out of 3 copy-pasted
   inline <style> blocks, verified byte-identical before/after via a full
   regenerate+diff of real site output — this file changes WHERE the CSS
   lives, not what it renders. Not yet linked from index.html (the
   homepage) — it has its own larger, unaudited inline CSS surface; folding
   it in is a deliberate follow-up, not done in this pass. */

:root{
  --ink:#0a0b0e;--ink2:#111318;--ink3:#1a1d24;--card:#14161c;
  --border:#22262f;--or:#F5A623;--or2:#e09000;--wh:#f0f2f6;--wh2:#c8cdd8;--muted:#7a8494;
  --cat-safety:#e84040;--cat-security:#0d9488;--cat-ev:#22c55e;--cat-tech:#3b82f6;
  --cat-used:#f59e0b;--cat-review:#a855f7;--cat-guides:#06b6d4;--cat-news:#F5A623;--cat-videos:#ec4899;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--wh);font-family:'Heebo',sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}

/* ═══ SITE HEADER — shared by every generator-built page type ═══ */
.site-header{position:sticky;top:0;z-index:200;background:var(--ink2);
  border-bottom:2px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.35);
  transform:translateY(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.site-header.sh-hide{transform:translateY(-100%)}
.site-header-peek{position:sticky;top:0;z-index:199;display:flex;align-items:center;
  justify-content:center;background:var(--ink2);border-bottom:1px solid var(--border);
  padding:10px 20px;transform:translateY(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.site-header-peek.show{transform:translateY(0)}
.peek-word{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}.peek-word .accent{color:var(--or)}
.peek-wa{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.4);color:#25D366}
.peek-logo-img{width:22px;height:22px;border-radius:5px;flex-shrink:0}
.sh-util{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 0;font-size:11px;color:var(--muted);letter-spacing:.3px}
@media(max-width:767px){.sh-date{display:none}}
.masthead-cta{font-size:13px;font-weight:700;background:var(--or);color:#000;
  padding:8px 18px;border-radius:6px;transition:.15s}
.masthead-cta:hover{background:#e09000}
.sh-mast{padding:18px 20px 22px;text-align:center}
.sh-brand{display:inline-flex;align-items:center;gap:14px}
.sh-logo-img{width:52px;height:52px;border-radius:12px;flex-shrink:0}
.sh-word{display:inline-block;font-size:clamp(24px,5vw,36px);font-weight:800;letter-spacing:-1px}
.sh-word .accent{color:var(--or)}
.sh-tag{font-size:12px;color:var(--muted);letter-spacing:.3px;margin-top:6px}
.sh-rule{height:1px;background:var(--or);margin:14px auto 0;width:64px}
.sh-nav{border-top:1px solid var(--border);display:flex;align-items:center}
.catnav-inner{display:flex;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:0 20px 0 4px;flex:1;min-width:0}
.catnav-inner::-webkit-scrollbar{display:none}
.catbtn{flex-shrink:0;padding:14px 18px;font-size:14px;font-weight:700;
  color:var(--muted);white-space:nowrap;transition:color .15s}
.catbtn:hover{color:var(--wh)}
.sh-wa{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.4);
  color:#25D366;margin:8px 16px 8px 8px;transition:.15s}
.sh-wa:hover{background:rgba(37,211,102,.2)}

/* ═══ CATEGORY BADGE — added Phase 2A (2026-10-01) for the homepage redesign.
   Article pages keep their own separate inline .badge copy for now (slightly
   different padding: 4px 10px vs this file's 3px 9px) — touching article
   pages is out of scope for Phase 2A, so that copy is deliberately left
   alone rather than unified here. Source order means neither page's own
   inline rule is at risk from this addition. ═══ */
.badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;padding:3px 9px;border-radius:3px;color:#000}
.badge-safety{background:var(--cat-safety);color:#fff}
.badge-security{background:var(--cat-security);color:#fff}
.badge-ev{background:var(--cat-ev);color:#000}
.badge-tech{background:var(--cat-tech);color:#fff}
.badge-used{background:var(--cat-used);color:#000}
.badge-review{background:var(--cat-review);color:#fff}
.badge-guides{background:var(--cat-guides);color:#000}
.badge-news{background:var(--cat-news);color:#000}
.badge-videos{background:var(--cat-videos);color:#fff}