// ZARVA Worker — design tokens, icons, primitives
window.Z = {
  bg:        '#0A0118',
  surface:   '#140828',
  raised:    '#1A0B3B',
  raised2:   '#241054',
  border:    'rgba(124, 58, 237, 0.18)',
  borderStrong: 'rgba(124, 58, 237, 0.42)',
  brand:     '#7C3AED',
  brandLite: '#A78BFA',
  brandDeep: '#5B21B6',
  pink:      '#EC4899',
  cyan:      '#06B6D4',
  glow:      'rgba(124, 58, 237, 0.45)',
  text:      '#F8FAFC',
  text2:     '#CBD5E1',
  text3:     '#94A3B8',
  text4:     '#64748B',
  success:   '#10B981',
  warning:   '#F59E0B',
  danger:    '#EF4444',
  gold:      '#FBBF24',
  gradient:  'linear-gradient(135deg, #7C3AED 0%, #EC4899 55%, #06B6D4 100%)',
  gradientV: 'linear-gradient(180deg, rgba(124,58,237,0.35) 0%, rgba(10,1,24,0) 100%)',
  font:      "'Geist', -apple-system, system-ui, sans-serif",
  mono:      "'Geist Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace",
};

// ─── SVG icon set (24px stroke, currentColor) ─────────────────
const I = {};
const ic = (path, opts = {}) => ({ size = 22, color = 'currentColor', stroke = 1.6, fill = 'none' } = {}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" {...opts}>{path}</svg>
);
I.home   = ic(<><path d="M3 11.5 12 4l9 7.5" /><path d="M5 10v9.5a.5.5 0 0 0 .5.5H9v-6h6v6h3.5a.5.5 0 0 0 .5-.5V10" /></>);
I.briefcase = ic(<><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M3 13h18"/></>);
I.bolt   = ic(<path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z" />);
I.coin   = ic(<><circle cx="12" cy="12" r="9"/><path d="M14.5 9.5a3 3 0 0 0-5 0M9.5 14.5a3 3 0 0 0 5 0M12 6v2M12 16v2"/></>);
I.user   = ic(<><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>);
I.map    = ic(<><path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2z"/><path d="M9 4v14M15 6v14"/></>);
I.shield = ic(<path d="M12 3 4 6v6c0 4.5 3.4 8.5 8 9 4.6-.5 8-4.5 8-9V6l-8-3z"/>);
I.check  = ic(<path d="m5 12 5 5L20 7"/>);
I.x      = ic(<><path d="M6 6l12 12"/><path d="M18 6 6 18"/></>);
I.chevR  = ic(<path d="m9 6 6 6-6 6"/>);
I.chevL  = ic(<path d="m15 6-6 6 6 6"/>);
I.chevD  = ic(<path d="m6 9 6 6 6-6"/>);
I.pin    = ic(<><path d="M12 22s-7-7.5-7-13a7 7 0 1 1 14 0c0 5.5-7 13-7 13z"/><circle cx="12" cy="9" r="3"/></>);
I.clock  = ic(<><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>);
I.cal    = ic(<><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18"/></>);
I.star   = ({size=22,color='currentColor',fill='currentColor'}={}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="none"><path d="m12 2 3.1 6.6 7.1 1-5.2 5 1.3 7.2L12 18.4l-6.3 3.4 1.3-7.2L1.8 9.6l7.1-1L12 2z"/></svg>);
I.phone  = ic(<path d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>);
I.msg    = ic(<><path d="M21 12a8 8 0 0 1-11.5 7.2L4 21l1.8-5.5A8 8 0 1 1 21 12z"/></>);
I.nav    = ic(<><path d="m2 12 20-8-8 20-2-9-10-3z"/></>);
I.alert  = ic(<><path d="M12 3 2 21h20L12 3z"/><path d="M12 10v4M12 18v.5"/></>);
I.info   = ic(<><circle cx="12" cy="12" r="9"/><path d="M12 8v.5M12 11v5"/></>);
I.refresh = ic(<><path d="M3 12a9 9 0 0 1 16-5.7L21 4"/><path d="M21 4v5h-5"/><path d="M21 12a9 9 0 0 1-16 5.7L3 20"/><path d="M3 20v-5h5"/></>);
I.filter = ic(<><path d="M3 5h18M6 12h12M10 19h4"/></>);
I.search = ic(<><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></>);
I.eye    = ic(<><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>);
I.bell   = ic(<><path d="M6 8a6 6 0 1 1 12 0c0 7 3 8 3 8H3s3-1 3-8z"/><path d="M10 21a2 2 0 0 0 4 0"/></>);
I.power  = ic(<><path d="M12 2v10"/><path d="M6.3 6.3a8 8 0 1 0 11.4 0"/></>);
I.lock   = ic(<><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>);
I.upload = ic(<><path d="M12 4v12"/><path d="m7 9 5-5 5 5"/><path d="M4 20h16"/></>);
I.dl     = ic(<><path d="M12 4v12"/><path d="m17 11-5 5-5-5"/><path d="M4 20h16"/></>);
I.card   = ic(<><rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 11h20M6 16h4"/></>);
I.bank   = ic(<><path d="M3 10 12 4l9 6"/><path d="M5 10v8M9 10v8M15 10v8M19 10v8M3 20h18"/></>);
I.gear   = ic(<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>);
I.lang   = ic(<><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></>);
I.help   = ic(<><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 3.5M12 17v.5"/></>);
I.logout = ic(<><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 16l4-4-4-4M20 12H9"/></>);
I.plus   = ic(<><path d="M12 5v14M5 12h14"/></>);
I.minus  = ic(<><path d="M5 12h14"/></>);
I.tools  = ic(<><path d="M14.7 6.3a4 4 0 0 0 5 5l-9.5 9.5a2.8 2.8 0 0 1-4-4l8.5-10.5z"/><path d="M5 5l4 4"/></>);
I.spark  = ic(<><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></>);
I.lightning = ic(<><path d="M13 2 3 14h8l-1 8L21 9h-8l0-7z"/></>);
I.history = ic(<><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/><path d="M12 8v4l3 2"/></>);

window.I = I;

// ─── Primitives ────────────────────────────────────────────────
const Glass = ({ children, style = {}, strong = false, ...p }) => (
  <div {...p} style={{
    background: strong ? 'rgba(26, 11, 59, 0.72)' : 'rgba(20, 8, 40, 0.55)',
    backdropFilter: 'blur(20px) saturate(160%)',
    WebkitBackdropFilter: 'blur(20px) saturate(160%)',
    border: `0.5px solid ${Z.border}`,
    borderRadius: 20, ...style,
  }}>{children}</div>
);

const Pill = ({ children, tone = 'neutral', style = {} }) => {
  const tones = {
    neutral: { bg: 'rgba(148,163,184,0.10)', fg: Z.text2, bd: 'rgba(148,163,184,0.20)' },
    brand:   { bg: 'rgba(124,58,237,0.16)',  fg: Z.brandLite, bd: 'rgba(124,58,237,0.40)' },
    pink:    { bg: 'rgba(236,72,153,0.14)',  fg: '#F9A8D4',   bd: 'rgba(236,72,153,0.35)' },
    cyan:    { bg: 'rgba(6,182,212,0.14)',   fg: '#67E8F9',   bd: 'rgba(6,182,212,0.36)' },
    success: { bg: 'rgba(16,185,129,0.14)',  fg: '#6EE7B7',   bd: 'rgba(16,185,129,0.34)' },
    warning: { bg: 'rgba(245,158,11,0.14)',  fg: '#FCD34D',   bd: 'rgba(245,158,11,0.34)' },
    danger:  { bg: 'rgba(239,68,68,0.14)',   fg: '#FCA5A5',   bd: 'rgba(239,68,68,0.34)' },
    gold:    { bg: 'rgba(251,191,36,0.12)',  fg: '#FCD34D',   bd: 'rgba(251,191,36,0.34)' },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '4px 9px', borderRadius: 999, fontSize: 11, fontWeight: 600,
      letterSpacing: 0.1, background: t.bg, color: t.fg, border: `0.5px solid ${t.bd}`,
      ...style,
    }}>{children}</span>
  );
};

const GradientText = ({ children, style = {} }) => (
  <span style={{
    background: Z.gradient, WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent', backgroundClip: 'text',
    ...style,
  }}>{children}</span>
);

const GradientBorder = ({ children, style = {}, radius = 20, thickness = 1 }) => (
  <div style={{
    position: 'relative', borderRadius: radius, padding: thickness,
    background: Z.gradient, ...style,
  }}>
    <div style={{ background: Z.surface, borderRadius: radius - thickness, height: '100%' }}>
      {children}
    </div>
  </div>
);

// Stat block
const Stat = ({ label, value, sub, tone = 'default' }) => (
  <div style={{ flex: 1 }}>
    <div style={{
      fontSize: 10, fontWeight: 700, letterSpacing: 1.4,
      color: tone === 'brand' ? Z.brandLite : Z.text3, textTransform: 'uppercase', marginBottom: 6,
    }}>{label}</div>
    <div style={{
      fontFamily: Z.mono, fontSize: 22, fontWeight: 600,
      color: tone === 'brand' ? Z.text : Z.text, letterSpacing: -0.5, lineHeight: 1,
    }}>{value}</div>
    {sub && <div style={{ fontSize: 11, color: Z.text3, marginTop: 4 }}>{sub}</div>}
  </div>
);

// Section header
const SectionH = ({ children, action }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
    <div style={{ fontSize: 13, fontWeight: 700, color: Z.text, letterSpacing: -0.2 }}>{children}</div>
    {action && <div style={{ fontSize: 11, fontWeight: 600, color: Z.brandLite }}>{action}</div>}
  </div>
);

Object.assign(window, { Glass, Pill, GradientText, GradientBorder, Stat, SectionH });