# Organo — Style Reference
> 基于已观察 B2C 模式改编的虚构生鲜市集店面。

**Theme:** 浅色电商

这是一份原创、可直接实现的 B2C 店面改编规范。它定义虚构 Verdant Basket 演示所需的无障碍响应式行为、视觉 token 与组件契约；全部商品、文案和优惠均为虚构内容。请保留购物模式：类别发现、商品货架、收藏与本地购物袋。

## Tokens — Colors

| 名称 | 值 | Token | 作用 |
|---|---|---|---|
| 画布 | `#ffffff` | `--color-canvas` | 阅读与卡片表面 |
| 柔和市集色 | `#f7f8f4` | `--color-surface` | 商品单元格与 Hero 外层画布 |
| 墨色 | `#333333` | `--color-ink` | 浅色表面上的无障碍主文本 |
| 弱化文本 | `#66706a` | `--color-muted` | 次级文案 |
| 市集青柠 | `#85c32d` | `--color-lime` | B2C 主操作与已选标签 |
| 深青柠 | `#4d790c` | `--color-lime-dark` | 无障碍文字/链接与悬停处理 |
| 青柠浅色 | `#edf6df` | `--color-lime-tint` | 类别与订阅区域 |
| 夜色页脚 | `#1f2125` | `--color-footer` | 页脚与深色 Hero |
| 页脚弱化色 | `#cfd2d0` | `--color-footer-muted` | 夜色表面上的辅助文本 |
| 边界 | `#dce1da` | `--color-border` | 仅用于装饰性卡片边缘和分隔线 |
| 控件边界 | `#6f7871` | `--color-control-border` | 输入、搜索、筛选、收藏、数量与次级按钮边界；相对画布、柔和市集色和青柠浅色均至少 3:1 |
| 错误 | `#b42318` | `--color-error` | 错误与无货状态 |
| 错误浅色 | `#fff1f0` | `--color-error-bg` | 无效字段背景 |
| 成功 | `#1f6b35` | `--color-success` | 本地确认文本 |
| 控件墨色 | `#17200d` | `--color-action-ink` | 青柠标签与深色导航文字 |
| 深色类别 | `#2c351f` | `--color-category-dark` | 类别入口对比表面 |
| 深色焦点 | `#d7ff93` | `--color-focus-on-dark` | 深色 Hero/页脚焦点外框；相对夜色超过 3:1 |

在青柠色上使用深色文字，在深色 Hero/页脚上使用白色文字。不可在青柠色上使用白色正文，也不可使用对比度不足的浅灰正文。

## Tokens — Typography

### Inter — 展示/界面字体 · `--font-heading`
- **字重：** 600、700；用于标题和购物控件。
- **尺寸：** 控件/卡片为 14、18px；区块为 32px；Hero 默认值为 52px。手机 Hero 的 36px 由响应式 `:root` 覆盖单独声明。
- **角色：** 稳健、紧凑的零售层级。

### Roboto — 正文字体 · `--font-body`
- **字重：** 400、500；用于商品元数据、段落和字段文字。
- **尺寸：** 12、14、16px；正文行高 1.6。

### Type Scale

| 角色 | 字体 | 字重 | 尺寸 | 行高 | Token |
|---|---|---:|---:|---:|---|
| 说明文字 | Roboto | 400 | 12px | 1.4 | `--text-caption` |
| 标签 | Inter | 600 | 14px | 1.2 | `--text-label` |
| 正文 | Roboto | 400 | 16px | 1.6 | `--text-body` |
| 卡片 | Inter | 700 | 18px | 1.3 | `--text-card` |
| 区块 | Inter | 700 | 32px | 1.2 | `--text-section` |
| Hero | Inter | 700 | 52px | 1.12 | `--text-hero` |

## Tokens — Spacing & Shapes

内容最大宽度为 1200px；桌面端左右留白 24px，手机端 16px。区块上下内边距为桌面端 80px、手机端 60px。卡片使用 10px 圆角；操作按钮、搜索和数量控件使用 50px/药丸圆角。这种圆润的零售语言是有意的，不可替换为方角工业界面。

### Spacing Scale

| 数值 | Token | 用途 |
|---:|---|---|
| 8px | `--space-1` | 紧凑间隔 |
| 16px | `--space-2` | 卡片内边距 |
| 24px | `--space-3` | 网格间距 |
| 32px | `--space-4` | 组件分隔 |
| 48px | `--space-5` | 面板内边距 |
| 80px | `--space-6` | 桌面区块 |

### Border Radius

| 元素 | 数值 | Token |
|---|---:|---|
| 商品 / 推广 / 对话框卡片 | 10px | `--radius-card` |
| 搜索、按钮、数量、控件 | 999px | `--radius-pill` |
| Hero 框架 | 10px | `--radius-card` |

### Layout

`.site-header` 使用带深色无障碍标签的青柠类别条；其后是在常规画布内、有边界的深色 Hero，而非全宽 B2B 横幅。桌面端使用 1200px 容器、四列货架和六个圆形类别。390px 时使用 16px 留白、两列货架和自动换行的类别；不得隐藏任何类别。

## Components

### 页头、类别导航与搜索

使用包含 `.utility-bar`、`.header-main`、类别 `.category-nav` 的 `.site-header`；`.search-form` 必须包含真实 `<label for>` 和输入框；仅图标 `button` 必须具有可访问名称。使用 `.sr-only` 视觉隐藏该标签或礼貌 live region，且不得使用 `hidden`，以保留对辅助技术的可访问性。低于 1024px 时，搜索表单独占第二行全宽，输入框使用 `min-width:0` 与弹性尺寸；不得将搜索框压缩在品牌旁边。购物袋控件拥有 `.cart-count`，并打开 `dialog.cart-dialog`。导航用于类别发现，不是 B2B 服务导航。

搜索会规范化去首尾空格、不区分大小写的查询，并与所选类别标签以 AND 逻辑组合。每次输入或所选标签变更时，渲染匹配的货架商品并更新礼貌播报的结果数。`.search-clear` 只在查询非空时可见且可用；它会清空查询、将焦点返回搜索输入框，并恢复所选类别结果集。零结果状态在面板中可见，文本为“没有虚构商品匹配此搜索”，并提供清除搜索按钮。搜索不得发起网络请求。

### 深色商品 Hero 与推广瓷砖

`.hero-grid` 是一个带 10px 圆角边界、含文案和使用 `assets/produce-market.svg` 的 `.hero-art` 的深色 `#1f2125` 面板；其中包含一个青柠购物 CTA。随后严格放置两个 `.promo-tile` 面板：一个季节性集合提示和一个食谱/农产品提示；不包含倒计时、折扣保证或认证声明。

### 圆形类别与商品货架

`.category-list` 包含六个带圆形图像的具名类别链接。`.filter-tabs` 使用真正的按钮，带 `role="tab"`、`aria-selected`、`aria-controls` 和匹配的 `role="tabpanel"`。应用 roving `tabindex`：仅已选标签为 `tabindex="0"`，其他均为 `-1`。Left/Right 方向键循环移动焦点，Home 移至第一个标签，End 移至最后一个标签；每次移动均自动激活焦点标签、更新面板和搜索结果集。由六到八个虚构商品组成的 `.product-grid` 包含名称、类别、价格、收藏控件和加购按钮。至少包含一个 `out-of-stock` 商品，其加购按钮原生禁用；不得编造评分或评论。

### 商品操作与状态

`.favorite` 是使用 `aria-pressed` 的按钮；其状态仅在页面打开期间保留。已启用的加购按钮立即变为禁用状态，附加 `aria-busy="true"`，标签为“正在加入…”，持续准确 300ms；该时段内忽略重复激活。结束时，它增加内存中的商品行，同时整个购物袋总数保持在 99 或以下，更新购物袋数量，并通过礼貌 `.sr-only` live region 播报“已将 [商品] 加入购物袋”。如加购会使整个购物袋超过 99，不更改购物袋；显示明确的本地错误“此演示购物袋上限为 99 件。”成功提示为“购物袋已在本地更新；未发送任何内容。”无货按钮从首次渲染起即原生 `disabled`。

### 原生购物袋对话框

使用 `<dialog class="cart-dialog">`，通过 `showModal()` 打开。储存打开者，并在对话框 `close` 事件后（包括原生 Escape）将焦点返回该元素。其 `.cart-line` 包含 `.cart-line-media`、`.cart-line-details`、`.quantity-control` 和 `.remove-button`，以及图像、名称、单价和 `.cart-total`。每行数量限制为整数 1–99，整个购物袋总数也限制为 99：数量为 1 时减号禁用；数量为 99 时加号禁用且不能触发错误。只有已启用的商品货架加购操作会使整个购物袋超过 99 时，才显示明确错误“此演示购物袋上限为 99 件。”390px 时 `.cart-line` 是两列网格：64px 媒体列加弹性详情列；数量/移除控件位于第二列，对话框内边距为 16px，因此在 358px 视口宽度下不会溢出。价格和总额以整数分存储/计算，仅在渲染时格式化。移除一行后，焦点移至下一行的移除控件；若无则移至上一行；若仍无则移至对话框关闭按钮。移除最后一行时渲染“你的演示购物袋为空”，并将焦点放在关闭按钮。所有数据只存在内存中：不得使用网络 API、cookie 或 localStorage。

### 订阅与页脚

`.newsletter` 有一个带标签的邮箱字段、青柠提交按钮，以及内联 `.field-error` / `.form-status`。有效的本地提交会说明并未创建任何订阅。页脚列包含虚构品牌介绍、类别、帮助链接和联系占位内容；不得添加真实地址、信任标识、评价或保证。

## Do's and Don'ts

### Do

- 应保留从 B2C 浏览到购物袋的路径、圆角卡片和青柠零售强调色。
- 应在标题使用 Inter 700，在正文使用 Roboto。
- 应使控件在键盘操作中焦点可见、有状态，并在 390px 时可读。
- 应只使用虚构商品，例如 Orchard Apples、River Spinach、Sunroot Carrots、Meadow Oats、Citrus Blend、Garden Peas、Stonefruit Jam 以及售罄的 Field Mushrooms。

### Don't

- 不得将购物袋改成 RFQ、结账或线索收集。
- 不得使用源站 logo、摄影、商品宣称、倒计时、评分、认证徽章或复制的营销文案。
- 不得在演示中使用 localStorage 或网络提交。

## Surfaces

| 层级 | 表面 | 数值 | 用途 |
|---|---|---|---|
| 0 | 画布 | `#ffffff` | 主货架 |
| 1 | 柔和市集色 | `#f7f8f4` | 商品图像背景 |
| 2 | 青柠浅色 | `#edf6df` | 类别/订阅区域 |
| 3 | 夜色 | `#1f2125` | Hero/页脚 |

## Elevation

商品卡片使用 `0 8px 24px rgb(28 38 24 / 8%)`；其余面板保持扁平。仅在未启用减少动态效果时，悬停可使卡片上移 2px。浅色表面的焦点为 3px 深绿色外框、偏移 3px；Hero/页脚焦点使用 `#d7ff93`。按钮没有环境投影，并使用内嵌激活线。

## Imagery

要求的路径为 `assets/produce-market.svg`。它是通用原创生鲜市集示意，不是商品照片、库存记录、认证图片或源站资产。可为 Hero、类别和商品占位图使用它，但应提供上下文明确的 alt 文本；生产环境需要已批准的商品图像。

## Layout

1440px 时，`.container` 宽度为 1200px：有边界的 Hero 使用 1.1/0.9 列，类别使用六个圆形项目，货架卡片为四列。390px 时左右留白为 16px，Hero 和订阅区域堆叠，类别自动换为三列，商品为两列，`.hero-copy` 上下使用 24px、左右使用 16px 内边距。不得出现水平溢出。这些是改编决策，并非源站测量断言。

## Agent Prompt Guide

**Quick Color Reference**

- 画布 `#ffffff`；主墨色 `#333333`；弱化文本 `#66706a`。
- 操作青柠 `#85c32d` 搭配深色 `#17200d` 标签；深色悬停 `#4d790c` 搭配白色标签。
- 深色 Hero/页脚 `#1f2125`；深色焦点 `#d7ff93`；错误 `#b42318`；控件边界 `#6f7871`。

**Example Component Prompts**

1. **货架：** 构建含 6–8 个虚构项目的 `.product-grid`，有真实按钮状态、一个售罄禁用项目，并且没有评分。
2. **购物袋：** 使用原生 `<dialog>`、`showModal()`、焦点返回打开者、可键盘操作的数量/移除、内存总额与礼貌播报。
3. **订阅：** 在本地验证带标签的邮箱；错误和成功本地状态内联显示，不创建订阅。

## Similar Brands

- [Organo reference](https://live.themewild.com/organo/) 是唯一的组织形式参考；不得复制其标识、商品摄影、文案或宣称。

## Quick Start

### CSS Custom Properties

请按原样使用下方完整样式表。开头的 `@import` 默认通过 Google Fonts 加载 Inter 和 Roboto。生产前必须依据项目 CSP、隐私与字体许可证要求审核该提供商；如有必要，应以已批准的自托管/服务商来源替换导入，同时保留已定义的回退字体。样式表包含本改编所需的响应式、动态效果、焦点和禁用状态规则。

```css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500&display=swap");

:root {
  color-scheme: light;
  --color-canvas:#ffffff; --color-surface:#f7f8f4; --color-ink:#333333; --color-muted:#66706a; --color-lime:#85c32d; --color-lime-dark:#4d790c; --color-lime-tint:#edf6df; --color-footer:#1f2125; --color-footer-muted:#cfd2d0; --color-border:#dce1da; --color-control-border:#6f7871; --color-error:#b42318; --color-error-bg:#fff1f0; --color-success:#1f6b35; --color-action-ink:#17200d; --color-category-dark:#2c351f; --color-focus-on-dark:#d7ff93;
  --font-heading:"Inter",Arial,sans-serif; --font-body:"Roboto",Arial,sans-serif; --text-caption:.75rem; --text-label:.875rem; --text-body:1rem; --text-card:1.125rem; --text-section:2rem; --text-hero:3.25rem;
  --layout-max:75rem; --gutter:1.5rem; --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3rem; --space-6:5rem; --radius-card:.625rem; --radius-pill:999px; --control-height:3.125rem; --hero-min-height:32rem; --shadow-card:0 8px 24px rgb(28 38 24 / 8%); --focus:3px solid #315e0d;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--color-canvas);color:var(--color-ink);font:400 var(--text-body)/1.6 var(--font-body)}img,svg{display:block;max-width:100%}button,input{font:inherit}button,a{touch-action:manipulation}a{color:inherit}:focus-visible{outline:var(--focus);outline-offset:3px}[hidden]{display:none!important}.container{width:min(calc(100% - 2 * var(--gutter)),var(--layout-max));margin:auto}.eyebrow{font:600 var(--text-label)/1.2 var(--font-heading);letter-spacing:.08em;text-transform:uppercase;color:var(--color-lime-dark)}h1,h2,h3{font-family:var(--font-heading);color:var(--color-ink);margin:0}h1{font-size:var(--text-hero);line-height:1.12;font-weight:700}h2{font-size:var(--text-section);line-height:1.2;font-weight:700}h3{font-size:var(--text-card);line-height:1.3;font-weight:700}.section{padding-block:var(--space-6)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.site-header{border-bottom:1px solid var(--color-border);background:#fff}.utility-bar{background:var(--color-footer);color:var(--color-footer-muted);font-size:var(--text-caption)}.utility-bar .container,.header-main,.category-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.utility-bar .container{min-height:2rem}.header-main{min-height:5.25rem}.brand{font:700 1.25rem/1 var(--font-heading);letter-spacing:-.05em;text-decoration:none}.brand span{color:var(--color-lime-dark)}.category-nav{min-height:3.25rem;border-top:1px solid var(--color-border);justify-content:flex-start}.category-nav a{font:600 var(--text-label)/1 var(--font-heading);text-decoration:none}.category-nav a:hover,.category-nav a[aria-current="page"]{color:var(--color-lime-dark)}.header-actions{display:flex;align-items:center;gap:.25rem}.icon-button{position:relative;display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;border:0;background:transparent;color:var(--color-ink);cursor:pointer}.cart-count{position:absolute;right:0;top:0;min-width:1.125rem;padding:0 .25rem;border-radius:var(--radius-pill);background:var(--color-lime);color:#1f2b12;font:700 var(--text-caption)/1.5 var(--font-heading);text-align:center}.search-form{display:flex;border:1px solid var(--color-border);border-radius:var(--radius-pill);overflow:hidden}.search-form input{min-width:12rem;border:0;padding:.625rem 1rem}.search-form button{border:0;background:#fff;padding-inline:.75rem;cursor:pointer}
.hero{background:var(--color-footer);color:#fff}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:var(--hero-min-height)}.hero-copy{padding:var(--space-6) var(--space-5) var(--space-6) 0}.hero h1{color:#fff;max-width:12ch}.hero p{color:#e5e8e2;max-width:34rem}.hero-art{background:var(--color-lime-tint);align-self:stretch;display:grid;place-items:center;padding:var(--space-4)}.hero-art img{width:100%;max-height:25rem;object-fit:contain}.button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-height);border:1px solid transparent;border-radius:var(--radius-pill);padding:.875rem 1.5rem;font:600 var(--text-label)/1 var(--font-heading);text-decoration:none;cursor:pointer}.button-primary{background:var(--color-lime);color:#17200d}.button-secondary{background:#fff;color:var(--color-ink);border-color:#fff}.button:hover{background:var(--color-lime-dark);border-color:var(--color-lime-dark);color:#fff}.button:active{box-shadow:inset 0 0 0 2px currentColor}.button:disabled,[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.promo-tile{min-height:14rem;border-radius:var(--radius-card);padding:var(--space-4);background:var(--color-lime-tint);display:flex;flex-direction:column;align-items:flex-start;justify-content:end}.promo-tile:nth-child(2){background:#edf0e9}.category-list{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-2)}.category-item{text-align:center;text-decoration:none;font:600 var(--text-label)/1.35 var(--font-heading)}.category-item img{width:100%;aspect-ratio:1;border-radius:50%;background:var(--color-lime-tint);object-fit:contain;padding:var(--space-2);margin-bottom:.75rem}.category-item:hover img,.category-item:focus-visible img{box-shadow:0 0 0 3px var(--color-lime)}
.filter-tabs{display:flex;flex-wrap:wrap;gap:.5rem}.filter-tab{border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:.625rem 1rem;background:#fff;color:var(--color-ink);font:600 var(--text-label)/1 var(--font-heading);cursor:pointer}.filter-tab[aria-selected="true"],.filter-tab:hover{background:var(--color-lime);border-color:var(--color-lime);color:#17200d}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}.product-card{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-card);background:#fff;overflow:hidden;box-shadow:var(--shadow-card)}.product-card img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--color-surface);padding:var(--space-2)}.product-card-body{padding:var(--space-2)}.product-meta{font-size:var(--text-label);color:var(--color-muted);margin:.375rem 0}.product-price{font:700 1rem/1.2 var(--font-heading)}.product-actions{display:flex;gap:.5rem;margin-top:var(--space-2)}.favorite{position:absolute;right:.75rem;top:.75rem;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--color-border);border-radius:50%;background:#fff;color:var(--color-ink);cursor:pointer}.favorite[aria-pressed="true"]{background:var(--color-lime);border-color:var(--color-lime)}.out-of-stock{color:var(--color-error);font:600 var(--text-label)/1.2 var(--font-heading)}
dialog.cart-dialog{width:min(100% - 2rem,32rem);border:0;border-radius:var(--radius-card);padding:0;color:var(--color-ink);box-shadow:0 24px 60px rgb(0 0 0 / 25%)}dialog::backdrop{background:rgb(20 25 20 / 55%)}.cart-dialog-inner{padding:var(--space-3)}.dialog-head,.cart-line,.cart-total{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.cart-lines{display:grid;gap:var(--space-2);margin-block:var(--space-3)}.cart-line img{width:4rem;height:4rem;object-fit:contain;background:var(--color-surface)}.quantity-control{display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-pill)}.quantity-control button{width:2rem;height:2rem;border:0;background:#fff;cursor:pointer}.remove-button{border:0;background:transparent;color:var(--color-error);text-decoration:underline;cursor:pointer}.cart-total{padding-top:var(--space-2);border-top:1px solid var(--color-border);font:700 var(--text-card)/1.2 var(--font-heading)}
.newsletter{background:var(--color-lime-tint)}.newsletter-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:center}.newsletter-form{display:flex;gap:.75rem}.field{display:grid;gap:.4rem;flex:1}.field label{font:600 var(--text-label)/1.2 var(--font-heading)}.field input{width:100%;min-height:var(--control-height);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding-inline:1rem;background:#fff}.field input[aria-invalid="true"]{border-color:var(--color-error);background:var(--color-error-bg)}.field-error{margin:0;color:var(--color-error);font-size:var(--text-label)}.form-status{margin:1rem 0 0;color:var(--color-success);font-weight:600}.site-footer{background:var(--color-footer);color:var(--color-footer-muted);padding-top:var(--space-5)}.site-footer h2,.site-footer h3{color:#fff}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-3);padding-bottom:var(--space-5)}.site-footer ul{padding:0;list-style:none}.site-footer li+li{margin-top:.5rem}.site-footer a{color:inherit}.footer-bottom{border-top:1px solid #41454a;padding-block:var(--space-2);font-size:var(--text-caption)}
@media(max-width:63.99rem){:root{--text-hero:2.75rem;--gutter:1.25rem}.header-main{flex-wrap:wrap;padding-block:1rem}.search-form{order:3;width:100%}.search-form input{min-width:0;flex:1}.hero-copy{padding-right:var(--space-3)}.category-list{grid-template-columns:repeat(3,1fr)}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:47.99rem){:root{--text-hero:2.25rem;--text-section:1.75rem;--gutter:1rem;--space-6:3.75rem}.utility-bar .container span:last-child,.category-nav a:nth-child(n+4){display:none}.category-nav{overflow:auto}.hero-grid,.newsletter-grid{grid-template-columns:1fr}.hero-copy{padding:var(--space-5) 0 var(--space-3)}.hero-art{min-height:16rem}.promo-grid{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.section-heading{align-items:start;flex-direction:column}.newsletter-form{flex-direction:column}.newsletter-form .button{width:100%}.footer-grid{grid-template-columns:repeat(2,1fr)}}
/* Adaptation overrides: preserve a lime retail category band and a bounded dark hero. */
.site-header{background:var(--color-canvas)}
.category-nav{background:var(--color-lime);border-radius:var(--radius-card) var(--radius-card) 0 0}
.category-nav a{color:var(--color-action-ink)}
.category-nav a:hover,.category-nav a[aria-current="page"]{color:var(--color-canvas);background:var(--color-category-dark)}
.hero{background:var(--color-surface);padding-block:var(--space-3)}
.hero-grid{background:var(--color-footer);border-radius:var(--radius-card);overflow:hidden}
.hero-copy{padding:var(--space-6) var(--space-5)}
.hero h1{color:var(--color-canvas)}
.button-primary{color:var(--color-action-ink)}
.button-secondary{background:var(--color-canvas);border-color:var(--color-border)}
.button:hover{color:var(--color-canvas)}
.search-form,.filter-tab,.favorite,.quantity-control,.field input,.button-secondary{border-color:var(--color-control-border)}
.hero .eyebrow{color:var(--color-focus-on-dark)}
.hero-copy :focus-visible,.site-footer :focus-visible{outline-color:var(--color-focus-on-dark)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.form-status{font-weight:500}
.cart-line strong{font-family:var(--font-heading);font-weight:700}
/* Keep search on its own row instead of compressing it beside the brand. */
@media(max-width:63.99rem){.header-main .search-form{flex:1 0 100%;width:100%;order:3}}
@media(max-width:47.99rem){.category-nav{flex-wrap:wrap}.category-nav a:nth-child(n+4){display:inline-block}.hero-copy{padding:1.5rem 1rem}.search-form{min-width:0;flex:1}.search-form input{min-width:0;flex:1}.cart-dialog-inner{padding:1rem}.cart-line{display:grid;grid-template-columns:4rem minmax(0,1fr);align-items:start}.cart-line .quantity-control,.cart-line .remove-button{grid-column:2}.cart-line .quantity-control{justify-self:start}}
@media(max-width:22.49rem){.product-grid,.footer-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}
```

### Tailwind v4

可选编译集成：保留上方完整样式表，并将这些别名加入 Tailwind v4 入口文件。它们引用同一套 token，不另设配色。此代码块需由 Tailwind 编译；不要将编译器导入直接粘贴到普通浏览器样式表。

```css
@import "tailwindcss";
/* Load the complete stylesheet above after Tailwind's reset. */
@theme inline {
  --color-market: var(--color-lime);
  --color-market-foreground: var(--color-ink);
  --color-copy: var(--color-ink);
  --color-panel: var(--color-lime-tint);
  --font-display: var(--font-heading);
  --font-copy: var(--font-body);
  --radius-panel: var(--radius-card);
  --spacing-section: var(--space-6);
}
```