ccg-workflow 1.8.2 → 1.8.4

package/templates/skills/domains/devops/testing.md

@@ -0,0 +1,283 @@
+---
+name: testing
+description: 软件测试。单元测试、集成测试、TDD、测试框架。当用户提到测试、单元测试、pytest、Jest、mock、TDD时使用。
+---
+
+# 🔧 炼器秘典 · 软件测试
+
+
+## 测试金字塔
+
+```
+        /\
+       /  \     E2E 测试 (少)
+      /----\
+     /      \   集成测试 (中)
+    /--------\
+   /          \ 单元测试 (多)
+  --------------
+```
+
+## Python (pytest)
+
+```python
+import pytest
+from myapp import calculate, UserService
+
+# 基础测试
+def test_add():
+    assert calculate.add(1, 2) == 3
+
+# 参数化
+@pytest.mark.parametrize("a,b,expected", [
+    (1, 2, 3),
+    (0, 0, 0),
+    (-1, 1, 0),
+])
+def test_add_params(a, b, expected):
+    assert calculate.add(a, b) == expected
+
+# Fixture
+@pytest.fixture
+def user_service():
+    service = UserService()
+    yield service
+    service.cleanup()
+
+def test_create_user(user_service):
+    user = user_service.create("test")
+    assert user.name == "test"
+
+# Mock
+from unittest.mock import Mock, patch
+
+@patch('myapp.requests.get')
+def test_fetch(mock_get):
+    mock_get.return_value.json.return_value = {"id": 1}
+    result = fetch_user(1)
+    assert result["id"] == 1
+
+# 异步测试
+@pytest.mark.asyncio
+async def test_async_fetch():
+    result = await async_fetch()
+    assert result is not None
+```
+
+### 运行命令
+```bash
+pytest                      # 运行所有
+pytest test_file.py         # 指定文件
+pytest -k "test_add"        # 匹配名称
+pytest -v                   # 详细输出
+pytest --cov=myapp          # 覆盖率
+pytest -x                   # 失败即停
+```
+
+## JavaScript (Jest/Vitest)
+
+```javascript
+import { describe, it, expect, vi } from 'vitest';
+
+// 基础测试
+describe('add', () => {
+  it('should add two numbers', () => {
+    expect(add(1, 2)).toBe(3);
+  });
+
+  it.each([
+    [1, 2, 3],
+    [0, 0, 0],
+    [-1, 1, 0],
+  ])('add(%i, %i) = %i', (a, b, expected) => {
+    expect(add(a, b)).toBe(expected);
+  });
+});
+
+// Mock
+vi.mock('./api', () => ({
+  getUser: vi.fn().mockResolvedValue({ id: 1, name: 'test' })
+}));
+
+it('should fetch user', async () => {
+  const user = await fetchUser(1);
+  expect(user.name).toBe('test');
+});
+
+// Spy
+const spy = vi.spyOn(console, 'log');
+doSomething();
+expect(spy).toHaveBeenCalledWith('message');
+```
+
+## Go (testing)
+
+```go
+package main
+
+import (
+    "testing"
+    "github.com/stretchr/testify/assert"
+)
+
+func TestAdd(t *testing.T) {
+    result := Add(1, 2)
+    assert.Equal(t, 3, result)
+}
+
+// 表驱动测试
+func TestAddTable(t *testing.T) {
+    tests := []struct {
+        name     string
+        a, b     int
+        expected int
+    }{
+        {"positive", 1, 2, 3},
+        {"zero", 0, 0, 0},
+        {"negative", -1, 1, 0},
+    }
+
+    for _, tt := range tests {
+        t.Run(tt.name, func(t *testing.T) {
+            assert.Equal(t, tt.expected, Add(tt.a, tt.b))
+        })
+    }
+}
+
+// Benchmark
+func BenchmarkAdd(b *testing.B) {
+    for i := 0; i < b.N; i++ {
+        Add(1, 2)
+    }
+}
+```
+
+## 测试原则
+
+```yaml
+FIRST:
+  - Fast: 快速执行
+  - Independent: 相互独立
+  - Repeatable: 可重复
+  - Self-validating: 自验证
+  - Timely: 及时编写
+
+AAA:
+  - Arrange: 准备数据
+  - Act: 执行操作
+  - Assert: 验证结果
+
+原则:
+  - 每个测试只验证一件事
+  - 测试边界条件
+  - 测试异常情况
+  - 避免测试实现细节
+```
+
+## TDD 流程
+
+```
+红 → 绿 → 重构
+
+1. 红: 写一个失败的测试
+2. 绿: 写最少代码让测试通过
+3. 重构: 优化代码，保持测试通过
+```
+
+---
+
+## 测试策略（源自 testing-strategy）
+
+### 测试金字塔比例
+
+| 层级 | 占比 | 执行时间 | 成本 |
+|------|------|----------|------|
+| 单元测试 | 70% | <1s | 低 |
+| 集成测试 | 20% | 1-10s | 中 |
+| E2E测试 | 10% | 10s-5m | 高 |
+
+### 测试左移 Checklist
+
+```yaml
+需求阶段: 可测试性评审、验收标准定义、测试用例设计
+开发阶段: TDD、单元测试同步编写、代码审查包含测试
+提交阶段: Pre-commit Hook、本地测试必过、静态分析
+CI阶段: 自动化测试、覆盖率门禁、性能基准测试
+```
+
+### 契约测试要点
+
+- 消费者驱动契约 (CDC)：Consumer 定义期望 → Provider 验证契约
+- 工具：Pact（多语言）、Spring Cloud Contract（Java）
+- 核心：Provider API <-> Contract <-> Consumer，双方独立验证
+
+### 覆盖率策略
+
+```yaml
+类型: 行覆盖率、分支覆盖率、函数覆盖率、语句覆盖率
+门禁: 全局 ≥80%，核心模块 ≥90%
+排除: tests/、migrations/、__init__.py、config 文件
+```
+
+### 变异测试
+
+- 修改源码（变异体）验证测试是否能捕获
+- 工具：Stryker (JS)、Pitest (Java)
+- 阈值：high 80% / low 60% / break 50%
+
+### 测试最佳实践
+
+- AAA 模式：Arrange → Act → Assert
+- 命名：`should [预期行为] when [条件]`
+- 单一职责：每个测试只验证一件事
+- 数据隔离：Fixture/Factory 模式，每测试独立实例
+- 并行执行：Jest `maxWorkers: '50%'`、pytest `-n auto`
+
+---
+
+## E2E 测试（源自 e2e-testing）
+
+### Playwright vs Cypress
+
+| 特性 | Playwright | Cypress |
+|------|-----------|---------|
+| 多浏览器 | Chromium/Firefox/WebKit | Chromium/Firefox/Edge |
+| 多标签页/iframe | 原生支持 | 有限 |
+| 并行执行 | 原生支持 | 需付费 |
+| 调试体验 | 一般 | 优秀 |
+
+### 选择器优先级
+
+```
+1. data-testid (推荐)
+2. role + accessible name
+3. 稳定的 class/id
+4. 文本内容 (谨慎)
+5. CSS/XPath (避免)
+```
+
+### E2E Checklist
+
+```yaml
+架构:
+  - 页面对象模式 (POM) 封装页面操作
+  - 测试独立性：通过 API 准备数据，不依赖其他测试
+  - 智能等待：waitForSelector/waitForResponse，禁止 waitForTimeout
+
+网络:
+  - Mock API：page.route() / cy.intercept() 隔离后端
+  - 等待响应：waitForResponse 确认数据加载
+
+可视化回归:
+  - Playwright: toHaveScreenshot() + mask 动态内容
+  - Percy/Chromatic: 云端截图对比
+
+认证:
+  - Playwright: storageState 复用登录态
+  - Cypress: cy.session() 缓存会话
+
+CI集成:
+  - retries: CI 环境 2 次重试
+  - artifacts: 失败时保存截图/视频/trace
+```
+

package/templates/skills/domains/frontend-design/SKILL.md

@@ -0,0 +1,242 @@
+---
+name: frontend-design
+description: "Frontend design skill fused from Impeccable + custom extensions. Covers design philosophy, anti-AI-slop patterns, typography, color (OKLCH), spatial design, motion, interaction, responsive, UX writing, state management, engineering, and 4 style variants. Includes 20 command skills for audit/critique/polish/animate/etc."
+license: "Apache 2.0 (Impeccable) + MIT (custom extensions)"
+user-invocable: true
+disable-model-invocation: false
+---
+
+# Frontend Design (Impeccable Fusion Edition)
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. It fuses [Impeccable](https://github.com/pbakaus/impeccable) design philosophy with extended knowledge on state management, engineering, and design style systems.
+
+---
+
+## Context Gathering Protocol
+
+Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work.
+
+**Required context** — every design skill needs at minimum:
+- **Target audience**: Who uses this product and in what context?
+- **Use cases**: What jobs are they trying to get done?
+- **Brand personality/tone**: How should the interface feel?
+
+**Gathering order:**
+1. **Check current instructions (instant)**: If your loaded instructions already contain a **Design Context** section, proceed immediately.
+2. **Check .impeccable.md (fast)**: If not in instructions, read `.impeccable.md` from the project root. If it exists and contains the required context, proceed.
+3. **Run /teach-impeccable (REQUIRED)**: If neither source has context, you MUST run `/teach-impeccable` NOW before doing anything else. Do NOT skip this step. Do NOT attempt to infer context from the codebase instead.
+
+---
+
+## Design Direction
+
+Commit to a BOLD aesthetic direction:
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
+
+---
+
+## Frontend Aesthetics Guidelines
+
+### Typography
+> *Consult [typography reference](reference/typography.md) for scales, pairing, and loading strategies.*
+
+Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
+
+**DO**: Use a modular type scale with fluid sizing (clamp) for display text; fixed rem scales for app UIs
+**DO**: Vary font weights and sizes to create clear visual hierarchy
+**DON'T**: Use overused fonts — Inter, Roboto, Arial, Open Sans, system defaults
+**DON'T**: Use monospace typography as lazy shorthand for "technical/developer" vibes
+**DON'T**: Put large icons with rounded corners above every heading — they rarely add value
+
+### Color & Theme
+> *Consult [color reference](reference/color-and-contrast.md) for OKLCH, palettes, and dark mode.*
+
+Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+
+**DO**: Use OKLCH (not HSL) for perceptually uniform, maintainable palettes
+**DO**: Tint your neutrals toward your brand hue — even a subtle hint creates subconscious cohesion
+**DON'T**: Use gray text on colored backgrounds — use a shade of the background color instead
+**DON'T**: Use pure black (#000) or pure white (#fff) — always tint
+**DON'T**: Use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds
+**DON'T**: Use gradient text for "impact" — it's decorative rather than meaningful
+**DON'T**: Default to dark mode with glowing accents
+
+### Layout & Space
+> *Consult [spatial reference](reference/spatial-design.md) for grids, rhythm, and container queries.*
+
+**DO**: Create visual rhythm through varied spacing — tight groupings, generous separations
+**DO**: Use fluid spacing with clamp() that breathes on larger screens
+**DO**: Use asymmetry and unexpected compositions; break the grid intentionally
+**DON'T**: Wrap everything in cards — not everything needs a container
+**DON'T**: Nest cards inside cards — flatten the hierarchy
+**DON'T**: Use identical card grids — same-sized cards with icon + heading + text, repeated endlessly
+**DON'T**: Center everything — left-aligned text with asymmetric layouts feels more designed
+**DON'T**: Use the same spacing everywhere — without rhythm, layouts feel monotonous
+
+### Visual Details
+**DO**: Use intentional, purposeful decorative elements that reinforce brand
+**DON'T**: Use glassmorphism everywhere — blur effects used decoratively rather than purposefully
+**DON'T**: Use rounded elements with thick colored border on one side — a lazy accent
+**DON'T**: Use sparklines as decoration — tiny charts that convey nothing meaningful
+**DON'T**: Use rounded rectangles with generic drop shadows — safe, forgettable
+**DON'T**: Use modals unless there's truly no better alternative
+
+### Motion
+> *Consult [motion reference](reference/motion-design.md) for timing, easing, and reduced motion.*
+
+**DO**: Use motion to convey state changes — entrances, exits, feedback
+**DO**: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration
+**DO**: For height animations, use grid-template-rows transitions
+**DON'T**: Animate layout properties (width, height, padding, margin) — use transform and opacity only
+**DON'T**: Use bounce or elastic easing — they feel dated and tacky
+
+### Interaction
+> *Consult [interaction reference](reference/interaction-design.md) for forms, focus, and loading patterns.*
+
+**DO**: Use progressive disclosure — start simple, reveal sophistication through interaction
+**DO**: Design empty states that teach the interface, not just say "nothing here"
+**DO**: Make every interactive surface feel intentional and responsive
+**DON'T**: Repeat the same information — redundant headers, intros that restate the heading
+**DON'T**: Make every button primary — hierarchy matters
+
+### Responsive
+> *Consult [responsive reference](reference/responsive-design.md) for mobile-first, fluid design, and container queries.*
+
+**DO**: Use container queries (@container) for component-level responsiveness
+**DO**: Adapt the interface for different contexts — don't just shrink it
+**DON'T**: Hide critical functionality on mobile — adapt, don't amputate
+
+### UX Writing
+> *Consult [ux-writing reference](reference/ux-writing.md) for labels, errors, and empty states.*
+
+**DO**: Make every word earn its place
+**DON'T**: Repeat information users can already see
+
+---
+
+## The AI Slop Test
+
+**Critical quality check**: If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
+
+A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
+
+Review the DON'T guidelines above — they are the fingerprints of AI-generated work from 2024-2025.
+
+---
+
+## Reference Library (Impeccable)
+
+Deep-dive reference documents for each design dimension:
+
+| Reference | Covers |
+|-----------|--------|
+| [typography](reference/typography.md) | Type systems, font pairing, modular scales, OpenType, web font loading |
+| [color-and-contrast](reference/color-and-contrast.md) | OKLCH, tinted neutrals, dark mode, accessibility, 60-30-10 |
+| [spatial-design](reference/spatial-design.md) | 4pt spacing, grids, visual hierarchy, container queries, optical adjustments |
+| [motion-design](reference/motion-design.md) | 100/300/500 rule, easing curves, stagger, reduced motion, perceived performance |
+| [interaction-design](reference/interaction-design.md) | 8 states, focus rings, Popover API, CSS Anchor, modals, keyboard nav |
+| [responsive-design](reference/responsive-design.md) | Content-driven breakpoints, pointer/hover queries, safe areas, srcset |
+| [ux-writing](reference/ux-writing.md) | Button labels, error formulas, empty states, voice vs tone, i18n |
+
+## Extended Knowledge (Original)
+
+| Topic | Document | Covers |
+|-------|----------|--------|
+| UI Aesthetics | [ui-aesthetics.md](ui-aesthetics.md) | HSL color tokens, 8px grid CSS snippets, shadow scales, dark mode CSS |
+| Component Patterns | [component-patterns.md](component-patterns.md) | CSS Grid/Flexbox layouts, responsive nav, glass card, Framer Motion |
+| UX Principles | [ux-principles.md](ux-principles.md) | Nielsen 10 heuristics, WCAG, ARIA, keyboard, loading patterns |
+| State Management | [state-management.md](state-management.md) | Redux/Zustand/Jotai/Recoil/Context — decision tree + code templates |
+| Frontend Engineering | [engineering.md](engineering.md) | Web Vitals, code splitting, virtual scroll, Vitest/Playwright, Vite/Webpack |
+
+## Design Style Systems
+
+Specific style variant specs with CSS tokens and component patterns:
+
+| Style | Document | Aesthetic |
+|-------|----------|-----------|
+| Claymorphism | [claymorphism/SKILL.md](claymorphism/SKILL.md) | Soft clay, large radii, dual inner shadows, offset outer shadows |
+| Glassmorphism | [glassmorphism/SKILL.md](glassmorphism/SKILL.md) | Frosted glass, backdrop-filter, translucency, blur layers |
+| Neubrutalism | [neubrutalism/SKILL.md](neubrutalism/SKILL.md) | Thick borders, offset solid shadows, high saturation, minimal radius |
+| Liquid Glass | [liquid-glass/SKILL.md](liquid-glass/SKILL.md) | Apple-style translucent depth, spring animations, ambient response |
+
+---
+
+## Command System (20 Impeccable Commands)
+
+All commands are in `~/.claude/skills/ccg/impeccable/`. Each invokes this skill's guidelines first.
+
+### Quality & Audit
+| Command | What it does |
+|---------|------------|
+| `/audit` | Technical quality checks (a11y, performance, responsive, theming, anti-patterns) — scored 0-20 |
+| `/critique` | UX design review with Nielsen heuristics scoring (0-40), persona testing, cognitive load |
+| `/teach-impeccable` | One-time setup: gather design context, save to .impeccable.md |
+
+### Fix & Align
+| Command | What it does |
+|---------|------------|
+| `/normalize` | Align with design system standards |
+| `/polish` | Final pass before shipping — 20-item checklist |
+| `/distill` | Strip to essence, remove unnecessary complexity |
+| `/clarify` | Improve unclear UX copy, error messages, labels |
+| `/optimize` | Performance improvements (CWV, bundle, rendering) |
+| `/harden` | Error handling, i18n, text overflow, edge cases |
+
+### Style & Expression
+| Command | What it does |
+|---------|------------|
+| `/animate` | Add purposeful motion and micro-interactions |
+| `/colorize` | Introduce strategic color to monochromatic designs |
+| `/bolder` | Amplify boring designs with distinctive impact |
+| `/quieter` | Tone down overly bold designs to refined sophistication |
+| `/delight` | Add moments of joy, personality, and surprise |
+
+### Structure & Components
+| Command | What it does |
+|---------|------------|
+| `/extract` | Pull into reusable components and design tokens |
+| `/adapt` | Adapt for different devices and contexts |
+| `/onboard` | Design onboarding flows and empty states |
+| `/typeset` | Fix font choices, hierarchy, sizing, readability |
+| `/arrange` | Fix layout, spacing, visual rhythm |
+| `/overdrive` | Technically extraordinary effects (shaders, springs, scroll-driven) |
+
+### Combining Commands
+```
+/audit /normalize /polish blog       # Full workflow: audit -> fix -> polish
+/critique /harden checkout           # UX review + add error handling
+/audit                               # Find issues first
+/normalize                           # Then fix inconsistencies
+/polish                              # Final cleanup
+```
+
+---
+
+## Implementation Principles
+
+Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations.
+
+---
+
+## Use Cases
+
+- Design system establishment
+- Component library development
+- UI/UX audit and review (`/audit`, `/critique`)
+- Accessibility improvement
+- Responsive layout design (`/adapt`)
+- Interaction and animation design (`/animate`, `/delight`)
+- Style variant selection (Claymorphism / Glassmorphism / Neubrutalism / Liquid Glass)
+- Performance optimization (`/optimize`)
+- Pre-launch polish (`/polish`)
+- Copy improvement (`/clarify`)
+- Production hardening (`/harden`)
+- Typography refinement (`/typeset`)
+- Layout improvement (`/arrange`)

package/templates/skills/domains/frontend-design/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Frontend Design"
+  short_description: "前端设计美学秘典"
+  default_prompt: "Read the skill at ~/.claude/skills/ccg/domains/frontend-design/SKILL.md and use it as the authoritative playbook."

package/templates/skills/domains/frontend-design/claymorphism/SKILL.md

@@ -0,0 +1,119 @@
+---
+name: claymorphism
+description: Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows.
+license: MIT
+user-invocable: false
+disable-model-invocation: false
+---
+
+# Claymorphism Design Spec
+
+## 3 Core Elements
+
+1. **Large Radius** — Generous `border-radius` (20–50px) for a puffy, inflated look
+2. **Dual Inner Shadows** — Light inset from top-left + dark inset from bottom-right to simulate 3D clay surface
+3. **Offset Outer Shadow** — Directional `box-shadow` offset (not centered) to ground the element
+
+## CSS Tokens
+
+Reference: [references/tokens.css](references/tokens.css)
+
+```css
+@import 'references/tokens.css';
+
+.clay-card {
+  background: var(--clay-bg-card);
+  border-radius: var(--clay-radius-lg);
+  box-shadow: var(--clay-shadow);
+  color: var(--clay-text);
+}
+```
+
+## Component Examples
+
+### Card
+```css
+.clay-card {
+  background: var(--clay-bg-card);
+  border-radius: var(--clay-radius-lg);
+  box-shadow: var(--clay-shadow);
+  padding: 1.5rem;
+  color: var(--clay-text);
+}
+```
+
+### Button
+```css
+.clay-btn {
+  background: var(--clay-bg-button);
+  border: none;
+  border-radius: var(--clay-radius-pill);
+  box-shadow: var(--clay-shadow);
+  padding: 0.75rem 1.5rem;
+  color: var(--clay-text);
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+.clay-btn:hover {
+  box-shadow: var(--clay-shadow-elevated);
+}
+.clay-btn:active {
+  box-shadow: var(--clay-shadow-pressed);
+}
+```
+
+### Input
+```css
+.clay-input {
+  background: var(--clay-bg);
+  border: none;
+  border-radius: var(--clay-radius);
+  box-shadow: var(--clay-shadow-pressed);
+  padding: 0.75rem 1rem;
+  color: var(--clay-text);
+}
+.clay-input:focus {
+  outline: 2px solid var(--clay-accent);
+  outline-offset: 2px;
+}
+```
+
+### Toggle
+```css
+.clay-toggle {
+  width: 56px;
+  height: 30px;
+  background: var(--clay-bg-card);
+  border-radius: var(--clay-radius-pill);
+  box-shadow: var(--clay-shadow-pressed);
+}
+.clay-toggle-knob {
+  width: 24px;
+  height: 24px;
+  background: var(--clay-bg);
+  border-radius: 50%;
+  box-shadow: var(--clay-shadow);
+  transition: transform 0.2s;
+}
+```
+
+## Dark Mode Notes
+
+- Dark mode reduces inner highlight intensity (`rgba(255,255,255,0.05)` vs `0.6`) to avoid glowing artifacts
+- Outer shadow opacity increases to maintain depth on dark backgrounds
+- Background colors shift to warm dark tones — avoid pure black to preserve the clay feel
+- All dark tokens are defined in `[data-theme="dark"]` in `tokens.css`
+
+## Accessibility Notes
+
+- Ensure **contrast ratio ≥ 4.5:1** for text — clay backgrounds are muted, verify against `--clay-text`
+- Provide visible `:focus` outlines since clay shadows alone don't indicate focus
+- Use `prefers-contrast: more` to flatten shadows and increase text contrast
+
+```css
+@media (prefers-contrast: more) {
+  .clay-card {
+    box-shadow: 0 0 0 2px var(--clay-text);
+  }
+}
+```

package/templates/skills/domains/frontend-design/claymorphism/references/tokens.css

@@ -0,0 +1,52 @@
+:root {
+  /* Backgrounds — soft, muted pastels */
+  --clay-bg: #f0e6db;
+  --clay-bg-card: #e8ddd4;
+  --clay-bg-button: #d4c4b0;
+  --clay-accent: #c4a882;
+
+  /* Radius — large, rounded, puffy */
+  --clay-radius: 20px;
+  --clay-radius-lg: 32px;
+  --clay-radius-pill: 50px;
+
+  /* Shadows — dual inner + offset outer */
+  --clay-shadow:
+    8px 8px 16px rgba(0, 0, 0, 0.12),
+    inset -4px -4px 8px rgba(0, 0, 0, 0.08),
+    inset 4px 4px 8px rgba(255, 255, 255, 0.6);
+  --clay-shadow-elevated:
+    12px 12px 24px rgba(0, 0, 0, 0.15),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.1),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.7);
+  --clay-shadow-pressed:
+    2px 2px 6px rgba(0, 0, 0, 0.1),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.12),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.5);
+
+  /* Text */
+  --clay-text: #4a3f35;
+  --clay-text-muted: #8a7e72;
+}
+
+/* Dark mode */
+[data-theme="dark"] {
+  --clay-bg: #2a2520;
+  --clay-bg-card: #352f28;
+  --clay-bg-button: #443c33;
+  --clay-accent: #6b5d4f;
+  --clay-shadow:
+    8px 8px 16px rgba(0, 0, 0, 0.35),
+    inset -4px -4px 8px rgba(0, 0, 0, 0.25),
+    inset 4px 4px 8px rgba(255, 255, 255, 0.05);
+  --clay-shadow-elevated:
+    12px 12px 24px rgba(0, 0, 0, 0.4),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.3),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.06);
+  --clay-shadow-pressed:
+    2px 2px 6px rgba(0, 0, 0, 0.3),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.35),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.04);
+  --clay-text: #d4c8bc;
+  --clay-text-muted: #8a7e72;
+}