// STUDIO — design tokens (gold / amber accent · document authoring workspace)
const Tst = window.ArbiterTokens;

const st = {
  gold:       '#C9A84C',
  goldDeep:   '#92650A',
  goldLight:  '#F59E0B',
  goldBg:     'rgba(201,168,76,0.07)',
  goldBorder: 'rgba(201,168,76,0.24)',

  slate:     '#64748B',
  slateBg:   'rgba(100,116,139,0.07)',
  emerald:   '#059669',
  emeraldBg: 'rgba(5,150,105,0.07)',
  cobalt:    '#1D4ED8',
  cobaltBg:  'rgba(29,78,216,0.07)',
  crimson:   '#B91C1C',
  crimsonBg: 'rgba(185,28,28,0.07)',
  violet:    '#7C3AED',
  violetBg:  'rgba(124,58,237,0.07)',
  amber:     '#B45309',
  amberBg:   'rgba(180,83,9,0.07)',
  teal:      '#0D9488',
  tealBg:    'rgba(13,148,136,0.07)',
  orange:    '#EA580C',
  orangeBg:  'rgba(234,88,12,0.07)',

  container:   { flex: 1, overflow: 'auto', background: Tst.color.bg.primary },
  header:      { padding: '16px 24px', borderBottom: `1px solid ${Tst.color.border.light}`, background: Tst.color.bg.card, display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
  headerTitle: { display: 'flex', alignItems: 'center', gap: '12px' },
  stIcon:      { width: '32px', height: '32px', borderRadius: '6px', background: 'linear-gradient(135deg, #C9A84C 0%, #92650A 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '16px', color: '#fff' },
  title:       { fontSize: '18px', fontWeight: 700, color: Tst.color.text.primary, letterSpacing: '-0.02em' },
  subtitle:    { fontSize: '12px', color: Tst.color.text.tertiary, marginTop: '1px' },
  tabs:        { display: 'flex', gap: '0', borderBottom: `1px solid ${Tst.color.border.light}`, background: Tst.color.bg.card, padding: '0 24px' },
  tab:         { padding: '10px 16px', fontSize: '12px', fontWeight: 500, color: Tst.color.text.tertiary, cursor: 'pointer', border: 'none', background: 'none', borderBottom: '2px solid transparent', fontFamily: Tst.font.family, transition: 'all 0.15s', marginBottom: '-1px', whiteSpace: 'nowrap' },
  tabActive:   { color: '#C9A84C', borderBottom: '2px solid #C9A84C', fontWeight: 600 },
  body:        { padding: '20px 24px' },

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

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

  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' },

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

  btnPrimary:   { padding: '6px 14px', borderRadius: '6px', background: '#C9A84C', border: 'none', color: '#fff', fontSize: '12px', fontWeight: 700, cursor: 'pointer', fontFamily: Tst.font.family },
  btnSecondary: { padding: '5px 12px', borderRadius: '6px', border: `1px solid ${Tst.color.border.light}`, background: Tst.color.bg.card, fontSize: '11px', fontWeight: 500, color: Tst.color.text.secondary, cursor: 'pointer', fontFamily: Tst.font.family },
  btnGhost:     { padding: '4px 10px', borderRadius: '5px', border: 'none', background: 'transparent', fontSize: '11px', fontWeight: 500, color: '#C9A84C', cursor: 'pointer', fontFamily: Tst.font.family },

  docStatusColor: (s) => {
    const map = {
      'Draft':     { bg: 'rgba(100,116,139,0.08)', color: '#64748B' },
      'In Review': { bg: 'rgba(180,83,9,0.08)',    color: '#B45309' },
      'Approved':  { bg: 'rgba(5,150,105,0.08)',   color: '#059669' },
      'Rejected':  { bg: 'rgba(185,28,28,0.08)',   color: '#B91C1C' },
      'Published': { bg: 'rgba(29,78,216,0.08)',   color: '#1D4ED8' },
      'Archived':  { bg: 'rgba(100,116,139,0.06)', color: '#94A3B8' },
      'Pending':   { bg: 'rgba(201,168,76,0.10)',  color: '#C9A84C' },
      'Signed':    { bg: 'rgba(5,150,105,0.08)',   color: '#059669' },
    };
    return map[s] || { bg: 'rgba(100,116,139,0.08)', color: '#64748B' };
  },

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

window.__st = st;