// ESIGN PLATFORM — design tokens (matches default Arbiter platform style · indigo accent)
const Tes = window.ArbiterTokens;

const es = {
  // Accent — indigo "trust + authority" palette
  indigo:       '#4F46E5',
  indigoDeep:   '#3730A3',
  indigoLight:  '#818CF8',
  indigoBg:     'rgba(79,70,229,0.06)',
  indigoBorder: 'rgba(79,70,229,0.20)',

  // Status palette
  emerald:    '#059669',
  emeraldBg:  'rgba(5,150,105,0.06)',
  amber:      '#B45309',
  amberBg:    'rgba(180,83,9,0.06)',
  crimson:    '#B91C1C',
  crimsonBg:  'rgba(185,28,28,0.06)',
  slate:      '#475569',
  slateBg:    'rgba(71,85,105,0.06)',
  violet:     '#7C3AED',
  violetBg:   'rgba(124,58,237,0.06)',
  teal:       '#0D9488',
  tealBg:     'rgba(13,148,136,0.06)',
  rose:       '#E11D48',
  roseBg:     'rgba(225,29,72,0.06)',

  // ── Shell (default platform style) ────────────────────────────────────────────
  container: { flex: 1, overflow: 'auto', background: Tes.color.bg.primary },
  header: {
    padding: '16px 24px', borderBottom: `1px solid ${Tes.color.border.light}`,
    background: Tes.color.bg.card, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  },
  headerTitle: { display: 'flex', alignItems: 'center', gap: '12px' },
  esIcon: {
    width: '32px', height: '32px', borderRadius: '6px',
    background: 'linear-gradient(135deg, #4F46E5 0%, #3730A3 100%)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: '#fff',
  },
  title:    { fontSize: '18px', fontWeight: 700, color: Tes.color.text.primary, letterSpacing: '-0.02em' },
  subtitle: { fontSize: '12px', color: Tes.color.text.tertiary, marginTop: '1px' },

  tabs: {
    display: 'flex', gap: '0', borderBottom: `1px solid ${Tes.color.border.light}`,
    background: Tes.color.bg.card, padding: '0 24px', overflowX: 'auto',
  },
  tab: {
    padding: '10px 16px', fontSize: '12px', fontWeight: 500,
    color: Tes.color.text.tertiary, cursor: 'pointer', border: 'none', background: 'none',
    borderBottom: '2px solid transparent', fontFamily: Tes.font.family,
    transition: 'all 0.15s', marginBottom: '-1px', whiteSpace: 'nowrap',
    display: 'flex', alignItems: 'center', gap: '6px',
  },
  tabActive: { color: '#4F46E5', borderBottomColor: '#4F46E5', fontWeight: 600 },

  body: { padding: '20px 24px' },

  // ── Cards (default) ───────────────────────────────────────────────────────────
  card:  { background: Tes.color.bg.card, border: `1px solid ${Tes.color.border.light}`, borderRadius: Tes.radius.lg, overflow: 'hidden', marginBottom: '16px' },
  cardH: { padding: '10px 16px', borderBottom: `1px solid ${Tes.color.border.light}`, fontSize: '12px', fontWeight: 600, color: Tes.color.text.primary, display: 'flex', alignItems: 'center', justifyContent: 'space-between' },

  // ── Stats ─────────────────────────────────────────────────────────────────────
  stat:      { display: 'flex', flexDirection: 'column', gap: '2px', padding: '12px 16px', background: Tes.color.bg.secondary, borderRadius: '6px', border: `1px solid ${Tes.color.border.light}` },
  statLabel: { fontSize: '10px', fontWeight: 600, color: Tes.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em' },
  statValue: { fontSize: '22px', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.1, color: Tes.color.text.primary },
  statDelta: { fontSize: '10px', fontWeight: 500, marginTop: '2px' },

  // ── Header KPI pills (default rounded 8px style) ──────────────────────────────
  kpiPill: { display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: Tes.color.bg.secondary, border: `1px solid ${Tes.color.border.light}` },
  kpiPillLabel: { fontSize: '10px', fontWeight: 600, color: Tes.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' },
  kpiPillValue: { fontSize: '14px', fontWeight: 700, color: Tes.color.text.primary, fontFamily: Tes.font.mono },

  // ── Tags & pills ──────────────────────────────────────────────────────────────
  tag:  { display: 'inline-flex', alignItems: 'center', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 600 },
  pill: { display: 'inline-flex', alignItems: 'center', padding: '3px 10px', borderRadius: '12px', fontSize: '11px', fontWeight: 500, gap: '4px' },

  // ── Tables ────────────────────────────────────────────────────────────────────
  th: { fontSize: '10px', fontWeight: 600, color: Tes.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '8px 12px', textAlign: 'left', background: Tes.color.bg.secondary, borderBottom: `1px solid ${Tes.color.border.light}`, whiteSpace: 'nowrap' },
  td: { fontSize: '12px', color: Tes.color.text.primary, padding: '10px 12px', borderBottom: `1px solid ${Tes.color.border.light}`, verticalAlign: 'middle' },

  // ── Buttons (default) ─────────────────────────────────────────────────────────
  btnPrimary:   { padding: '6px 14px', borderRadius: '6px', background: '#4F46E5', border: 'none', color: '#fff', fontSize: '12px', fontWeight: 700, cursor: 'pointer', fontFamily: Tes.font.family, display: 'inline-flex', alignItems: 'center', gap: '6px' },
  btnSecondary: { padding: '5px 12px', borderRadius: '6px', border: `1px solid ${Tes.color.border.light}`, background: Tes.color.bg.card, fontSize: '11px', fontWeight: 500, color: Tes.color.text.secondary, cursor: 'pointer', fontFamily: Tes.font.family, display: 'inline-flex', alignItems: 'center', gap: '5px' },
  btnGhost:     { padding: '4px 10px', borderRadius: '5px', border: 'none', background: 'transparent', fontSize: '11px', fontWeight: 500, color: '#4F46E5', cursor: 'pointer', fontFamily: Tes.font.family, display: 'inline-flex', alignItems: 'center', gap: '4px' },
  btnIcon:      { width: '28px', height: '28px', borderRadius: '6px', border: `1px solid ${Tes.color.border.light}`, background: Tes.color.bg.card, color: Tes.color.text.secondary, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: 0 },

  // ── Filter chips (pill-style, default) ────────────────────────────────────────
  filterBtn:       { padding: '4px 10px', borderRadius: Tes.radius.md, border: `1px solid ${Tes.color.border.light}`, background: Tes.color.bg.card, fontSize: '11px', fontWeight: 500, color: Tes.color.text.secondary, cursor: 'pointer', fontFamily: Tes.font.family },
  filterBtnActive: { background: '#4F46E5', color: '#fff', borderColor: '#4F46E5' },

  // Status dot map
  statusDot: (s) => {
    const m = {
      'Draft':      '#94A3B8',
      'Sent':       '#4F46E5',
      'Delivered':  '#4F46E5',
      'Viewed':     '#7C3AED',
      'Completed':  '#059669',
      'Signed':     '#059669',
      'Declined':   '#B91C1C',
      'Voided':     '#94A3B8',
      'Expired':    '#B45309',
      'Waiting':    '#B45309',
      'Pending':    '#64748B',
      'Delegated':  '#0D9488',
    };
    return m[s] || '#94A3B8';
  },

  envelopeStatus: (s) => {
    const map = {
      'Draft':      { bg: 'rgba(71,85,105,0.08)', color: '#475569',  label: 'Draft'      },
      'Sent':       { bg: 'rgba(79,70,229,0.08)', color: '#4F46E5',  label: 'Sent'       },
      'Delivered':  { bg: 'rgba(79,70,229,0.08)', color: '#4F46E5',  label: 'Delivered'  },
      'Viewed':     { bg: 'rgba(124,58,237,0.08)',color: '#7C3AED',  label: 'Viewed'     },
      'Completed':  { bg: 'rgba(5,150,105,0.08)', color: '#059669',  label: 'Completed'  },
      'Declined':   { bg: 'rgba(185,28,28,0.08)', color: '#B91C1C',  label: 'Declined'   },
      'Voided':     { bg: 'rgba(71,85,105,0.06)', color: '#94A3B8',  label: 'Voided'     },
      'Expired':    { bg: 'rgba(180,83,9,0.08)',  color: '#B45309',  label: 'Expired'    },
      'Waiting':    { bg: 'rgba(180,83,9,0.08)',  color: '#B45309',  label: 'Waiting'    },
    };
    return map[s] || { bg: 'rgba(71,85,105,0.08)', color: '#475569', label: s };
  },

  signerStatus: (s) => {
    const map = {
      'Signed':    { bg: 'rgba(5,150,105,0.08)',  color: '#059669' },
      'Sent':      { bg: 'rgba(79,70,229,0.08)',  color: '#4F46E5' },
      'Viewed':    { bg: 'rgba(124,58,237,0.08)', color: '#7C3AED' },
      'Pending':   { bg: 'rgba(71,85,105,0.08)',  color: '#475569' },
      'Declined':  { bg: 'rgba(185,28,28,0.08)',  color: '#B91C1C' },
      'Delegated': { bg: 'rgba(13,148,136,0.08)', color: '#0D9488' },
    };
    return map[s] || { bg: 'rgba(71,85,105,0.08)', color: '#475569' };
  },

  num: (n) => n == null ? '—' : n.toLocaleString(),
};

window.__es = es;