/* 全站共用的设计变量。颜色、字体、字号、间距、圆角、阴影只在这里定义，页面 CSS 只引用变量。
   取值与对比度依据见 docs/standards/ui-style.md；新增颜色必须先改那份文档。 */
:root {
  /* 颜色：十六进制值与 ui-style.md 的角色表一一对应（test-ui 会核对） */
  --c-primary: #4355FF;       /* 主色：按钮、选中、进度；配白字 */
  --c-primary-deep: #423FD8;  /* 主色深：悬停、按下、链接文字 */
  --c-highlight: #98E3FF;     /* 高亮底色：例句里变化的词块；只放 #131313 文字 */
  --c-bg: #F6F7FB;            /* 页面背景 */
  --c-card: #FFFFFF;          /* 卡片、底部面板 */
  --c-line: #E9E9E9;          /* 分隔线、装饰性边框 */
  --c-line-strong: #C1C1C1;   /* 较强边框（装饰性，低于 3:1，不能作为唯一识别依据） */
  --c-text: #131313;          /* 主文字 */
  --c-text-2: #4D4D4D;        /* 次要文字 */
  --c-disabled: #AEA9BA;      /* 禁用状态的文字与图标，只用于禁用 */
  --c-ok: #009E36;            /* 正确：图标、边框、浅色底 */
  --c-ok-text: #00892F;       /* 正确：文字（白底 4.55:1） */
  --c-ok-deep: #00822C;       /* 正确：浅灰底 #F6F7FB 上的文字（第 9 级补上的词；白底 4.97:1，#F6F7FB 上 4.64:1） */
  --c-bad: #D20032;           /* 错误：文字、图标、边框 */
  --c-warn: #EA7F00;          /* 提示：只做底色，上面放 #131313 文字 */
  --c-warn-text: #B26100;     /* 警示：白底上的文字或图标（4.56:1） */
  --c-yellow: #FFCD1F;        /* 首页：轮播第三张、听力模块的底色；取自 Quizlet 首页「测试」方框；只放 #131313 文字 */
  --c-pink: #FDD2CA;          /* 首页：口语模块的底色；取自 Quizlet 首页「配对」方框；只放 #131313 文字 */
  --c-tint: #EEF0FF;          /* 首页：句型序号圆底、句型模块小图标底；上面放主色 #4355FF */

  /* 由上面的颜色按固定比例混白得到的浅底，不是新颜色 */
  --c-ok-tint: color-mix(in srgb, var(--c-ok) 8%, #FFFFFF);
  --c-bad-tint: color-mix(in srgb, var(--c-bad) 8%, #FFFFFF);
  --c-warn-tint: color-mix(in srgb, var(--c-warn) 25%, #FFFFFF); /* 「样例数据」小标签的浅橙底，上面放 #131313 */

  /* 字体：只用系统字体栈，不加载任何在线字体 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  /* 字号层级（最小 14px）。练习页英文句子 17px / 中文译文 15px（手机）；电脑 18px / 16px，见下方媒体查询与 ui-style.md 第 3 节。
     依据：手机英文 17px = Apple HIG 的正文 Body 17pt，百词斩例句实测约 16.5dp */
  --fs-sentence: 17px;
  --fs-gloss: 15px;
  --fw-regular: 400;
  --fs-word: 30px;      /* 单词页的单词大字（设计稿 words-design.html），加粗 800，行高 38px */
  --fs-title: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fw-bold: 700;

  /* 间距（4px 的倍数） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --pad-x: var(--sp-4);

  /* 圆角 */
  --r-btn: 12px;
  --r-card: 16px;
  --r-img: 12px;
  --r-pill: 999px;

  /* 阴影（用主文字色的透明度）：0 档是卡片的静止状态，几乎看不见；1、2 档用于浮起与悬停 */
  --shadow-0: 0 1px 3px rgba(19, 19, 19, .05);
  --shadow-1: 0 1px 2px rgba(19, 19, 19, .06), 0 2px 8px rgba(19, 19, 19, .06);
  --shadow-2: 0 2px 4px rgba(19, 19, 19, .08), 0 8px 24px rgba(19, 19, 19, .10);

  /* 点按区下限：WCAG 2.5.5 与 Apple HIG 的 44 */
  --tap: 44px;
}

/* 电脑与横屏（宽大于高、且宽度 ≥ 768）：与 practice.css 里「左右两栏」是同一个条件 */
@media (min-width: 768px) and (orientation: landscape) {
  :root { --fs-sentence: 18px; --fs-gloss: 16px; }
}

@media (max-width: 360px) {
  :root { --pad-x: var(--sp-2); } /* 320 宽：内边距收到 8px，让图片尽量大 */
}