# Modern Docusaurus Dark Theme — CSS Reference

Dark-first, Vercel/Linear-inspired theme built for SKIC Playground docs.
Full source lives at `/opt/data/documentation/src/css/custom.css`.

## Design Decisions

- **Font**: Geist (by Vercel) via CDN + Geist Mono for code
- **Accent**: Indigo `#6366f1` (light) / `#818cf8` (dark)
- **Background**: `#0a0a0a` (near-black, not pure black)
- **Surface**: `#111111` for cards, sidebars
- **Text**: `#ededed` primary, `#a1a1a1` secondary

## Key Overrides

### Dark mode base palette
```css
[data-theme='dark'] {
  --ifm-color-primary:          #818cf8;
  --ifm-background-color:       #0a0a0a;
  --ifm-background-surface-color: #111111;
  --ifm-navbar-background-color: rgba(10, 10, 10, 0.85);
  --ifm-color-content:          #ededed;
  --ifm-color-content-secondary: #a1a1a1;
  --ifm-color-emphasis-100:     #1a1a1a;
  --ifm-color-emphasis-200:     #222222;
  --ifm-color-emphasis-300:     #333333;
}
```

### Typography
```css
:root {
  --ifm-font-family-base:      'Geist', 'Inter', system-ui, sans-serif;
  --ifm-font-family-monospace: 'Geist Mono', 'Fira Code', monospace;
  --ifm-font-size-base:        15px;
  --ifm-line-height-base:      1.7;
  --ifm-heading-letter-spacing: -0.02em;
  --ifm-h1-font-size:          2.25rem;
}
h2 { border-bottom: 1px solid var(--ifm-color-emphasis-200); }
```

### Glassmorphic Navbar
```css
.navbar {
  border-bottom: 1px solid var(--ifm-color-emphasis-200);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme='dark'] .navbar { background: rgba(10, 10, 10, 0.85); }
```

### Table Styling
```css
table { border: 1px solid var(--ifm-color-emphasis-200); border-radius: 8px; overflow: hidden; }
thead { background: var(--ifm-color-emphasis-100); }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
tbody tr:hover { background: var(--ifm-color-emphasis-100); }
```

### Hero Section (homepage)
```css
.heroTitle {
  background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 60%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}
```

### App Cards (dark glass style)
```css
.appCard {
  background: #111111;
  border: 1px solid #222222;
  border-radius: 12px;
  transition: all 0.15s ease;
}
.appCard:hover {
  border-color: #6366f1;
  background: #161625;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99,102,241,0.12);
}
```

## Prism Code Theme
Use `oneDark` for both light and dark (visually consistent in docs):
```ts
prism: {
  theme: prismThemes.oneDark,
  darkTheme: prismThemes.oneDark,
  additionalLanguages: ['bash', 'python', 'sql', 'yaml', 'json', 'typescript', 'docker'],
},
```

## Announcement Bar
```ts
announcementBar: {
  id: 'wip',
  content: '🚧 Under active development',
  backgroundColor: '#1a1a2e',
  textColor: '#818cf8',
  isCloseable: true,
},
```