export const tokens = {
  space: {
    xs: 4,   // 4px
    sm: 8,   // 8px
    md: 16,  // 16px
    lg: 24,  // 24px
    xl: 32,  // 32px
    xxl: 48, // 48px
  },
  color: {
    brand:   'var(--c-brand)', // Atlassian Blue
    brandHover: 'var(--c-brand-hover)',
    surface: '#FFFFFF',
    subtle:  'var(--c-surface-muted)',
    elevated: 'var(--c-surface-raised)',
    text:    'var(--c-text)',
    muted:   'var(--c-muted)',
    border:  'var(--c-border)',
    borderFocus: 'var(--c-brand-focus)',
    danger:  'var(--c-danger)',
    dangerSubtle: 'var(--c-danger-tint)',
    success: 'var(--c-success)',
    successSubtle: '#E3FCEF',
    warning: 'var(--c-warning)',
    warningSubtle: '#FFFAE6',
    info:    'var(--c-brand)',
    infoSubtle: 'var(--c-brand-tint)',
  },
  sidebar: {
    collapsed: 56,
    expanded:  320,
  },
  touchTarget: 44, // WCAG 2.5.5 minimum
  borderRadius: {
    sm: 3,
    md: 4,
    lg: 8,
    full: 9999,
  },
} as const

export type ColorToken = keyof typeof tokens.color
export type SpaceToken = keyof typeof tokens.space
