fractalstyler2 0.0.2 → 0.3.0

package/dist/styles/_10_layouts.sass

@@ -0,0 +1,373 @@
+// =============================================================================
+// 10_LAYOUTS — the largest fractals. Same recipe move, page scale.
+// -----------------------------------------------------------------------------
+// Layouts compose molecule and atom fractals into structural arrangements.
+// State and responsive reflow are handled with +cols, +auto-grid, +cover.
+// =============================================================================
+
+@use 'fractals' as *
+
+// Column grid presets
+.grid-1
+	+cols((base: 1), s)
+
+.grid-2
+	+cols((base: 1, md: 2), m)
+
+.grid-3
+	+cols((base: 1, sm: 2, lg: 3), s)
+
+.grid-4
+	+cols((base: 1, sm: 2, lg: 4), s)
+
+.grid-6
+	+cols((base: 2, sm: 3, md: 4, lg: 6), xs)
+
+// A grid that never needs breakpoints: it fits as many columns as will hold
+// the min track. Reach for this when column count is negotiable.
+.card-grid
+	+auto-grid(16rem, s)
+
+// Hero — full-viewport cover with a centered, measured message.
+.hero
+	+cover(80vh, xl)
+	> .center
+		+stack(m, center)
+		text-align: center
+		max-width: 45ch
+
+// Holy grail — header / (nav · main · aside) / footer.
+.holy-grail
+	display: grid
+	min-height: 100vh
+	grid-template-rows: auto 1fr auto
+	grid-template-areas: 'header' 'main' 'footer'
+	> .hg-header
+		grid-area: header
+	> .hg-footer
+		grid-area: footer
+	> .hg-body
+		grid-area: main
+		display: grid
+		grid-template-columns: 1fr
+		+gap(m)
+		+pad(m)
+	+at(lg)
+		> .hg-body
+			grid-template-columns: var(--nav-w, 220px) minmax(0, 1fr) var(--aside-w, 260px)
+			> .hg-nav
+				+sticky(var(--space-m))
+				align-self: start
+			> .hg-aside
+				+sticky(var(--space-m))
+				align-self: start
+
+// Docs layout — responsive 3-column frame (nav · main · TOC).
+.docs
+	position: relative
+	display: grid
+	grid-template-columns: 1fr
+	min-height: calc(100vh - var(--header-height, 48px))
+
+	// Left Nav Rail (off-canvas drawer on mobile, sticky rail on desktop)
+	> .docs-nav
+		position: fixed
+		top: var(--header-height, 48px)
+		left: 0
+		z-index: var(--z-modal, 200)
+		width: min(85vw, 280px)
+		height: calc(100dvh - var(--header-height, 48px))
+		padding: var(--space-s)
+		overflow-y: auto
+		background: var(--bg)
+		+border(right)
+		transform: translateX(-105%)
+		transition: transform 200ms ease-out
+
+	&[data-drawer-open='true'] > .docs-nav
+		transform: translateX(0)
+
+	// Backdrop for mobile drawer
+	> .docs-backdrop
+		position: fixed
+		inset: var(--header-height, 48px) 0 0 0
+		z-index: calc(var(--z-modal, 200) - 1)
+		background: rgba(0, 0, 0, 0.5)
+		backdrop-filter: blur(2px)
+		border: none
+		cursor: pointer
+
+	// Center Reading Column
+	> .docs-main
+		+min0
+		+box
+		padding-block: var(--space-l)
+		padding-inline: var(--space-s)
+		> *
+			width: 100%
+			max-width: clamp(600px, 58vw, 760px)
+			margin-inline: auto
+
+	// Right TOC Rail (desktop only)
+	> .docs-toc
+		display: none
+
+	// Desktop Breakpoint (>= 1024px)
+	+at(lg)
+		--docs-nav-w: clamp(220px, 20vw, 270px)
+		--docs-toc-w: clamp(200px, 18vw, 240px)
+		grid-template-columns: var(--docs-nav-w) minmax(0, 1fr) var(--docs-toc-w)
+
+		> .docs-nav
+			position: sticky
+			top: var(--header-height, 48px)
+			width: auto
+			height: calc(100vh - var(--header-height, 48px))
+			transform: none
+			z-index: 10
+			padding: var(--space-m) var(--space-s)
+
+		> .docs-toc
+			display: block
+			position: sticky
+			top: var(--header-height, 48px)
+			height: calc(100vh - var(--header-height, 48px))
+			overflow-y: auto
+			padding: var(--space-m) var(--space-s)
+			+border(left)
+
+		> .docs-backdrop
+			display: none
+
+// NavTree styling
+.navtree
+	+box
+	+gap(m)
+
+.navtree-group
+	+box
+	+gap(3xs)
+
+.navtree-title
+	font-size: var(--text-xs)
+	font-weight: 600
+	text-transform: uppercase
+	letter-spacing: 0.06em
+	color: var(--text-muted)
+	padding: 6px 8px
+
+.navtree-link
+	+row(between, center)
+	padding: 6px 10px
+	font-size: var(--text-sm)
+	color: var(--text-secondary)
+	border-radius: var(--radius-4)
+	text-decoration: none
+	transition: all 120ms ease
+	&:hover
+		+bg(raised)
+		+ink(primary)
+	&[aria-current='page'], &[data-active='true']
+		+bg(surface)
+		color: var(--theme)
+		font-weight: 500
+		+border
+
+.navtree-sub
+	+box
+	+gap(3xs)
+	margin-left: 12px
+	padding-left: 8px
+	+border(left)
+
+// TOC styling
+.toc
+	+box
+	+gap(m)
+	height: 100%
+
+.toc-title
+	font-size: var(--text-xs)
+	font-weight: 600
+	text-transform: uppercase
+	letter-spacing: 0.06em
+	color: var(--text-muted)
+
+.toc-list
+	list-style: none
+	margin: 0
+	padding: 0
+	+box
+	+gap(2xs)
+
+.toc-link
+	display: block
+	font-size: var(--text-xs)
+	color: var(--text-muted)
+	text-decoration: none
+	padding: 3px 0
+	transition: color 120ms ease
+	&:hover
+		+ink(primary)
+	&[aria-current='true']
+		color: var(--theme)
+		font-weight: 500
+	&[data-depth='3']
+		padding-left: 10px
+
+.toc-footer
+	+partition(top, s)
+	+box
+	+gap(2xs)
+
+// Mobile TOC Disclosure
+.docs-mobile-toc
+	+box
+	+gap(xs)
+	+pad(xs)
+	+radius(6)
+	+bg(surface)
+	+border(all, var(--border))
+	summary
+		+row(between, center)
+		+weight(500)
+		+type(sm)
+		+ink(primary)
+		cursor: pointer
+		user-select: none
+		list-style: none
+		&::-webkit-details-marker
+			display: none
+	&[open]
+		+bg(raised)
+		summary
+			margin-bottom: var(--space-xs)
+			padding-bottom: var(--space-2xs)
+			+border(bottom, var(--border))
+
+// Prose Typography Container
+.prose
+	font-size: var(--text-sm)
+	line-height: 1.65
+	color: var(--text-secondary)
+
+	> * + *
+		margin-top: 1rem
+
+	h1
+		font-size: var(--text-3xl)
+		font-weight: 700
+		color: var(--text-primary)
+		line-height: 1.2
+		margin-top: 0
+		margin-bottom: 0.5rem
+
+	h2
+		font-size: var(--text-xl)
+		font-weight: 600
+		color: var(--text-primary)
+		line-height: 1.3
+		margin-top: 2rem
+		margin-bottom: 0.5rem
+		padding-bottom: 0.25rem
+		+border(bottom)
+
+	h3
+		font-size: var(--text-md)
+		font-weight: 600
+		color: var(--text-primary)
+		margin-top: 1.5rem
+		margin-bottom: 0.25rem
+
+	h4
+		font-size: var(--text-sm)
+		font-weight: 600
+		color: var(--text-primary)
+
+	p
+		margin-bottom: 1rem
+
+	ul, ol
+		padding-left: 1.25rem
+		margin-bottom: 1rem
+		li
+			margin-bottom: 0.25rem
+
+	code:not(pre code)
+		font-family: var(--font-mono)
+		font-size: 0.85em
+		padding: 2px 6px
+		background: var(--bg-raised)
+		border: 1px solid var(--border)
+		border-radius: var(--radius-3)
+		color: var(--text-primary)
+
+	pre
+		position: relative
+		background: var(--bg-surface)
+		border: 1px solid var(--border)
+		border-radius: var(--radius-6)
+		padding: var(--space-s)
+		overflow-x: auto
+		font-family: var(--font-mono)
+		font-size: var(--text-xs)
+		line-height: 1.5
+		color: var(--text-primary)
+		code
+			font-family: inherit
+			font-size: inherit
+			background: none
+			border: none
+			padding: 0
+
+	table
+		width: 100%
+		border-collapse: collapse
+		margin-block: 1.25rem
+		font-size: var(--text-sm)
+		th
+			text-align: left
+			padding: 8px 12px
+			border-bottom: 1px solid var(--border-subtle)
+			font-size: var(--text-xs)
+			font-weight: 600
+			text-transform: uppercase
+			letter-spacing: 0.04em
+			color: var(--text-primary)
+		td
+			padding: 8px 12px
+			border-bottom: 1px solid var(--border)
+			color: var(--text-secondary)
+
+	blockquote
+		margin: 1.25rem 0
+		padding: 8px 16px
+		border-left: 3px solid var(--theme)
+		background: var(--bg-raised)
+		border-radius: 0 var(--radius-4) var(--radius-4) 0
+		p
+			margin: 0
+			color: var(--text-primary)
+
+// App shell — sticky header, fluid body, footer.
+.app-shell
+	+box
+	+relative
+	isolation: isolate
+	min-height: 100vh
+	> .app-header
+		+row(null, center)
+		+sticky(0)
+		+px(m)
+		background: var(--bg)
+		z-index: var(--z-sticky)
+		height: var(--header-height)
+		+border(bottom)
+	> .app-main
+		+grow
+		+min0
+	> .app-footer
+		+row(null, center)
+		+px(m)
+		min-height: var(--footer-height)
+		+border(top)

package/dist/styles/_11_own.sass

@@ -0,0 +1,21 @@
+// =============================================================================
+// 11_OWN — bespoke project-specific styles and micro-components.
+// =============================================================================
+
+@use 'fractals' as *
+
+.logomotif
+	height: 28px
+	width: 28px
+	filter: saturate(0)
+
+.logotype
+	height: 16px
+	filter: saturate(0)
+
+.header-nav
+	font-size: var(--text-sm)
+	text-decoration: none
+	color: var(--text-secondary)
+	&:hover
+		color: var(--theme-color)

package/dist/styles/_fractals.sass

@@ -1,13 +1,14 @@
 // =============================================================================
-// FRACTALS — the pure API barrel. Emits NO css on its own.
+// FRACTALS — the pure API barrel. Emits NO CSS on its own.
 // -----------------------------------------------------------------------------
 // In any component partial or Svelte component:
 //   @use '$lib/styles/fractals' as *
 //   (or @use './fractals' as *)
-// then call fractals freely:  +surface(...)  +stack(...)  space(m) ...
+// then call fractals freely:  +surface(...)  +stack(...)  +card(...)
 // =============================================================================
 
-@forward 'config'
-@forward 'responsive'
-@forward 'atoms'
-@forward 'molecules'
+@forward '01_config'
+@forward '03_responsive'
+@forward '04_atoms'
+@forward '05_molecules'
+@forward '06_recipes'

package/dist/styles/index.sass

@@ -1,20 +1,18 @@
 // =============================================================================
-// STYLES ENTRY — the full emitted stylesheet in cascade order.
+// FRACTALSTYLER2 — Master Stylesheet & Public Mixin API
 // -----------------------------------------------------------------------------
-//   1. tokens      the CSS custom properties (only literal values)
-//   2. base        fluid reset
-//   3. utilities   atom fractals projected to markup classes (optional layer)
-//   4. blocks      components composed from fractals
-//   5. layouts     page templates composed from fractals
-//
-// Consume from a SvelteKit app:  import '$lib/styles/index.sass'
-// or from package:               import 'fractalstyler2/styles'
-// The fractal mixins/functions themselves emit nothing until called, so output
-// contains only what you use.
+// 1. Public API: Forwards all pure mixins, functions, and atoms (0 bytes CSS)
+// 2. Cascade Order: Emits CSS rules in strict specificity sequence
 // =============================================================================
 
-@use './tokens'
-@use './base'
-@use './utilities'
-@use './blocks'
-@use './layouts'
+// Public Sass API — available to any file that @uses this module
+@forward 'fractals'
+
+// Global Stylesheet Cascade
+@use '02_fonts' as *
+@use '00_tokens' as *
+@use '07_base' as *
+@use '08_blocks' as *
+@use '09_utilities' as *
+@use '10_layouts' as *
+@use '11_own' as *

package/mcp.json

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "fractalstyler2": {
+      "type": "stdio",
+      "command": "node",
+      "args": [
+        "${PLUGIN_ROOT}/dist/mcp/server.js"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,17 +1,18 @@
 {
 	"name": "fractalstyler2",
-	"version": "0.0.2",
+	"version": "0.3.0",
 	"description": "A fractal-composition styling system for SvelteKit — every style unit is a SASS mixin, and components and layouts are recipes of smaller fractals.",
 	"bin": {
 		"fractalstyler2": "./dist/cli.js",
-		"fractalstyler": "./dist/cli.js"
+		"fractalstyler": "./dist/cli.js",
+		"fractalstyler2-mcp": "./dist/mcp/server.js"
 	},
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && chmod +x dist/cli.js && publint",
+		"prepack": "svelte-kit sync && svelte-package && chmod +x dist/cli.js && chmod +x dist/mcp/server.js && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
@@ -19,7 +20,10 @@
 		"dist",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*",
-		"templates"
+		"templates",
+		"skills",
+		"plugin.json",
+		"mcp.json"
 	],
 	"sideEffects": [
 		"**/*.css"
@@ -35,7 +39,8 @@
 		"./styles": "./dist/styles/index.sass",
 		"./styles/*": "./dist/styles/*",
 		"./fractals": "./dist/styles/_fractals.sass",
-		"./tokens": "./dist/styles/_tokens.sass",
+		"./tokens": "./dist/styles/_00_tokens.sass",
+		"./mcp": "./dist/mcp/server.js",
 		"./package.json": "./package.json"
 	},
 	"peerDependencies": {
@@ -62,5 +67,8 @@
 		"design-system",
 		"mixins",
 		"fractal"
-	]
+	],
+	"dependencies": {
+		"@modelcontextprotocol/sdk": "^1.30.0"
+	}
 }

package/plugin.json

@@ -0,0 +1,22 @@
+{
+  "name": "fractalstyler2",
+  "version": "0.3.0",
+  "description": "Fractal-composition styling system and design token engine for SvelteKit and AI design tools (OpenDesign, Pencil, Cursor).",
+  "author": {
+    "name": "Amrit",
+    "url": "https://github.com/fractal-mandala"
+  },
+  "license": "MIT",
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "sass",
+    "css",
+    "design-system",
+    "mcp",
+    "tokens",
+    "fractals"
+  ],
+  "homepage": "https://github.com/fractal-mandala/fractalstyler2",
+  "repository": "https://github.com/fractal-mandala/fractalstyler2"
+}

package/skills/fractal-styler/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: fractal-styler
+description: Design, compose, and build UI components and page layouts using the fractalstyler2 SASS mixin system and fluid design tokens in SvelteKit. Use when authoring components, applying design tokens, styling layouts, or compiling fractal recipes.
+---
+
+# Fractal Styler (fractalstyler2)
+
+`fractalstyler2` is a fractal-composition styling system for SvelteKit and modern web applications. Every styling decision is a reusable SASS mixin ("a fractal"), and components and layouts are clean recipes composed of smaller fractals.
+
+---
+
+## The Four Tiers of Composition
+
+| Tier | Role | Examples |
+| :--- | :--- | :--- |
+| **1. Tokens & Config** | Fluid Utopia scales & resolvers | `space(m)` → `var(--space-m)`, `radius(12)` → `var(--radius-12)` |
+| **2. Atoms** | Single layout/styling decisions | `+box`, `+row`, `+gap(s)`, `+pad(m)`, `+border`, `+radius(12)`, `+bg(surface)`, `+ink(primary)` |
+| **3. Molecules** | Compositions of atoms | `+stack(s)`, `+cluster(xs)`, `+surface(surface, s, 12)`, `+cover(80vh)`, `+frame(16/9)`, `+with-sidebar` |
+| **4. Components & Layouts** | Recipes of molecules | `.card`, `.panel`, `.button`, `.badge` · `.grid-3`, `.card-grid`, `.hero`, `.holy-grail`, `.docs`, `.app-shell` |
+
+---
+
+## Golden Rules for Agents
+
+1. **Never hardcode values that tokens cover**: Use `+gap(m)`, `+radius(12)`, `+bg(surface)` instead of arbitrary pixel values.
+2. **Compose fractals; don't write raw CSS**: Raw CSS is strictly for unique lines that no fractal covers.
+3. **State on `data-*` / `aria-*` attributes**: Never use modifier classes like `.is-active` or `.btn--primary`. Use `&[data-elevated]`, `&[data-variant='primary']`.
+4. **Markup stays semantic**: Prefer `<article class="card">` over 20 nested utility classes.
+5. **Mobile-first**: Define base layout first, grow with `+at(md/lg/xl)` and `+cols()`.
+
+---
+
+## How to Author a Svelte 5 Component
+
+```svelte
+<script lang="ts">
+	let {
+		title = 'Pricing Tier',
+		price = '$29',
+		highlighted = false,
+		children
+	} = $props();
+</script>
+
+<article class="pricing-card" data-highlighted={highlighted || undefined}>
+	<div class="row ycenter xbetween">
+		<h3 class="text-xl">{title}</h3>
+		{#if highlighted}
+			<span class="badge" data-variant="theme">Popular</span>
+		{/if}
+	</div>
+	<div class="row ycenter gap-2xs">
+		<span class="text-4xl font-bold">{price}</span>
+		<span class="muted">/month</span>
+	</div>
+	{#if children}
+		{@render children()}
+	{/if}
+</article>
+
+<style lang="sass">
+	@use '$lib/styles/fractals' as *
+
+	.pricing-card
+		+surface(surface, m, 16)
+		+stack(m)
+		transition: transform 150ms ease, box-shadow 150ms ease
+
+		&[data-highlighted]
+			+border(all, var(--theme))
+			+shadow(lg)
+</style>
+```
+
+---
+
+## MCP Tools Integration
+
+If the host environment connects to the `fractalstyler2` MCP server, use the available tools:
+* `get_design_tokens`: Query available space, typography, and radius steps.
+* `compile_fractals`: Compile SASS mixin recipes to verify CSS output.
+* `snap_to_tokens`: Snap canvas pixel values to tokens.
+* `validate_recipe`: Lint SASS/Svelte against the golden rules.

package/skills/fractal-styler/references/fractals.md

@@ -0,0 +1,28 @@
+# Fractals Catalog Reference
+
+## Atom Fractals (Single Decisions)
+
+* **Layout Flow**: `+box(x, y)` (flex col), `+row(x, y)` (flex row), `+wrap`, `+grid(cols)`, `+auto-grid(min, gap)`, `+center` (grid center).
+* **Spacing**: `+gap(v)`, `+pad(v)`, `+px(v)`, `+py(v)`, `+mx-auto`, `+my-auto`.
+* **Sizing**: `+w(v)`, `+h(v)`, `+full`, `+square(v)`, `+grow(n)`, `+shrink(n)`, `+min0`.
+* **Surfaces**: `+bg(role)`, `+ink(role)`, `+border(side, color)`, `+radius(v)`, `+shadow(v)`.
+* **Position**: `+relative`, `+absolute(inset)`, `+sticky(top)`, `+fill`.
+* **Type**: `+type(v)`, `+weight(w)`, `+leading(lh)`, `+truncate`, `+clamp-lines(n)`.
+* **Motion**: `+transition(props, dur, ease)`, `+ring(color)`.
+
+## Molecule Fractals (Compositions of Atoms)
+
+* **`+stack($gap: xs, $x: null)`**: Vertical flex column rhythm with uniform gap.
+* **`+cluster($gap: xs, $x: start, $y: center)`**: Wrapping flex row for tag clouds, chips, and button rows.
+* **`+center-column($max: 60ch, $pad: s)`**: Bounded reading column with max-width measure and auto margins.
+* **`+cover($min: 100vh, $pad: s)`**: Full-height container with a vertically centered focal child (`> .center`).
+* **`+frame($ratio: 16 / 9)`**: Fixed aspect-ratio container for media.
+* **`+reel($gap: xs)`**: Horizontal scroll-snap rail.
+* **`+with-sidebar($rail: 240px, $gap: s, $min: 60%)`**: Intrinsic sidebar + fluid main layout.
+* **`+surface($bg: surface, $pad: s, $radius: 12, $elevation: none)`**: The all-in-one material mixin.
+* **`+cols($map, $gap: s)`**: Responsive grid mapped across breakpoints, e.g. `+cols((base: 1, sm: 2, lg: 3), m)`.
+
+## Responsive Utilities
+* `+at(sm | md | lg | xl)`: Mobile-first min-width media query.
+* `+until(sm | md | lg | xl)`: Max-width media query.
+* `+cq`, `+cq-at(width)`, `+cq-until(width)`: Container queries.

package/skills/fractal-styler/references/tokens.md

@@ -0,0 +1,36 @@
+# Design Tokens Reference
+
+## Space Scale (Fluid Utopia)
+| Step | Token Variable | Approximate Px | Clamp Formula |
+| :--- | :--- | :--- | :--- |
+| `3xs` | `--space-3xs` | ~5px | `clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem)` |
+| `2xs` | `--space-2xs` | ~9px | `clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem)` |
+| `xs`  | `--space-xs`  | ~14px | `clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem)` |
+| `s`   | `--space-s`   | ~18px | `clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem)` |
+| `m`   | `--space-m`   | ~27px | `clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem)` |
+| `l`   | `--space-l`   | ~36px | `clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem)` |
+| `xl`  | `--space-xl`  | ~54px | `clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem)` |
+| `2xl` | `--space-2xl` | ~72px | `clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem)` |
+| `3xl` | `--space-3xl` | ~108px | `clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem)` |
+| `s-l` | `--space-s-l` | ~18→40px | `clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem)` |
+
+## Typography Scale
+| Step | Token Variable | Fluid Clamp |
+| :--- | :--- | :--- |
+| `xs`  | `--text-xs`  | `0.75rem` (12px) |
+| `sm`  | `--text-sm`  | `clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem)` |
+| `md`  | `--text-md`  | `clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem)` |
+| `lg`  | `--text-lg`  | `clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem)` |
+| `xl`  | `--text-xl`  | `clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem)` |
+| `2xl` | `--text-2xl` | `clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem)` |
+| `3xl` | `--text-3xl` | `clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem)` |
+| `4xl` | `--text-4xl` | `clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem)` |
+
+## Radius Scale
+`0`, `2`, `4`, `6`, `8`, `12`, `16`, `24`, `full`
+
+## Color & Surface Roles
+* **Surfaces**: `--bg`, `--bg-surface`, `--bg-raised`
+* **Ink**: `--text-primary`, `--text-secondary`, `--text-muted`, `--text-inverse`
+* **Borders**: `--border`, `--border-strong`
+* **Brand**: `--theme`, `--theme-hover`, `--theme-active`, `--ring`