# Tokens

This file mirrors the canonical tokens in `styles.css`.

## Color

| Token | Value | Use |
| --- | --- | --- |
| `--page` | `#f3eee5` | Main cream canvas |
| `--paper` | `#fbfaf6` | Raised white/cream surfaces and buttons |
| `--ink` | `#171717` | Primary text |
| `--muted` | `#5f5f5d` | Body/supporting text |
| `--soft` | `#d9d7d2` | Workflow chips and quiet fills |
| `--green` | `#174f3b` | Primary emphasis and italic headline color |
| `--green-2` | `#3f8a5a` | Secondary green actions |
| `--blue` | `#315f96` | Blue fan card |
| `--deep-blue` | `#133080` | Deep blue labels/chips/fan card |
| `--pale-navy` | `#dfe1f7` | Old Myclaude pale blue for hero borders/glow |
| `--orange` | `#c46f3d` | Orange fan card |
| `--gold` | `#d1b06e` | Gold fan card |
| `--glass` | `rgba(255,255,255,.58)` | Soft card background |
| `--line` | `rgba(23,23,23,.10)` | Subtle lines |
| `--glass-border` | `rgba(255,255,255,.78)` | Glass card/template borders |
| `--hero-border` | `color-mix(in srgb, var(--pale-navy) 42%, var(--line))` | Template hero border, matched to old Myclaude article cards |
| `--inset-highlight` | `inset 0 1px 0 rgba(255,255,255,.76)` | Inner highlight on glass surfaces |
| `--hero-gradient` | multi-stop radial/linear gradient | Template hero background |
| `--terminal-red` | `#df5f5f` | Terminal window red dot |
| `--terminal-yellow` | `#d8b96c` | Terminal window yellow dot |
| `--terminal-green` | `#6fb777` | Terminal window green dot |
| `--table-head` | `rgba(231,239,224,.62)` | Table header background |
| `--sidebar-active` | `rgba(222,248,232,.76)` | Active side navigation item |

## Typography

| Token | Value | Use |
| --- | --- | --- |
| `--font-display` | `"Manrope", system-ui, sans-serif` | H1, H2, cards, buttons |
| `--font-editorial` | `"Cormorant Garamond", Georgia, serif` | Future articles, quotes, reflective moments |
| `--font-body` | `"Manrope", system-ui, sans-serif` | Body copy |
| `--font-mono` | `"JetBrains Mono", monospace` | Labels, chips, filenames, prompt names |

Font roles:

- Manrope is the dominant voice for display, body, navigation, buttons, and cards.
- Cormorant Garamond is the editorial accent for future field notes, article titles, quotes, and reflective moments.
- JetBrains Mono is the operational utility font for labels, step numbers, workflow chips, filenames, and prompt names.

## Type Scale

| Token | Value | Use |
| --- | --- | --- |
| `--type-hero` | `clamp(4.6rem, 7vw, 7.2rem)` | Homepage H1 only |
| `--type-page-title` | `clamp(3.4rem, 5.8vw, 5.8rem)` | Subpage H1 |
| `--type-section-title` | `clamp(3.1rem, 5vw, 5.4rem)` | Major homepage sections |
| `--type-card-title` | `clamp(1.9rem, 3vw, 2.8rem)` | Wide editorial cards |
| `--type-body-large` | `clamp(1.05rem, 1.45vw, 1.2rem)` | Hero/supporting paragraphs |
| `--type-editorial-title` | `clamp(2.75rem, 7vw, 4.6rem)` | Medium-style article H1 |
| `--type-editorial-dek` | `clamp(1.22rem, 2.1vw, 1.5rem)` | Medium-style article deck |

## Radius

| Token | Value | Use |
| --- | --- | --- |
| `--radius-sm` | `10px` | Small controls if needed |
| `--radius-md` | `20px` | Buttons, fan cards, mobile cards |
| `--radius-lg` | `28px` | Soft cards |
| `--radius-xl` | `36px` | Reserved for larger editorial surfaces |
| `--radius-template` | `32px` | Old Myclaude article/template hero shell |
| `--radius-pill` | `999px` | Workflow chips and doc chips |

## Shadow

| Token | Value | Use |
| --- | --- | --- |
| `--shadow-soft` | `0 18px 45px rgba(35,33,29,.08)` | Soft cards |
| `--shadow-float` | `0 28px 70px rgba(35,33,29,.13), 0 2px 8px rgba(35,33,29,.06)` | Primary raised buttons/surfaces |
| `--shadow-fan` | `0 24px 50px rgba(36,33,29,.18)` | Homepage fan cards |
| `--shadow-hero` | `0 24px 70px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72)` | Template hero shell, matched to old Myclaude |

## Spacing And Width

| Token | Value | Use |
| --- | --- | --- |
| `--page-x` | `clamp(24px, 5vw, 72px)` | Page gutters |
| `--section-y` | `clamp(96px, 12vw, 160px)` | Vertical section spacing |
| `--wide` | `1180px` | Main layout width |
| `--reading` | `740px` | Reading/page intro width |