# Mithral Design System (Themepo)

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

## Core Palette

- **Obsidian**: `#08090C` (Primary Background)
- **Mithral**: `#FFFFFF` (Primary Text / Silver)
- **Mithral Dim**: `rgba(255, 255, 255, 0.74)` (Secondary Text)
- **Mithral Soft**: `rgba(255, 255, 255, 0.48)` (Quiet Labels)
- **Mithral Dark**: `rgba(255, 255, 255, 0.22)` (Muted Lines)
- **Arcane Blue**: `#A78BFA` (Purple Accent / Glow)

## Surface Language

- **Surface Card**: dark glass card surface used for panels and controls.
- **Surface Card Hover**: slightly brighter glass surface for interactive hover states.
- **Surface Glass**: translucent obsidian field for inputs and subtle overlays.
- **Border Arcane**: low-opacity purple border for active/selected states.

## 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.
- **.glass-panel**: Portal-style glass card panel.
- **.arcane-button**: Purple-accent uppercase action button.
- **.eyebrow-rune**: Small uppercase decorative label.
- **.portal-divider**: Ornamental dividers with gradient lines.
- **.bg-noise**: Film grain overlay effect.

## Notes

The general design-system files have been aligned with the newer Portal-v2 brand language. Jellyfin/ElegantFin theme files are separate and should be updated independently.