// Design tokens for Huul — Apple-inspired, warm neutral
// Exposed as a global so Babel sibling scripts can read it

const HUUL_TOKENS = {
  color: {
    bg:        '#F2F2F4',       // page background (subtle warm gray)
    card:      '#FFFFFF',
    cardAlt:   '#FAFAFC',
    ink:       '#1D1D1F',       // primary text
    ink2:      '#3C3C43',       // secondary
    ink3:      'rgba(60,60,67,0.60)',   // tertiary
    ink4:      'rgba(60,60,67,0.30)',   // quaternary / separators
    sep:       'rgba(60,60,67,0.12)',   // hairline
    accent:    '#0A84FF',       // iOS blue
    accentPressed: '#0070E0',
    wa:        '#25D366',       // WhatsApp green
    waPressed: '#1EBE5B',
    danger:    '#FF3B30',
    warn:      '#FF9F0A',
    success:   '#30D158',
    // bento tile backgrounds
    tileIG:    '#FFF0F4',
    tileTT:    '#F1F1F3',
    tileX:     '#F1F1F3',
    tileFB:    '#EEF3FF',
    tileYT:    '#FFF0F0',
    tileLI:    '#EEF5FF',
  },
  radius: {
    xs: 8, sm: 12, md: 16, lg: 20, xl: 24, xxl: 28, pill: 9999,
  },
  shadow: {
    card:   '0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.05)',
    cardHi: '0 2px 4px rgba(0,0,0,0.05), 0 12px 30px rgba(0,0,0,0.08)',
    btn:    '0 1px 2px rgba(10,132,255,0.25), 0 8px 20px rgba(10,132,255,0.28)',
    wa:     '0 1px 2px rgba(37,211,102,0.25), 0 8px 20px rgba(37,211,102,0.30)',
    float:  '0 10px 30px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06)',
  },
  font: {
    // SF-like stack
    stack: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif',
    mono:  '"SF Mono", ui-monospace, Menlo, monospace',
  },
};

window.HUUL_TOKENS = HUUL_TOKENS;