/* css/brand.css — 设计令牌（所有模板共享） */
/* SINGLE SOURCE OF TRUTH — 统一 20 色系统 */
:root {
  /* ═══════════════════════════════════════
     BRAND — Teal (5 个)
  ═══════════════════════════════════════ */
  --ac:        #0F766E;   /* 主色：按钮、链接、高亮 */
  --ac-dark:   #0A5A54;   /* 深色：hover/按下 */
  --ac-light:  #14b8a6;   /* 浅色：渐变、图标填充 */
  --ac-border: #CCFBF1;   /* 边框：聚焦环、活跃卡片 */
  --ac-bg:     #F0FDFA;   /* 背景：hover 填充、活跃面板 */

  /* 旧别名兼容 */
  --ac-mid:    var(--ac-light);
  --ac-dim:    var(--ac-dark);
  --ac-xlight: var(--ac-bg);

  /* ═══════════════════════════════════════
     SURFACE (3 个)
  ═══════════════════════════════════════ */
  --white:     #FFFFFF;   /* 卡片、header、弹窗 */
  --bg:        #F9FAFB;   /* 页面画布 */
  --bg-dark:   #0F1A18;   /* 深色区块：footer、Hero */

  /* 旧别名 */
  --bg-page: var(--bg);
  --bg-card: var(--white);

  /* ═══════════════════════════════════════
     TEXT (5 个)
  ═══════════════════════════════════════ */
  --ink:       #111827;   /* 标题、卡片标题 */
  --ink2:      #374151;   /* 正文、描述 */
  --ink3:      #6B7280;   /* 辅助文字、label */
  --ink4:      #9CA3AF;   /* 占位符、caption */
  --text-inverse: #FFFFFF; /* 深底上文字 */

  /* 旧别名 */
  --ink-soft:  var(--ink2);
  --ink-muted: var(--ink3);

  /* ═══════════════════════════════════════
     BORDER (1 个)
  ═══════════════════════════════════════ */
  --border:    #E5E7EB;   /* 通用边框 */
  --border2:   #D1D5DB;   /* 强分隔 / 输入框边框 */

  /* ═══════════════════════════════════════
     FUNCTIONAL (6 个 — fg/bg 各算一个色系)
  ═══════════════════════════════════════ */
  /* Green — 成功 / 免费 */
  --green-fg:  #065F46;
  --green-bg:  #ECFDF5;

  /* Amber — 警告 / 付费 / 年付 */
  --amber-fg:  #9A3412;
  --amber-bg:  #FFF7ED;

  /* Red — 错误 / 必填 */
  --red-fg:    #991B1B;
  --red-bg:    #FEF2F2;

  /* ═══════════════════════════════════════
     SEMANTIC ALIASES（旧变量名兼容 — 模板大量引用）
  ═══════════════════════════════════════ */
  --star:             #F59E0B;   /* 评分星 ★ */
  --semantic-success: var(--green-fg);
  --semantic-warning: var(--amber-fg);
  --semantic-error:   var(--red-fg);

  /* 旧 functional 变量名 */
  --func-free-fg: var(--green-fg);
  --func-free-bg: var(--green-bg);
  --func-free-bd: #A7F3D0;

  --func-paid-fg: var(--amber-fg);
  --func-paid-bg: var(--amber-bg);
  --func-paid-bd: #FED7AA;

  --func-warn-bg: var(--amber-bg);
  --func-warn-bd: #FDE68A;
  --func-warn-fg: #854D0E;

  --func-open-fg: #1D4ED8;
  --func-open-bg: #EFF6FF;
  --func-open-bd: #BFDBFE;

  --func-error-bg: var(--red-bg);
  --func-error-fg: var(--red-fg);
  --func-error-bd: #FECACA;

  --func-success-bg: #F0FDF4;
  --func-success-fg: #166534;
  --func-success-bd: #BBF7D0;

  /* ═══════════════════════════════════════
     RADIUS
  ═══════════════════════════════════════ */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;
  --r-xl:   20px;

  /* ═══════════════════════════════════════
     SHADOW
  ═══════════════════════════════════════ */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow:    0 4px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);

  /* ═══════════════════════════════════════
     LAYOUT
  ═══════════════════════════════════════ */
  --wrap-max:  1200px;
  --header-h:  56px;
}