// Unpanic design tokens — dark-first
window.UN = {
  // dark mode
  d: {
    bg:        '#1A1817',
    surface:   '#23211F',
    surface2:  '#2A2725',
    line:      'rgba(240,237,232,0.08)',
    line2:     'rgba(240,237,232,0.14)',
    text:      '#F0EDE8',
    textDim:   'rgba(240,237,232,0.62)',
    textMute:  'rgba(240,237,232,0.38)',
    sage:      '#8FB5A2',
    sageDeep:  '#6B8E7D',
    sageSoft:  'rgba(143,181,162,0.18)',
    sageEdge:  'rgba(143,181,162,0.28)',
    trust:     '#7090C9',
    trustSoft: 'rgba(112,144,201,0.16)',
    sev: {
      mild:    '#7D9879',
      warm:    '#C99647',
      hot:     '#B85F44',
      urgent:  '#8E2E2E',
    },
  },
  // light mode
  l: {
    bg:        '#FAF7F2',
    surface:   '#FFFFFF',
    surface2:  '#F2EEE6',
    line:      'rgba(42,40,38,0.08)',
    line2:     'rgba(42,40,38,0.14)',
    text:      '#2A2826',
    textDim:   'rgba(42,40,38,0.62)',
    textMute:  'rgba(42,40,38,0.42)',
    sage:      '#6B8E7D',
    sageDeep:  '#557163',
    sageSoft:  'rgba(107,142,125,0.12)',
    sageEdge:  'rgba(107,142,125,0.28)',
    trust:     '#4A6FA5',
    trustSoft: 'rgba(74,111,165,0.10)',
    sev: {
      mild:    '#B5C9A5',
      warm:    '#E8B05C',
      hot:     '#D87B5A',
      urgent:  '#B43E3E',
    },
  },
  font: {
    body: '"Inter", -apple-system, system-ui, sans-serif',
    num:  '"Inter", -apple-system, system-ui, sans-serif', // tabular via feature
  },
};

// shared inline icon helpers — rounded 2px stroke
window.Icon = ({ name, size = 22, color = 'currentColor', strokeWidth = 1.8 }) => {
  const p = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  switch (name) {
    case 'thermo':
      return <svg {...p}><path d="M14 4.5a2.5 2.5 0 1 0-5 0v9.6a4 4 0 1 0 5 0V4.5Z"/><path d="M11.5 10v6"/></svg>;
    case 'pill':
      return <svg {...p}><rect x="3" y="9" width="18" height="6" rx="3"/><path d="M12 9v6"/></svg>;
    case 'drop':
      return <svg {...p}><path d="M12 3s6 7 6 11a6 6 0 1 1-12 0c0-4 6-11 6-11Z"/></svg>;
    case 'diaper':
      return <svg {...p}><path d="M3 7h18l-2 7a4 4 0 0 1-3.9 3H8.9A4 4 0 0 1 5 14L3 7Z"/><path d="M9 7v3M15 7v3"/></svg>;
    case 'camera':
      return <svg {...p}><path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z"/><circle cx="12" cy="13" r="3.4"/></svg>;
    case 'mic':
      return <svg {...p}><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg>;
    case 'people':
      return <svg {...p}><circle cx="9" cy="9" r="3.2"/><path d="M3 19a6 6 0 0 1 12 0"/><circle cx="17" cy="8" r="2.6"/><path d="M15 14a5 5 0 0 1 6 4"/></svg>;
    case 'gear':
      return <svg {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 12.9a7.5 7.5 0 0 0 0-1.8l2-1.5-2-3.4-2.3.9a7.5 7.5 0 0 0-1.5-.9L15.2 4h-3.9l-.4 2.2c-.5.2-1 .5-1.5.9L7.1 6.2l-2 3.4 2 1.5a7.5 7.5 0 0 0 0 1.8l-2 1.5 2 3.4 2.3-.9c.5.4 1 .7 1.5.9l.4 2.2h3.9l.4-2.2c.5-.2 1-.5 1.5-.9l2.3.9 2-3.4-2-1.5Z"/></svg>;
    case 'home':
      return <svg {...p}><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9Z"/></svg>;
    case 'plus':
      return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus':
      return <svg {...p}><path d="M5 12h14"/></svg>;
    case 'x':
      return <svg {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'chev':
      return <svg {...p}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chevDown':
      return <svg {...p}><path d="M6 9l6 6 6-6"/></svg>;
    case 'check':
      return <svg {...p}><path d="M5 12.5l4.5 4.5L19 7"/></svg>;
    case 'phone':
      return <svg {...p}><path d="M5 4h3l2 5-2 1a11 11 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"/></svg>;
    case 'share':
      return <svg {...p}><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8 11l8-4M8 13l8 4"/></svg>;
    case 'food':
      return <svg {...p}><path d="M7 3v8a3 3 0 0 0 3 3v7M7 3h6v8a3 3 0 0 1-3 3M17 3c-1.5 0-3 2-3 5s1.5 4 3 4v9"/></svg>;
    case 'vomit':
      return <svg {...p}><path d="M8 4h8l-1 7H9L8 4Z"/><path d="M9.5 11l-1 4M14.5 11l1 4M11 17v3M13 17v3"/></svg>;
    case 'clock':
      return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'sun':
      return <svg {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></svg>;
    case 'bell':
      return <svg {...p}><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2.5h-15L6 16Z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>;
    case 'alert':
      return <svg {...p}><path d="M12 3l10 17H2L12 3Z"/><path d="M12 10v5M12 18v.5"/></svg>;
    case 'doc':
      return <svg {...p}><path d="M6 3h8l4 4v14H6V3Z"/><path d="M14 3v4h4M9 13h6M9 17h6"/></svg>;
    default: return null;
  }
};