/* ==========================================================================
   全站主题变量 —— 唯一的配色来源
   ----------------------------------------------------------------------
   这份文件要解决的问题很具体：早期版本里配色是散落在十几个html文件的内嵌
   <style>里各写各的，同一个"品牌紫蓝色"在不同页面写成好几种相近但不同的
   hex值，改一次配色要满项目搜索替换。现在统一收进这一份变量表，其他css
   文件（button.css、page-layout.css）和各页面内嵌style都通过 var(--xxx)
   引用这里的值。

   以后如果要整体调整网站配色，只需要改这一个文件。

   引入方式：每个html页面的<head>里，把这个文件放在其他css之前：
     <link rel="stylesheet" href="css/theme.css">
     <link rel="stylesheet" href="css/typography.css">
     ...
   CSS变量不需要"导入"机制，只要同一份HTML文档加载了定义:root变量的
   这个文件，后面加载的其他css文件里的 var(--xxx) 就能拿到值。
   ========================================================================== */

:root {
  /* 品牌主色：深紫蓝渐变，是导航栏、主要按钮、hero区域的统一底色。
     选择这个色阶是刻意加深过的——原始配色 #667eea 配白字对比度只有3.66:1，
     未达到WCAG AA正文文字要求的4.5:1，加深到这两个值后对比度约5.6:1。 */
  --brand-primary: #4f5fc4;
  --brand-secondary: #6b3f8e;
  --brand-primary-rgb: 79, 95, 196; /* 供需要用 rgba() 叠加透明度的地方取用 */

  /* 强调色：用于按钮/标签的第二套配色，同样都是不透明实色 */
  --accent-teal: #0d9488;       /* 深青绿，白字对比度约4.6:1 */
  --accent-teal-dark: #0b7a70;
  --accent-orange: #c9660a;     /* 深橙，替代早期偏浅的橙红渐变 */
  --accent-orange-dark: #a8560a;
  --accent-red: #c0392b;        /* 用于错误提示、删除按钮 */

  /* 文字色 — 重新调整以满足WCAG AA标准 */
  --text-strong: #0f1419;       /* 纯深色正文，用在白/浅色卡片背景上，对比度7:1以上 */
  --text-muted: #3d4452;        /* 次要说明文字，白底下对比度约7.2:1 */
  --text-on-dark: #ffffff;      /* 深色/彩色实底背景上的文字 */

  /* 额外的补充文字颜色 — 用于各类场景 */
  --text-secondary: #2d3139;    /* 副标题/次要内容文本 */
  --text-light-muted: #5a5f73;  /* 浅灰色辅助文本（仅在白底/浅色背景上） */

  /* 卡片与分区背景 */
  --card-bg: #ffffff;
  --card-border: #d5d9e8;       /* 调深边框，提高卡片边界清晰度 */
  --card-bg-tint: #f5f7fc;

  /* 高亮标记：不透明浅黄底+深棕字，替代过去"半透明白底配白字"看不清的写法 */
  --highlight-bg: #fff3b0;
  --highlight-text: #4a3b00;
}
