/*
 * saudiexams 配色变量（2026-10-18 定稿；2026-10-22 用户选方向 A「纸面」：浅色底换成暖纸色，加了纸色色阶、荧光笔和纸张投影）
 * 用法说明见 brand/README.md。页面里只用下面「语义变量」（--bg、--text、--primary…），
 * 不要直接写色阶（--navy-800）或十六进制颜色，这样深色模式和以后调色只改这一个文件。
 */

:root {
  /* ---------- 色阶：深蓝（品牌主色 = 800） ---------- */
  --navy-50: #EEF2F8;
  --navy-100: #D9E1EE;
  --navy-200: #B3C2DC;
  --navy-300: #8299C2;
  --navy-400: #5272A6;
  --navy-500: #2F5389;
  --navy-600: #1E3F72;
  --navy-700: #163466;
  --navy-800: #0F2B5B;
  --navy-900: #0A1D3E;
  --navy-950: #071430;

  /* ---------- 色阶：琥珀金（品牌强调色 = 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: #E8F6EE;
  --success-500: #22A06B;
  --success-700: #16714A;
  --danger-50: #FDEDEC;
  --danger-500: #E5484D;
  --danger-700: #B42318;

  /* ================= 语义变量：浅色（默认） ================= */
  /* 对比度（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(--navy-800);         /* 标题 */
  --link: var(--navy-500);
  --link-hover: var(--navy-700);

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

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

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

  --option-selected-bg: var(--navy-50);
  --option-selected-border: var(--navy-800);
  --correct-bg: var(--success-50);
  --correct-border: var(--success-500);
  --correct-text: var(--success-700);
  --wrong-bg: var(--danger-50);
  --wrong-border: var(--danger-500);
  --wrong-text: var(--danger-700);

  --progress-track: var(--paper-150);
  --progress-fill: var(--amber-400);

  --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(--navy-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;
}

/* ================= 语义变量：深色 ================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1530;
    --surface: #13213F;
    --surface-muted: #1A2B4D;
    --border: #2A3C60;
    --border-strong: #5A6E95;

    --text: #E6EBF3;
    --text-muted: #A7B2C6;
    --text-subtle: #8592AA;
    --heading: #FFFFFF;
    --link: #8FB2EC;
    --link-hover: #B9D0F5;

    --primary: var(--navy-500);
    --primary-hover: var(--navy-400);
    --on-primary: #FFFFFF;

    --accent: var(--amber-400);
    --accent-hover: var(--amber-300);
    --on-accent: var(--navy-900);
    --accent-soft: #3A2E17;
    --accent-text: var(--amber-300);

    --focus-ring: #8FB2EC;

    --option-selected-bg: #1E3561;
    --option-selected-border: #8FB2EC;
    --correct-bg: #0F3A2B;
    --correct-border: #34B37A;
    --correct-text: #4ACB8A;
    --wrong-bg: #3D1C24;
    --wrong-border: #E5484D;
    --wrong-text: #F28B82;

    --progress-track: #22355C;
    --progress-fill: var(--amber-400);

    --header-bg: #0F1C38;
    --figure-bg: #FFFFFF;
    --footer-bg: #071026;
    --on-footer: #A7B2C6;
    --highlight: color-mix(in srgb, var(--amber-400) 40%, transparent); /* 半透明金，白字压在上面 7.6:1 */
    --shadow-paper: 0 30px 60px -20px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0B1530;
  --surface: #13213F;
  --surface-muted: #1A2B4D;
  --border: #2A3C60;
  --border-strong: #5A6E95;
  --text: #E6EBF3;
  --text-muted: #A7B2C6;
  --text-subtle: #8592AA;
  --heading: #FFFFFF;
  --link: #8FB2EC;
  --link-hover: #B9D0F5;
  --primary: var(--navy-500);
  --primary-hover: var(--navy-400);
  --on-primary: #FFFFFF;
  --accent: var(--amber-400);
  --accent-hover: var(--amber-300);
  --on-accent: var(--navy-900);
  --accent-soft: #3A2E17;
  --accent-text: var(--amber-300);
  --focus-ring: #8FB2EC;
  --option-selected-bg: #1E3561;
  --option-selected-border: #8FB2EC;
  --correct-bg: #0F3A2B;
  --correct-border: #34B37A;
  --correct-text: #4ACB8A;
  --wrong-bg: #3D1C24;
  --wrong-border: #E5484D;
  --wrong-text: #F28B82;
  --progress-track: #22355C;
  --progress-fill: var(--amber-400);
  --header-bg: #0F1C38;
  --figure-bg: #FFFFFF;
  --footer-bg: #071026;
  --on-footer: #A7B2C6;
  --highlight: color-mix(in srgb, var(--amber-400) 40%, transparent);
  --shadow-paper: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* ---------- 字体 ---------- */
:root {
  --font-sans: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", Tahoma, sans-serif;
}