#颜色

<div class="grid w-full gap-3 sm:grid-cols-2 lg:grid-cols-4">
    <div class="rounded-lg border border-border bg-background p-4">
      <div class="mb-3 h-12 rounded-md border border-border bg-background"></div>
      <strong class="text-sm">画布</strong>
      <code class="mt-1 block text-xs text-muted-foreground">--background</code>
    </div>
    <div class="rounded-lg border border-border bg-card p-4">
      <div class="mb-3 h-12 rounded-md bg-muted"></div>
      <strong class="text-sm">弱化表面</strong>
      <code class="mt-1 block text-xs text-muted-foreground">--muted</code>
    </div>
    <div class="rounded-lg border border-border bg-card p-4">
      <div class="mb-3 h-12 rounded-md bg-primary"></div>
      <strong class="text-sm">A3S 主操作</strong>
      <code class="mt-1 block text-xs text-muted-foreground">--primary</code>
    </div>
    <div class="rounded-lg border border-border bg-card p-4">
      <div class="mb-3 h-12 rounded-md bg-[var(--a3s-blue)]"></div>
      <strong class="text-sm">蓝色焦点 / 选择</strong>
      <code class="mt-1 block text-xs text-muted-foreground">--a3s-blue</code>
    </div>
  </div>

<div class="flex w-full flex-wrap gap-3">
    <span class="badge bg-[var(--a3s-blue)] text-primary-foreground">焦点 / 选择</span>
    <span class="badge bg-[var(--a3s-green)] text-white">成功</span>
    <span class="badge bg-[var(--a3s-warning)] text-white">警告</span>
    <span class="badge bg-destructive text-white">危险</span>
  </div>