# Mithral Design System (Themepo)

A consistent, arcane-inspired design system used across The Mithral Archive applications.

## Core Palette

- **Obsidian**: `#08090C` (Primary Background)
- **Mithral**: `#E2E8F0` (Primary Text / Silver)
- **Mithral Dim**: `#94A3B8` (Secondary Text)
- **Mithral Dark**: `#334155` (Borders / Muted)
- **Arcane Blue**: `#38BDF8` (Accent / Glow)

## Typography

- **Runic/Heading**: 'Cinzel Decorative', serif
- **Body**: 'Inter', sans-serif
- **Mono**: 'JetBrains Mono', monospace

## Usage

### CSS Variables
Import `variables.css` into your global styles:
```css
@import 'variables.css';
```

### Tailwind CSS
Add the `tailwind.preset.js` to your `tailwind.config.js`:
```javascript
module.exports = {
  presets: [require('./tailwind.preset.js')],
  // ... rest of config
}
```

### Base & Components
Include `base.css` and `components.css` for standard animations, scrollbars, and UI components like the `arcane-circle` or `ledger-row`.

## Key Components

- **.arcane-circle**: Rotating background rings.
- **.ledger-row**: Interactive links with the "Mithral Vein" hover effect.
- **.stat-card**: Glowing cards for display metrics.
- **.portal-divider**: Ornamental dividers with gradient lines.
- **.bg-noise**: Film grain overlay effect.