// Shared design tokens + small primitives for Life OS

window.T = {
  // iOS system colors (light)
  bg:        '#F2F2F7',
  bg2:       '#FFFFFF',
  bg3:       '#FAFAFC',
  label:     '#000000',
  label2:    'rgba(60,60,67,0.72)',
  label3:    'rgba(60,60,67,0.45)',
  label4:    'rgba(60,60,67,0.25)',
  sep:       'rgba(60,60,67,0.10)',
  blue:      '#007AFF',
  green:     '#34C759',
  red:       '#FF3B30',
  orange:    '#FF9500',
  yellow:    '#FFCC00',
  pink:      '#FF2D55',
  purple:    '#AF52DE',
  indigo:    '#5856D6',
  teal:      '#5AC8FA',
  // typography sizes (Apple Type Ramp)
  fz: {
    huge: 34, t1: 28, t2: 22, t3: 20, head: 17, body: 17,
    callout: 16, sub: 15, foot: 13, c1: 12, c2: 11,
  },
};

// Reusable card
function Card({ children, style = {}, onClick, padded = true }) {
  return (
    <div onClick={onClick} style={{
      background: T.bg2,
      borderRadius: 18,
      padding: padded ? 14 : 0,
      boxShadow: '0 1px 0 rgba(0,0,0,0.02), 0 1px 3px rgba(0,0,0,0.025)',
      cursor: onClick ? 'pointer' : 'default',
      ...style,
    }}>
      {children}
    </div>
  );
}

// Section header (small caps)
function Section({ title, action, children, style }) {
  return (
    <div style={{ ...style }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        padding: '0 20px 8px',
      }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: T.label2, letterSpacing: 0.4, textTransform: 'uppercase' }}>{title}</div>
        {action}
      </div>
      <div style={{ padding: '0 16px' }}>{children}</div>
    </div>
  );
}

// Glass pill (more subtle than the device-frame one)
function Pill({ children, dark = false, style = {}, onClick, padded = true }) {
  return (
    <div onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: padded ? '8px 14px' : 0,
      borderRadius: 999,
      background: dark ? 'rgba(120,120,128,0.32)' : 'rgba(255,255,255,0.72)',
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      border: '0.5px solid rgba(0,0,0,0.06)',
      boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
      fontSize: 14, fontWeight: 500,
      cursor: onClick ? 'pointer' : 'default',
      ...style,
    }}>
      {children}
    </div>
  );
}

// Small inline color chip (relationship type tags etc)
function Dot({ color, size = 8, style }) {
  return <span style={{ display: 'inline-block', width: size, height: size, borderRadius: 999, background: color, ...style }} />;
}

// Nicely-formatted Hebrew/English mixed line. The string is already mixed.
function Bi({ children, style }) {
  return <span style={{ unicodeBidi: 'plaintext', direction: 'ltr', ...style }}>{children}</span>;
}

// Linear gradient bg helper
const grad = (a, b, dir = '135deg') => `linear-gradient(${dir}, ${a}, ${b})`;

Object.assign(window, { Card, Section, Pill, Dot, Bi, grad });