/**
 * Design tokens — single source of truth for the admin design system.
 *
 * Tokens are surfaced both as TypeScript constants (for inline-style escape
 * hatches) and via CSS custom properties in `styles/theme.css`. Always
 * prefer the CSS variables in production code; the TS constants are for
 * computed inline styles only (e.g. dynamic widths, computed grid sizes).
 */

export type SpaceToken =
  | '0'
  | 'px'
  | '0.5'
  | '1'
  | '1.5'
  | '2'
  | '2.5'
  | '3'
  | '4'
  | '5'
  | '6'
  | '8'
  | '10'
  | '12'
  | '16'

export type RadiusToken = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'

/** Numeric pixel values for inline style escape hatches. */
export const tokens = {
  // Spacing scale matches Tailwind's default (--spacing = 0.25rem = 4px).
  space: {
    '0': 0,
    px: 1,
    '0.5': 2,
    '1': 4,
    '1.5': 6,
    '2': 8,
    '2.5': 10,
    '3': 12,
    '4': 16,
    '5': 20,
    '6': 24,
    '8': 32,
    '10': 40,
    '12': 48,
    '16': 64,
  } as const satisfies Record<SpaceToken, number>,

  radius: {
    none: 0,
    sm: 2,
    md: 6,
    lg: 8,
    xl: 12,
    full: 9999,
  } as const satisfies Record<RadiusToken, number>,

  // Breakpoints mirror Tailwind defaults so primitives can compose with
  // utility classes without surprises. Use `matchMedia(`(min-width: …`)` to
  // sync JS-driven layout decisions with these values.
  breakpoint: {
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    '2xl': 1536,
  } as const,
}

/** Map a space token to the corresponding Tailwind `space-y-*` / `gap-*` value. */
export function spaceToTw(t: SpaceToken): string {
  // Tailwind's spacing utility already accepts the same scale, so we map
  // 1:1. Centralizing here means callers don't repeat the string literal.
  return t
}
