// ═══════════════════════════════════════════════════════════════════════
// Clients — design tokens
// Same scheme as previous-nc / my-audits so visuals stay consistent.
// ═══════════════════════════════════════════════════════════════════════

export const TOKENS = {
  brand: '#0f766e',
  brandLight: '#14b8a6',
  brandDark: '#0d544c',

  ink: '#0b1220',
  ink2: '#1f2937',
  ink3: '#475569',
  ink4: '#64748b',
  ink5: '#94a3b8',
  line: '#e2e8f0',
  line2: '#f1f5f9',
  bg: '#f6f8fa',
  surface: '#ffffff',

  success: '#16a34a',
  warning: '#f59e0b',
  danger: '#dc2626',
  info: '#2563eb',

  client: '#0f766e',
  surveillance: '#b45309',

  qrs: '#6366f1',
  tqs: '#06b6d4',

  rSm: '6px',
  rMd: '10px',
  rLg: '14px',
  shadow: '0 1px 3px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.04)',
  shadowLg: '0 4px 12px rgba(15,23,42,0.08), 0 16px 40px rgba(15,23,42,0.06)',
};

export const fmt = (n: number) => n.toLocaleString();

export const pct = (n: number, total: number) =>
  total > 0 ? `${((n / total) * 100).toFixed(1)}%` : '0%';

export function sourceColor(s: string | null | undefined): string {
  return (s || '').toUpperCase() === 'TQS' ? TOKENS.tqs : TOKENS.qrs;
}

export function typeColor(t: string | null | undefined): string {
  return (t || '') === 'Surveillance' ? TOKENS.surveillance : TOKENS.client;
}

export const thStyle: React.CSSProperties = {
  padding: '12px 10px',
  textAlign: 'left',
  fontSize: 10,
  fontWeight: 800,
  color: '#475569',
  textTransform: 'uppercase',
  letterSpacing: '0.06em',
  background: '#f8fafc',
  borderBottom: '1px solid #e2e8f0',
  whiteSpace: 'nowrap',
};