// Theme configuration
const theme = {
  spacing: {
    xs: '0.5rem',
    sm: '0.75rem',
    md: '1rem'
  },
  typography: {
    fontFamily: 'JetBrains Mono, Source Code Pro, monospace',
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      md: '1rem'
    }
  }
}

/src
  /components
    /core
      CompactCard.tsx      // Base card with minimal padding
      MonoText.tsx         // Monospace text component  
      ActionBar.tsx        // Compact action buttons bar
    /forms
      CompactFormField.tsx // Minimal form fields
      InlineEdit.tsx       // Inline editing component
    /layout  
      CompactHeader.tsx    // Minimal header
      SidePanel.tsx        // Collapsible side panel

// Dark theme colors
const darkTheme = {
  colors: {
    background: '#1a1b1c',
    surface: '#2a2b2c', 
    primary: '#6b4fbb',
    secondary: '#454647',
    accent: '#bf40bf'
  }
}

// Light theme colors 
const lightTheme = {
  colors: {
    background: '#ffffff',
    surface: '#f5f5f5',
    primary: '#5b3da5',
    secondary: '#e5e5e5', 
    accent: '#9c27b0'
  }
}

// CompactCard.tsx
export const CompactCard = ({ title, children, actions }) => (
  <Box p={4} mb={8}>
    <Flex justify="between" align="center" mb={4}>
      <MonoText size="sm">{title}</MonoText>
      <ActionBar>{actions}</ActionBar>
    </Flex>
    {children}
  </Box>
)

// ActionBar.tsx
export const ActionBar = ({ children }) => (
  <Group spacing={4} noWrap>
    {children}
  </Group>
)

// CompactHeader.tsx
export const CompactHeader = () => (
  <Header height={40}>
    <Container fluid>
      <Flex justify="between" align="center">
        <Logo size="sm" />
        <MainNav />
        <UserMenu compact />
      </Flex>
    </Container>
  </Header>
)

// CompactFormField.tsx
export const CompactFormField = ({ label, children }) => (
  <Group spacing={4} noWrap>
    <Text size="xs" w={100}>{label}</Text>
    {children}
  </Group>
)