rizzo-css 0.0.81 → 0.0.82

package/scaffold/vue/variants/full/src/views/BlocksIndex.vue

@@ -0,0 +1,111 @@
+<template>
+  <section class="blocks-index__browse">
+    <h1 class="docs__title">Blocks</h1>
+    <p class="blocks-index__browse-desc">
+      Pre-built layouts and patterns using Rizzo components and design tokens. Use them as starting points for dashboards, docs sites, auth screens, and app shells.
+    </p>
+  </section>
+
+  <section>
+    <h2 class="blocks-index__section-label">Featured</h2>
+    <div class="blocks-index__grid">
+      <a
+        v-for="block in blocks"
+        :key="block.href"
+        :href="DOCS_BASE + block.href"
+        class="block-card-link"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Card variant="elevated">
+          <div class="card__body">
+            <h3 style="margin: 0 0 var(--spacing-2) 0;">{{ block.title }}</h3>
+            <p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">{{ block.desc }}</p>
+            <span class="block-card-meta" style="margin-top: var(--spacing-2); font-size: var(--font-size-xs); color: var(--text-dim);">{{ block.meta }}</span>
+          </div>
+        </Card>
+      </a>
+    </div>
+  </section>
+
+  <section>
+    <h2>Scaffold from CLI</h2>
+    <p>When you create a new project or add to existing, choose a <strong>template</strong>: <strong>CSS only</strong>, <strong>Landing</strong>, <strong>Docs</strong>, <strong>Dashboard</strong>, or <strong>Full</strong>. Full clones the entire docs site with home, docs, components, blocks, and themes.</p>
+    <pre><code>npx rizzo-css init
+# → Choose framework (Vanilla, Astro, Svelte, React, Vue)
+# → Choose template: CSS only | Landing | Docs | Dashboard | Full</code></pre>
+  </section>
+</template>
+
+<script setup lang="ts">
+import Card from '@/components/rizzo/Card.vue';
+
+const DOCS_BASE = 'https://rizzo-css.vercel.app';
+
+const blocks = [
+  { href: '/blocks/landing-hero', title: 'Landing hero', desc: 'Marketing hero with headline, subtitle, and primary CTAs. Typography and button tokens.', meta: 'Hero · Buttons · Typography' },
+  { href: '/blocks/pricing', title: 'Pricing cards', desc: 'Three-tier pricing section using Card, Badge, and buttons. Theme-aware.', meta: 'Card · Badge · Buttons' },
+  { href: '/blocks/dashboard-01', title: 'Dashboard', desc: 'App dashboard with sidebar, stat cards, and data table. Uses Dashboard, Card, and Table components.', meta: 'Dashboard · Sidebar · Cards · Table' },
+  { href: '/blocks/docs-layout', title: 'Docs layout', desc: 'Documentation layout with a sidebar nav and main content area. Same pattern as this docs site.', meta: 'Docs Sidebar · Layout' },
+  { href: '/blocks/login', title: 'Login', desc: 'Centered login form on a muted background. Brand link, email/password fields, and footer links.', meta: 'Form · Button · Tokens' },
+  { href: '/blocks/signup', title: 'Sign up', desc: 'Centered sign-up form with name, email, password, and link to sign in. Same tokens as Login.', meta: 'Form · Button · Tokens' },
+];
+</script>
+
+<style scoped>
+.blocks-index__browse {
+  margin-bottom: var(--section-spacing);
+}
+.blocks-index__browse-desc {
+  margin: 0;
+  color: var(--text-dim);
+  font-size: var(--font-size-sm);
+}
+.blocks-index__section-label {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  margin: 0 0 var(--page-header-margin-bottom);
+  color: var(--text);
+}
+.blocks-index__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
+  gap: var(--spacing-6);
+  margin: var(--page-header-margin-bottom) 0;
+}
+.block-card-link {
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  transition: transform var(--transition-base);
+}
+.block-card-link :deep(.card) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.block-card-link :deep(.card .card__body) {
+  flex: 1;
+}
+.block-card-link:hover {
+  transform: translateY(calc(-1 * var(--spacing-0-125)));
+}
+.block-card-link:hover :deep(.card__body h3) {
+  color: var(--accent-fg);
+}
+pre {
+  background: var(--background-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-4);
+  overflow-x: auto;
+  font-size: var(--font-size-sm);
+}
+pre code {
+  background: none;
+  padding: 0;
+}
+</style>

package/scaffold/vue/variants/full/src/views/DocsComponents.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <section class="docs-components-intro">
+      <h1 class="docs__title">Components</h1>
+      <p class="docs-components-intro__tagline">
+        Browse the collection of accessible, themeable components. Same CSS and BEM for Astro, Svelte, Vue, and Vanilla.
+      </p>
+      <p class="docs-components-intro__meta">
+        Each component has live demos and code on the full docs site. Quick jump:
+        <a href="https://rizzo-css.vercel.app/docs/components" target="_blank" rel="noopener noreferrer">Astro</a>
+        ·
+        <a href="https://rizzo-css.vercel.app/docs/svelte/components" target="_blank" rel="noopener noreferrer">Svelte</a>
+        ·
+        <a href="https://rizzo-css.vercel.app/docs/vanilla/components" target="_blank" rel="noopener noreferrer">Vanilla</a>.
+      </p>
+    </section>
+
+    <section v-for="cat in categories" :key="cat.id" class="docs-component-category" :id="cat.id">
+      <h2 class="docs-component-category__title">{{ cat.label }}</h2>
+      <div class="docs-component-grid">
+        <a
+          v-for="item in cat.items"
+          :key="item.href"
+          :href="DOCS_BASE + item.href"
+          class="component-card-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Card variant="elevated">
+            <div class="card__body">
+              <h3 style="margin: 0 0 var(--spacing-2) 0;">{{ item.title }}</h3>
+              <p style="margin: 0; color: var(--text-dim); font-size: var(--font-size-sm);">{{ item.description }}</p>
+            </div>
+          </Card>
+        </a>
+      </div>
+    </section>
+
+    <section>
+      <h2>Component features</h2>
+      <p>All components share: semantic theming, accessibility (keyboard + ARIA), BEM naming, responsive design, and WCAG AA compliance.</p>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getComponentsByCategory } from '@/config/componentCategories';
+import Card from '@/components/rizzo/Card.vue';
+
+const DOCS_BASE = 'https://rizzo-css.vercel.app';
+const categories = getComponentsByCategory();
+</script>
+
+<style scoped>
+.docs-components-intro {
+  margin-bottom: var(--spacing-10);
+}
+.docs-components-intro__tagline {
+  font-size: var(--text-lg);
+  color: var(--text-dim);
+  margin: 0 0 var(--spacing-2);
+  line-height: var(--line-height-relaxed);
+}
+.docs-components-intro__meta {
+  font-size: var(--font-size-sm);
+  color: var(--text-dim);
+  margin: 0;
+}
+.docs-component-category {
+  margin-bottom: var(--spacing-10);
+}
+.docs-component-category:last-of-type {
+  margin-bottom: 0;
+}
+.docs-component-category__title {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  margin: 0 0 var(--spacing-4);
+  color: var(--text);
+}
+.docs-component-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--spacing-70), 1fr));
+  gap: var(--spacing-6);
+  margin: 0;
+}
+.component-card-link {
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  transition: transform var(--transition-base);
+}
+.component-card-link :deep(.card) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.component-card-link :deep(.card .card__body) {
+  flex: 1;
+}
+.component-card-link:hover {
+  transform: translateY(calc(-1 * var(--spacing-0-125)));
+}
+.component-card-link:hover :deep(.card__body h3) {
+  color: var(--accent-fg);
+}
+@media (width <= 640px) {
+  .docs-component-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/scaffold/vue/variants/full/src/views/DocsGettingStarted.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h1 class="docs__title">Getting started</h1>
+    <p>This project was created with the <strong>Full</strong> template. You have the home page, docs overview, components index, blocks, and themes.</p>
+
+    <h2 id="installation">Installation</h2>
+    <p>Rizzo CSS is already set up. The stylesheet is at <code>public/css/rizzo.min.css</code>. Use the navbar to explore <router-link to="/docs">Docs</router-link>, <router-link to="/docs/components">Components</router-link>, <router-link to="/blocks">Blocks</router-link>, and <router-link to="/themes">Themes</router-link>.</p>
+
+    <h2 id="add-component">Add a component</h2>
+    <p>From your project root:</p>
+    <pre><code>npx rizzo-css add &lt;ComponentName&gt;</code></pre>
+    <p>Example: <code>npx rizzo-css add Modal</code> adds the Modal component to <code>src/components/rizzo</code>.</p>
+
+    <h2>Next steps</h2>
+    <ul>
+      <li><router-link to="/docs">Docs overview</router-link></li>
+      <li><router-link to="/docs/components">Components</router-link></li>
+      <li><router-link to="/blocks">Blocks</router-link></li>
+      <li><router-link to="/themes">Themes</router-link></li>
+      <li>Full documentation: <a href="https://rizzo-css.vercel.app/docs/getting-started" target="_blank" rel="noopener noreferrer">rizzo-css.vercel.app</a></li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+:deep(.docs__content) code {
+  background: var(--background-alt);
+  color: var(--accent-fg);
+  padding: var(--spacing-0-125) var(--spacing-0-375);
+  border-radius: var(--radius);
+  font-size: var(--font-size-sm);
+}
+pre {
+  background: var(--background-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-4);
+  overflow-x: auto;
+  margin: var(--spacing-4) 0;
+}
+pre code {
+  padding: 0;
+  background: none;
+}
+</style>

package/scaffold/vue/variants/full/src/views/DocsIndex.vue

@@ -0,0 +1,69 @@
+<template>
+  <section class="docs-overview">
+    <h1 class="docs__title">Docs overview</h1>
+    <p class="docs-overview__intro">
+      Rizzo CSS is a design system built on semantic theming and 14 themes. One CSS codebase, 58 accessible BEM components — for <strong>Vanilla JS</strong>, <strong>Astro</strong>, <strong>Svelte</strong>, <strong>React</strong>, and <strong>Vue</strong>.
+    </p>
+
+    <h2 id="overview" class="docs-overview__h2">Overview</h2>
+    <ul class="docs-overview__list">
+      <li><router-link to="/docs/getting-started">Getting Started</router-link> — Installation, CLI, templates (CSS only | Landing | Docs | Dashboard | Full)</li>
+      <li><router-link to="/docs/components">Components</router-link> — Browse all components by category</li>
+      <li><router-link to="/blocks">Blocks</router-link> — Pre-built layouts and patterns</li>
+      <li><router-link to="/themes">Themes</router-link> — 14 themes, live preview</li>
+    </ul>
+
+    <h2 id="blocks" class="docs-overview__h2">Blocks</h2>
+    <ul class="docs-overview__list">
+      <li><router-link to="/blocks">Blocks overview</router-link></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/landing-hero" target="_blank" rel="noopener noreferrer">Landing hero</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/pricing" target="_blank" rel="noopener noreferrer">Pricing cards</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/dashboard-01" target="_blank" rel="noopener noreferrer">Dashboard with sidebar</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/docs-layout" target="_blank" rel="noopener noreferrer">Docs layout</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/login" target="_blank" rel="noopener noreferrer">Login</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/signup" target="_blank" rel="noopener noreferrer">Sign up</a></li>
+    </ul>
+
+    <p class="docs-overview__footer">
+      <router-link to="/docs/getting-started">Getting Started</router-link>
+      ·
+      <router-link to="/docs/components">Components</router-link>
+      ·
+      <router-link to="/themes">Themes</router-link>
+    </p>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.docs-overview__intro {
+  margin: 0 0 var(--spacing-6);
+  color: var(--text);
+  line-height: var(--line-height-relaxed);
+}
+.docs-overview__h2 {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  margin: var(--spacing-10) 0 var(--spacing-4);
+  color: var(--text);
+}
+.docs-overview__list {
+  margin: 0 0 var(--spacing-6);
+  padding-left: var(--spacing-8);
+}
+.docs-overview__list li {
+  margin-bottom: var(--spacing-2);
+}
+.docs-overview__footer {
+  margin-top: var(--spacing-10);
+  padding-top: var(--spacing-6);
+  border-top: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: var(--font-size-sm);
+}
+.docs-overview__footer a {
+  margin-right: var(--spacing-2);
+}
+</style>

package/scaffold/vue/variants/full/src/views/DocsOverview.vue

@@ -0,0 +1,66 @@
+<template>
+  <section class="docs-overview">
+    <h1 class="docs__title">Docs overview</h1>
+    <p class="docs-overview__intro">
+      Rizzo CSS is a design system built on semantic theming and 14 themes. One CSS codebase, 58 accessible BEM components — for <strong>Vanilla JS</strong>, <strong>Astro</strong>, <strong>Svelte</strong>, <strong>React</strong>, and <strong>Vue</strong>.
+    </p>
+
+    <h2 id="overview" class="docs-overview__h2">Overview</h2>
+    <ul class="docs-overview__list">
+      <li><router-link to="/docs/getting-started">Getting Started</router-link> — Installation, CLI, templates (CSS only | Landing | Docs | Dashboard | Full)</li>
+      <li><router-link to="/docs/components">Components</router-link> — Browse all components by category</li>
+      <li><router-link to="/blocks">Blocks</router-link> — Pre-built layouts and patterns</li>
+      <li><router-link to="/themes">Themes</router-link> — 14 themes, live preview</li>
+    </ul>
+
+    <h2 id="blocks" class="docs-overview__h2">Blocks</h2>
+    <ul class="docs-overview__list">
+      <li><router-link to="/blocks">Blocks overview</router-link></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/landing-hero" target="_blank" rel="noopener noreferrer">Landing hero</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/pricing" target="_blank" rel="noopener noreferrer">Pricing cards</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/dashboard-01" target="_blank" rel="noopener noreferrer">Dashboard with sidebar</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/docs-layout" target="_blank" rel="noopener noreferrer">Docs layout</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/login" target="_blank" rel="noopener noreferrer">Login</a></li>
+      <li><a href="https://rizzo-css.vercel.app/blocks/signup" target="_blank" rel="noopener noreferrer">Sign up</a></li>
+    </ul>
+
+    <p class="docs-overview__footer">
+      <router-link to="/docs/getting-started">Getting Started</router-link>
+      ·
+      <router-link to="/docs/components">Components</router-link>
+      ·
+      <router-link to="/themes">Themes</router-link>
+    </p>
+  </section>
+</template>
+
+<style scoped>
+.docs-overview__intro {
+  margin: 0 0 var(--spacing-6);
+  color: var(--text);
+  line-height: var(--line-height-relaxed);
+}
+.docs-overview__h2 {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  margin: var(--spacing-10) 0 var(--spacing-4);
+  color: var(--text);
+}
+.docs-overview__list {
+  margin: 0 0 var(--spacing-6);
+  padding-left: var(--spacing-8);
+}
+.docs-overview__list li {
+  margin-bottom: var(--spacing-2);
+}
+.docs-overview__footer {
+  margin-top: var(--spacing-10);
+  padding-top: var(--spacing-6);
+  border-top: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: var(--font-size-sm);
+}
+.docs-overview__footer a {
+  margin-right: var(--spacing-2);
+}
+</style>

package/scaffold/vue/variants/full/src/views/Home.vue

@@ -0,0 +1,240 @@
+<template>
+  <main id="main-content" class="home">
+    <div class="home__container">
+      <header class="home__hero">
+        <h1 class="home__title">Rizzo CSS</h1>
+        <p class="home__subtitle">
+          A modern CSS design system with semantic theming, accessibility-first components, and one CLI for Vanilla, Astro, Svelte, React, and Vue. Start here then make it your own.
+        </p>
+        <div class="home__hero-ctas">
+          <router-link to="/docs/getting-started" class="btn btn-primary home__hero-cta">Get Started</router-link>
+          <router-link to="/docs/components" class="btn btn-outline home__hero-cta">View Components</router-link>
+        </div>
+      </header>
+
+      <section class="home__features" aria-labelledby="home-features-heading">
+        <h2 id="home-features-heading" class="home__section-title">Features</h2>
+        <p class="home__features-intro">A complete design system that works across Vanilla, Astro, Svelte, React, and Vue — same CSS, same components, zero lock-in.</p>
+        <div class="home__features-featured">
+          <div class="home__card home__card--featured">
+            <span class="home__card-icon" aria-hidden="true">Themes</span>
+            <h3>14 beautiful themes</h3>
+            <p>7 dark and 7 light with OKLCH for perceptual uniformity. System preference, persistence, and a unique icon per theme.</p>
+          </div>
+          <div class="home__card home__card--featured">
+            <span class="home__card-icon" aria-hidden="true">A11y</span>
+            <h3>Accessibility first</h3>
+            <p>WCAG AA compliant with full keyboard navigation, ARIA, focus management, and screen reader support.</p>
+          </div>
+          <div class="home__card home__card--featured">
+            <span class="home__card-icon" aria-hidden="true">Components</span>
+            <h3>All components</h3>
+            <p>Navbar, Settings, Theme Switcher, Font Switcher, Modal, Dropdown, Tabs, Forms, and more — all accessible and themeable.</p>
+          </div>
+        </div>
+        <h3 class="home__features-supporting-label">And more</h3>
+        <div class="home__grid home__grid--supporting">
+          <div class="home__card home__card--supporting">
+            <h3>Semantic variables</h3>
+            <p>CSS variables that adapt to themes. No hardcoded colors; override once, update everywhere.</p>
+          </div>
+          <div class="home__card home__card--supporting">
+            <h3>PostCSS powered</h3>
+            <p>Imports, autoprefixing, and production minification. Fits into any build pipeline.</p>
+          </div>
+          <div class="home__card home__card--supporting">
+            <h3>Typography & spacing</h3>
+            <p>Scaling font sizes, weights, line heights, and a consistent spacing scale (0–24).</p>
+          </div>
+          <div class="home__card home__card--supporting">
+            <h3>Responsive & utilities</h3>
+            <p>Mobile-first breakpoints and utility classes for layout, display, and flexbox.</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="home__add-command" aria-labelledby="home-add-command-heading">
+        <h2 id="home-add-command-heading" class="home__section-title">Add a component</h2>
+        <p class="home__features-intro" style="margin-bottom: var(--spacing-4);">Add any component from the CLI:</p>
+        <div class="home__add-command-block">
+          <pre><code>npx rizzo-css add &lt;ComponentName&gt;</code></pre>
+          <CopyToClipboard
+            :value="ADD_COMMAND"
+            icon-only
+            button-label="Copy"
+            format="command"
+            label="Copy command"
+            class="home__add-command-copy"
+          />
+        </div>
+      </section>
+
+      <section class="home__docs">
+        <h2 class="home__section-title">Documentation</h2>
+        <div class="home__docs-grid">
+          <router-link to="/docs/getting-started" class="home__doc-card">
+            <h3>Getting Started</h3>
+            <p>Installation, project structure, and quick start guide</p>
+          </router-link>
+          <router-link to="/docs/components" class="home__doc-card">
+            <h3>Components</h3>
+            <p>Component library with usage examples and live demos</p>
+          </router-link>
+          <router-link to="/themes" class="home__doc-card">
+            <h3>Themes</h3>
+            <p>Theme system, 14 themes, and live preview</p>
+          </router-link>
+          <router-link to="/blocks" class="home__doc-card">
+            <h3>Blocks</h3>
+            <p>Pre-built layouts: landing, pricing, dashboard, docs, login, signup</p>
+          </router-link>
+          <router-link to="/docs" class="home__doc-card">
+            <h3>Docs Overview</h3>
+            <p>Condensed index of documentation and links</p>
+          </router-link>
+          <a href="https://rizzo-css.vercel.app/docs/theming" class="home__doc-card" target="_blank" rel="noopener noreferrer">
+            <h3>Theming (full docs)</h3>
+            <p>Custom themes, persistence, color format — on main site</p>
+            <span class="sr-only"> (opens in new tab)</span>
+          </a>
+        </div>
+      </section>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import CopyToClipboard from '@/components/rizzo/CopyToClipboard.vue';
+
+const ADD_COMMAND = 'npx rizzo-css add <ComponentName>';
+</script>
+
+<style scoped>
+.home__container {
+  width: 100%;
+  max-width: var(--container-default);
+  margin: 0 auto;
+  padding: 0 var(--content-padding-x);
+}
+.home__hero {
+  text-align: center;
+  padding: var(--spacing-10) 0;
+}
+.home__title {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text);
+  margin: 0 0 var(--spacing-4);
+  line-height: var(--line-height-tight);
+}
+.home__subtitle {
+  font-size: var(--font-size-lg);
+  color: var(--text-dim);
+  margin: 0 auto var(--spacing-6);
+  max-width: 42ch;
+  line-height: var(--line-height-relaxed);
+}
+.home__hero-ctas {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-4);
+  justify-content: center;
+}
+.home__hero-cta {
+  text-decoration: none;
+}
+.home__section-title {
+  font-size: var(--font-size-2xl);
+  font-weight: 600;
+  margin: var(--spacing-10) 0 var(--spacing-4);
+  color: var(--text);
+}
+.home__features-intro {
+  margin: 0 0 var(--spacing-6);
+  color: var(--text-dim);
+  line-height: var(--line-height-relaxed);
+}
+.home__features-featured,
+.home__grid--supporting {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  gap: var(--spacing-6);
+  margin: var(--spacing-6) 0;
+}
+.home__card {
+  padding: var(--spacing-6);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: var(--background-alt);
+}
+.home__card h3 {
+  margin: 0 0 var(--spacing-2);
+  font-size: var(--font-size-lg);
+  color: var(--text);
+}
+.home__card p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-dim);
+  line-height: var(--line-height-relaxed);
+}
+.home__card-icon {
+  display: block;
+  font-size: var(--font-size-xs);
+  color: var(--accent-fg);
+  margin-bottom: var(--spacing-2);
+}
+.home__features-supporting-label {
+  font-size: var(--font-size-lg);
+  margin: var(--spacing-8) 0 var(--spacing-4);
+  color: var(--text);
+}
+.home__add-command-block {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+}
+.home__add-command-block pre {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  background: var(--background-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-4);
+  overflow-x: auto;
+  font-size: var(--font-size-sm);
+}
+.home__docs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
+  gap: var(--spacing-4);
+  margin-top: var(--spacing-6);
+}
+.home__doc-card {
+  display: block;
+  padding: var(--spacing-6);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: var(--background-alt);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s, transform 0.15s;
+}
+.home__doc-card:hover {
+  border-color: var(--accent-fg);
+  transform: translateY(-2px);
+}
+.home__doc-card h3 {
+  margin: 0 0 var(--spacing-2);
+  font-size: var(--font-size-lg);
+  color: var(--text);
+}
+.home__doc-card p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-dim);
+  line-height: var(--line-height-relaxed);
+}
+</style>