/*
 * 配色变量（沿用样板站的配色 A、色块分区，只出浅色；字体先用系统字体栈，设计稿 docs/ui/设计方案.md 定了再换）
 * 用法说明见 brand/README.md。页面里只用下面「语义变量」（--bg、--text、--primary…），
 * 不要直接写色阶（--ink-800）或十六进制颜色，这样深色模式和以后调色只改这一个文件。
 */

:root {
  /* ---------- 色阶：青绿墨（品牌主色 = 800） ---------- */
  --ink-50: #E8F1F0;
  --ink-100: #D3E4E3;
  --ink-200: #AECBCB;
  --ink-300: #7DABAC;
  --ink-400: #4A8789;
  --ink-500: #1F6B6E;
  --ink-600: #175F62;
  --ink-700: #12565A;
  --ink-800: #0E4A4D;
  --ink-900: #0A3638;
  --ink-950: #06272A;

  /* ---------- 色阶：琥珀金（品牌强调色 = 400） ---------- */
  --amber-50: #FEF6E7;
  --amber-100: #FDE9C4;
  --amber-200: #FAD38C;
  --amber-300: #F7BE5C;
  --amber-400: #F2A93B;
  --amber-500: #DB8E1C;
  --amber-600: #B87212;
  --amber-700: #8F5710;
  --amber-800: #6B4111;
  --amber-900: #4A2E0E;

  /* ---------- 色阶：中性灰（略偏冷，跟青绿墨搭） ---------- */
  --neutral-0: #FFFFFF;
  --neutral-25: #F8F9FB;
  --neutral-50: #F2F4F7;
  --neutral-100: #E6E9EF;
  --neutral-200: #D3D8E1;
  --neutral-300: #B5BDCB;
  --neutral-400: #8B95A7;
  --neutral-500: #677184;
  --neutral-600: #4D5668;
  --neutral-700: #384052;
  --neutral-800: #232A3A;
  --neutral-900: #141A27;

  /* ---------- 色阶：纸面（2026-10-22 方向 A，暖纸色和暖深灰字，取代浅色模式里的冷灰） ---------- */
  --paper-0: #FFFDF8;   /* 题纸、票据的暖白 */
  --paper-25: #F8F3E8;  /* 首页叠起的第二张纸 */
  --paper-50: #F6F3EC;  /* 页面纸色底 */
  --paper-100: #EFEADF; /* 深一档纸：悬停、页脚、次级区块 */
  --paper-125: #EEE6D6; /* 首页叠起的最底下一张纸 */
  --paper-150: #E6DFD1; /* 进度条底 */
  --paper-200: #DDD5C6; /* 暖灰细线 */
  --paper-500: #8E877A; /* 选项框、输入框边 */
  --paper-600: #6E675B; /* 弱提示文字 */
  --paper-700: #5C564C; /* 次要文字 */
  --paper-900: #2B2824; /* 正文：偏暖的深灰 */

  /* ---------- 色阶：对错反馈（只用于答题结果，不做装饰） ---------- */
  --success-50: #E4F5EC;
  --success-500: #22A06B;
  --success-700: #0F7A4D;
  --danger-50: #FCE9E7;
  --danger-500: #E5484D;
  --danger-700: #B3261E;

  /* ================= 语义变量：浅色（默认） ================= */
  /* 对比度（WCAG，2026-10-22 算过）：正文 --text 对纸底 13.2、对 --surface-muted 12.2；--text-muted 对纸底 6.6、对 --surface-muted 6.1；
     --text-subtle 对纸底 5.1、对 --surface 5.5、对 --surface-muted 4.7；--accent-text 对纸底 5.4、对 --surface-muted 5.0；
     --border-strong 对 --surface 3.5、对纸底 3.2（非文字 ≥3:1）；标题青绿墨压在荧光笔 --highlight 上 8.2 */
  --bg: var(--paper-50);              /* 页面底色：暖纸色 */
  --surface: var(--paper-0);          /* 「纸」：题纸、票据、弹窗 */
  --surface-muted: var(--paper-100);  /* 深一档纸：悬停、次级区块、表头 */
  --border: var(--paper-200);         /* 分割线（装饰用，靠细线分组） */
  --border-strong: var(--paper-500);  /* 输入框、未选中的选项框（需 ≥3:1） */

  --text: var(--paper-900);           /* 正文 */
  --text-muted: var(--paper-700);     /* 次要说明 */
  --text-subtle: var(--paper-600);    /* 弱提示、时间、占位符 */
  --heading: var(--ink-800);         /* 标题 */
  --link: var(--ink-500);
  --link-hover: var(--ink-700);

  --primary: var(--ink-800);         /* 主按钮：普通操作（下一题、提交、登录） */
  --primary-hover: var(--ink-900);
  --on-primary: var(--neutral-0);

  --accent: var(--amber-400);         /* 转化按钮：开始免费测验、购买题库（一屏最多一个） */
  --accent-hover: var(--amber-500);
  --on-accent: var(--paper-900);      /* 金色块上的字用正文色 */
  --accent-soft: var(--amber-50);     /* 「免费」「新」标签、提示条底色 */
  --accent-text: var(--amber-700);    /* 浅底上的金色文字只能用这个，不能用 --accent */
  --highlight: var(--amber-300);      /* 荧光笔：压在字的下半部（.hl），只做底色，上面的字用 --heading */

  --focus-ring: var(--ink-500);      /* 键盘焦点框，2px + 2px 间距 */

  /* 2026-11-14 新版 UI 的色块：靠色块分区，不画框 */
  --block: var(--ink-800);           /* 深色块（做题卡头、练习区分数块、主按钮） */
  --on-block: var(--neutral-0);
  --block-muted: var(--ink-200);     /* 深色块上的次要字 */
  --block-accent: var(--amber-300);   /* 深色块上的强调字 */
  --block-track: var(--ink-600);     /* 深色块上的进度格底 */
  --sun: var(--amber-400);            /* 金色块：只给购买按钮、考期和分数这类大数字色块、logo 的勾 */
  --on-sun: var(--paper-900);
  --link-soft: #E4EAF4;               /* 选中态、链接的浅底 */
  --link-strong: var(--ink-700);     /* 浅底上的深一档链接色 */

  --option-selected-bg: var(--link-soft);
  --option-selected-border: var(--ink-800);
  --correct-bg: var(--success-50);
  --correct-border: var(--success-700);
  --correct-text: var(--success-700);
  --wrong-bg: var(--danger-50);
  --wrong-border: var(--danger-700);
  --wrong-text: var(--danger-700);

  --progress-track: var(--paper-150);
  --progress-fill: var(--ink-800);    /* 进度格：答过的是青绿墨，金色留给购买 */

  --header-bg: var(--paper-50);
  --figure-bg: var(--neutral-0);      /* 题目里的图（SVG 多是透明底深色线条），深色模式下也垫白底 */
  --footer-bg: var(--paper-100);      /* 页脚：深一档纸色，深色字 */
  --on-footer: var(--paper-700);
  --shadow-paper: 0 1px 0 rgba(60, 45, 20, 0.06), 0 30px 60px -30px rgba(60, 45, 20, 0.35); /* 「纸」的暖色投影 */

  /* 首页主视觉里叠起来的题纸：深色模式下也是亮纸（像摊在深色桌面上），所以下面这组深色模式不覆盖 */
  --sheet-1: var(--paper-0);
  --sheet-2: var(--paper-25);
  --sheet-3: var(--paper-125);
  --sheet-ink: var(--ink-800);
  --sheet-text: var(--paper-900);
  --sheet-muted: var(--paper-700);
  --sheet-rule: var(--paper-200);
  --sheet-rule-strong: var(--paper-500);
  --sheet-tag-bg: var(--paper-100);
  --sheet-highlight: var(--amber-300);
  --sheet-tick: var(--amber-400);

  color-scheme: light;
}

/* 深色模式（2026-11-14 用户批准的计划）：新配色只有浅色稿，先全站只出浅色；深色等四批都上线后单独设计。 */

/* ---------- 字体 ---------- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 正文：系统字体栈（设计稿未定），都完整支持 İ ı Ş ş Ğ ğ */
  --font-heading: var(--font-sans); /* 标题和大数字 700 / 800 */
}

/* ---------- 纸面设计语言（2026-11-03，跨页面复用；见 DESIGN.md） ---------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --gutter-mobile: 22px;

  --type-caption: 0.75rem;
  --type-meta: 0.8125rem;
  --type-small: 0.875rem;
  --type-body-mobile: 0.9375rem;
  --type-body: 1.0625rem;
  --leading-heading: 1.5;
  --leading-control: 1.6;
  --leading-body: 1.8;
  --leading-reading: 1.9;

  --radius-control: 999px;  /* 胶囊按钮 */
  --radius-card: 16px;      /* 选项、小卡 */
  --radius-paper: 20px;
  --radius-block: 28px;     /* 大色块 */
  --control-min: 48px;
  --control-compact: 44px;
  --control-cta: 56px;
  --focus-width: 2px;
  --focus-offset: 4px;
  --motion-feedback: 160ms;
}