// ============================================================================
// Shared "DT" design tokens — canonical values extracted from the polished
// pages (originally deliveries.js's "Batch" dropdown design language).
// Every redesigned operator page should import from here instead of
// redefining its own DT object, so radius/shadow/color decisions stay in one
// place. See CLAUDE.md §6 for the full page-anatomy convention these tokens
// support.
// ============================================================================
export const DT = {
  radiusPill: 999,
  radiusCard: 14,
  radiusInner: 10,
  radiusField: 10,
  // Restrained, low-contrast elevation — corporate (Linear/Stripe), not flashy.
  shadowSoft: '0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05)',
  shadowMd: '0 1px 3px rgba(15, 23, 42, 0.06)',
  shadowPop: '0 12px 32px rgba(15, 23, 42, 0.12)',
  textPrimary: '#0f172a',
  textSecondary: '#64748b',
  textMuted: '#94a3b8',
  borderSubtle: '#e2e8f0',
  borderHover: '#cbd5e1',
  divider: '#f1f5f9',
  surface: '#ffffff',
  surfaceAlt: '#f8fafc',
  brand: '#C01227'
};

// Quick alpha helpers (hex + percentage suffix).
export const a = (c, suffix) => `${c}${suffix}`;
export const tint = (c) => a(c, '08'); // very subtle surface tint
export const soft = (c) => a(c, '18'); // soft chip / avatar bg
export const ring = (c) => a(c, '26'); // focus ring color
export const edge = (c) => a(c, '55'); // resting border

// Pill input sx — used by every filter Autocomplete/TextField on a page.
// Neutral, corporate filter field: white surface, hairline border, brand
// focus ring. Width is driven by parent flex/grid so this helper stays
// width-agnostic.
export const pillFieldSx = () => ({
  cursor: 'pointer',
  '& .MuiOutlinedInput-root': {
    borderRadius: DT.radiusField + 'px',
    bgcolor: DT.surface,
    fontWeight: 600,
    color: DT.textPrimary,
    paddingRight: '8px',
    cursor: 'pointer',
    transition: 'border-color 0.15s, box-shadow 0.15s',
    '& fieldset': { borderColor: DT.borderSubtle, borderWidth: 1 },
    '&:hover fieldset': { borderColor: DT.borderHover },
    '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(DT.brand)}` },
    '&.Mui-focused fieldset': { borderColor: DT.brand, borderWidth: 1.5 }
  },
  '& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': { color: DT.textMuted }
});
