/* ============================================================
   主题层：整站所有「有色」的东西只在这个文件里
   ------------------------------------------------------------
   改色方法：只动【第 1 区 主色】的 7 个值 + 2 个渐变。
   下面所有派生色（文字层级、淡色底、描边、阴影、光晕、深色场景）
   都用 color-mix 从主色自动推导，会跟着一起变，不用逐个改。

   注意：
     - 白色玻璃层 / 白色卡片底不在这个文件里，它们是中性色，
       任何配色下都通用，不用改。
     - 每个派生色写了两遍：第一行是硬值（老浏览器），
       第二行是 color-mix（现代浏览器，自动跟随主色），
       后者覆盖前者，不支持时自动退回。
   ============================================================ */

:root{

/* ========== 第 1 区：主色（改色只改这里） ========== */

  --paper:#EFE9F8;      /* 页面底色基调（浅，微提紫调，避免发白） */
  --ink:#2C2642;        /* 正文 / 标题（深） */
  --accent:#7C6BD4;     /* 强调色：下划线、图标、高亮、焦点 */
  --gray:#8B84A6;       /* 辅助文字、标签 */
  --line:#E2DBF2;       /* 分隔线、描边 */
  --dark:#241F35;       /* 深底：弹层遮罩、深色块、阴影来源 */
  --card:rgba(255,255,255,.62);  /* 板块卡片底 */

  --grad-btn:linear-gradient(135deg,#8F7FE0,#5C49B6);   /* 按钮渐变（深→亮，跨度加大） */
  --grad-hero:linear-gradient(120deg,#2B2450 0%,#9B8BE8 80%); /* 大标题渐变（深紫→亮紫，跨度明显） */

/* ========== 第 2 区：文字层级（由 ink / gray 推导） ========== */

  --ink-strong:#3A3160;  --ink-strong:color-mix(in srgb, var(--ink) 88%, var(--accent));   /* 标题、板块名 */
  --ink-mid:#564C6B;     --ink-mid:color-mix(in srgb, var(--ink) 74%, var(--paper));      /* 次级正文 */
  --ink-soft:#6E6788;    --ink-soft:color-mix(in srgb, var(--ink) 62%, var(--paper));     /* 说明文字 */
  --ink-faint:#7A7396;   --ink-faint:color-mix(in srgb, var(--ink) 55%, var(--paper));    /* 辅助信息 */
  --ink-nav:#5C5578;     --ink-nav:color-mix(in srgb, var(--ink) 70%, var(--paper));      /* 目录项文字 */

  --mute-2:#ABA3C6;      --mute-2:color-mix(in srgb, var(--gray) 70%, var(--paper));      /* 目录分组标题 */
  --mute-3:#B0A8CC;      --mute-3:color-mix(in srgb, var(--gray) 62%, var(--paper));      /* 目录编号 */
  --mute-4:#A79FC2;      --mute-4:color-mix(in srgb, var(--gray) 66%, var(--paper));      /* 英文小字 */

  --accent2:#A08FE8;     --accent2:color-mix(in srgb, var(--accent) 60%, #ffffff);        /* 强调色亮一档 */
  --accent-deep:#4A3E7E; --accent-deep:color-mix(in srgb, var(--accent) 55%, var(--ink)); /* 强调色深一档 */

/* ========== 第 3 区：淡色底（选中态 / 标签底） ========== */

  --tint-1:rgba(124,107,212,.13); --tint-1:color-mix(in srgb, var(--accent) 13%, transparent); /* 选中、表头 */
  --tint-2:rgba(124,107,212,.10); --tint-2:color-mix(in srgb, var(--accent) 10%, transparent); /* 徽章、胶囊 */
  --tint-3:rgba(124,107,212,.09); --tint-3:color-mix(in srgb, var(--accent) 9%, transparent);  /* 胶囊、淡块 */
  --tint-4:rgba(124,107,212,.08); --tint-4:color-mix(in srgb, var(--accent) 8%, transparent);  /* 行悬停 */

/* ========== 第 4 区：描边 / 分隔线 ========== */

  --hairline-2:#E9E4F4;   /* 卡片、输入框描边 */
  --hairline-3:#EBE6F5;   /* 板块外框 */
  --hairline-4:#D8D0EC;   /* 控件描边 */
  --hairline-5:#D2C7E9;   /* 虚线、左引线 */

  --rule-1:#B4A9DC; --rule-1:color-mix(in srgb, var(--accent) 45%, var(--paper));  /* 小标题前短横线 */
  --rule-2:#C9C0E4; --rule-2:color-mix(in srgb, var(--accent) 30%, var(--paper));  /* 子目录前短横线 */
  --rule-3:#C4B6EE; --rule-3:color-mix(in srgb, var(--accent) 35%, #ffffff);       /* 侧栏顶部高光 */
  --rule-4:#C9BCED; --rule-4:color-mix(in srgb, var(--accent) 40%, #ffffff);       /* 卡片悬停描边 */
  --ring-1:rgba(124,107,212,.28); --ring-1:color-mix(in srgb, var(--accent) 28%, transparent); /* 头像圈 */

/* ========== 第 5 区：首页 / 致谢的底色光晕 ========== */

  --hero-bg-1:rgba(139,124,214,.30); --hero-bg-1:color-mix(in srgb, var(--accent) 30%, transparent);
  --hero-bg-2:rgba(168,150,226,.22); --hero-bg-2:color-mix(in srgb, var(--accent) 22%, #ffffff);
  --hero-bg-4:rgba(222,209,244,.60); --hero-bg-4:color-mix(in srgb, var(--accent) 22%, #f6f2fc); /* 页面渐变中段：提紫、压白，避免发白 */

/* ========== 第 6 区：渐变条 ========== */

  --grad-bar:linear-gradient(90deg,#8F7FE0,#E2AC46);          /* 进度条（紫→金盏黄） */
  --grad-rule:linear-gradient(90deg,#6E5BC0,#E2AC46);         /* 标题下划线（紫→金盏黄） */
  --grad-top:linear-gradient(90deg,#8B7BD8,#C4B6EE 45%,transparent); /* 侧栏顶线 */
  --amber:#E2AC46; --amber:color-mix(in srgb, #E2AC46 100%, transparent); /* 撞色点缀：金盏黄 */

/* ========== 第 7 区：阴影颜色（只放颜色，偏移量写在 style.css） ========== */

  /* 深色系 —— 由 --dark 推导 */
  --sh-d10:rgba(36,31,53,.10); --sh-d10:color-mix(in srgb, var(--dark) 10%, transparent);
  --sh-d12:rgba(36,31,53,.12); --sh-d12:color-mix(in srgb, var(--dark) 12%, transparent);
  --sh-d13:rgba(36,31,53,.13); --sh-d13:color-mix(in srgb, var(--dark) 13%, transparent);
  --sh-d14:rgba(36,31,53,.14); --sh-d14:color-mix(in srgb, var(--dark) 14%, transparent);
  --sh-d16:rgba(36,31,53,.16); --sh-d16:color-mix(in srgb, var(--dark) 16%, transparent);
  --sh-d18:rgba(36,31,53,.18); --sh-d18:color-mix(in srgb, var(--dark) 18%, transparent);
  --nav-scrim:rgba(36,31,53,.45); --nav-scrim:color-mix(in srgb, var(--dark) 45%, transparent); /* 移动端导航遮罩 */

  /* 强调色系 —— 由 --accent 推导 */
  --sh-a08:rgba(90,75,140,.08);  --sh-a08:color-mix(in srgb, var(--accent) 8%, transparent);
  --sh-a13:rgba(90,75,140,.13);  --sh-a13:color-mix(in srgb, var(--accent) 13%, transparent);
  --sh-a16:rgba(90,75,140,.16);  --sh-a16:color-mix(in srgb, var(--accent) 16%, transparent);
  --sh-a24:rgba(110,91,192,.24); --sh-a24:color-mix(in srgb, var(--accent) 24%, transparent);
  --sh-a28:rgba(110,91,192,.28); --sh-a28:color-mix(in srgb, var(--accent) 28%, transparent);
  --sh-a30:rgba(110,91,192,.30); --sh-a30:color-mix(in srgb, var(--accent) 30%, transparent);
  --sh-a32:rgba(110,91,192,.32); --sh-a32:color-mix(in srgb, var(--accent) 32%, transparent);
  --sh-a36:rgba(110,91,192,.36); --sh-a36:color-mix(in srgb, var(--accent) 36%, transparent);

/* ========== 第 8 区：状态色（中性，不随主色） ========== */

  --ok:#2F7F6B;   --ok-bg:rgba(47,127,107,.13);   --ok-line:rgba(47,127,107,.28);    /* 进行中 */
  --warn:#8A6420; --warn-bg:rgba(160,120,40,.12); --warn-line:rgba(200,165,90,.35);  /* 打磨中 */

/* ========== 第 9 区：深色场景（视频播放器 / 大图弹层） ========== */

  --video-bg:#1A1526;              --video-bg:color-mix(in srgb, var(--dark) 92%, #000000);
  --video-scrim-1:rgba(36,31,53,.26); --video-scrim-1:color-mix(in srgb, var(--dark) 26%, transparent);
  --video-scrim-2:rgba(36,31,53,.56); --video-scrim-2:color-mix(in srgb, var(--dark) 56%, transparent);
  --video-ring:rgba(36,31,53,.34);    --video-ring:color-mix(in srgb, var(--dark) 34%, transparent);

  --scrim:rgba(28,24,42,.93);      --scrim:color-mix(in srgb, var(--dark) 93%, transparent);  /* 弹层遮罩 */
  --scrim-text:#CFC6E8;            --scrim-text:color-mix(in srgb, var(--gray) 40%, #ffffff); /* 弹层说明文字 */

/* ========== 第 10 区：叠加在色块上的文字 / 滚动条 ========== */

  --on-btn:#F7F4FC;  --on-btn:color-mix(in srgb, var(--paper) 85%, #ffffff);  /* 渐变按钮上的字 */
  --on-accent:#FFFFFF;                                                        /* 紫底上的白字 */
  --scroll-thumb:rgba(124,107,212,.28); --scroll-thumb:color-mix(in srgb, var(--accent) 28%, transparent);
  --sel-bg:var(--accent2);                                                    /* 文字选中底色 */
}