/* ═══════════════════════════════════════
   OmniaScout v2.0 · Design Tokens
   Ispirato a Vercel / Linear / SEMrush
═══════════════════════════════════════ */

:root {
  /* ── Sfondi ── */
  --bg:       #0A0A0B;
  --bg2:      #0F0F11;
  --bg3:      #131315;
  --surface:  #161618;
  --surface2: #1C1C1F;
  --surface3: #222226;

  /* ── Verde OmniaScout (OC) ── */
  --g:        #00E676;
  --g-dim:    #00C060;
  --g-d:      rgba(0,230,118,0.08);
  --g-b:      rgba(0,230,118,0.18);
  --g-glow:   0 0 24px rgba(0,230,118,0.2);

  /* ── Oro VIPTravelScout (VTS) ── */
  --gold:     #D4A21A;
  --gold-dim: #A87C10;
  --gold-d:   rgba(212,162,26,0.08);
  --gold-b:   rgba(212,162,26,0.18);

  /* ── Blu accento ── */
  --blue:     #5B8EFF;
  --blue-d:   rgba(91,142,255,0.08);
  --blue-b:   rgba(91,142,255,0.18);

  /* ── Canali ADS ── */
  --google:   #4285F4;
  --google-d: rgba(66,133,244,0.08);
  --meta:     #1877F2;
  --meta-d:   rgba(24,119,242,0.08);
  --telegram: #29A8E0;
  --tg-d:     rgba(41,168,224,0.08);
  --tiktok:   #FF0050;
  --tt-d:     rgba(255,0,80,0.08);
  --linkedin: #0A66C2;
  --li-d:     rgba(10,102,194,0.08);
  --youtube:  #FF0000;
  --yt-d:     rgba(255,0,0,0.08);
  --email:    #00B2A9;
  --email-d:  rgba(0,178,169,0.08);

  /* ── Status ── */
  --success:  #00E676;
  --warning:  #FFB800;
  --danger:   #FF4757;
  --info:     #5B8EFF;
  --muted:    rgba(255,255,255,0.15);

  /* ── Testo ── */
  --t:   #EBEBEB;
  --t2:  rgba(235,235,235,0.6);
  --t3:  rgba(235,235,235,0.35);
  --t4:  rgba(235,235,235,0.15);
  --t5:  rgba(235,235,235,0.05);

  /* ── Bordi ── */
  --br:    rgba(255,255,255,0.06);
  --br2:   rgba(255,255,255,0.10);
  --br3:   rgba(255,255,255,0.16);

  /* ── Tipografia ── */
  --font-display: 'Geist', 'DM Sans', system-ui, sans-serif;
  --font-body:    'Geist', 'DM Sans', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'IBM Plex Mono', monospace;

  /* ── Spacing ── */
  --s1: 4px;  --s2: 8px;   --s3: 12px;
  --s4: 16px; --s5: 20px;  --s6: 24px;
  --s7: 32px; --s8: 48px;  --s9: 64px;

  /* ── Border radius ── */
  --r:  6px;
  --r2: 10px;
  --r3: 14px;
  --r4: 18px;

  /* ── Dimensioni layout ── */
  --topbar-h:  58px;
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 60px;
}

/* ── Responsive 120% ── */
@media (max-width: 1280px) {
  :root { --sidebar-w: 224px; }
}
@media (max-width: 1024px) {
  :root { --sidebar-w: 56px; }
}