@akson/cortex-landing-themes/README.md

Design system and theming utilities for landing pages - CSS custom properties, theme presets, and design tokens

# @akson/cortex-landing-themes

> Design system and theming utilities for landing pages - CSS custom properties, theme presets, and design tokens

## Installation

```bash
npm install @akson/cortex-landing-themes
```

## Usage

```typescript
import { ThemeProvider, useTheme, designTokens } from '@akson/cortex-landing-themes';

function App() {
  return (
    <ThemeProvider theme="myarmy-default">
      <LandingPage />
    </ThemeProvider>
  );
}

function MyComponent() {
  const theme = useTheme();
  
  return (
    <div style={{
      color: theme.colors.primary,
      fontFamily: theme.fonts.heading
    }}>
      Swiss Military Theme
    </div>
  );
}
```

## Design Tokens

```css
:root {
  /* MyArmy Colors */
  --myarmy-primary: #1A1A1A;
  --myarmy-secondary: #7A8B73;
  --myarmy-accent: #1F3A0F;
  
  /* Typography */
  --font-heading: 'Swiss Military', serif;
  --font-body: 'Inter', sans-serif;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
}
```

## Themes

- `myarmy-default` - Standard Swiss military theme
- `myarmy-dark` - Dark mode variant
- `myarmy-minimal` - Minimalist version

## Features

- CSS custom properties
- Theme switching
- Design token system
- WCAG AAA compliant colors
- Swiss military aesthetic

## License

MIT © MyArmy