/**
 * 英语兔 Design Tokens · CSS Variables
 * Version: 2.0.0 (Web/App only · IBM Carbon-inspired type ramp)
 * Last Updated: 2026-07
 *
 * 本文件由 tokens.json 派生，二者必须保持同步。
 * 任何对色值、字阶、间距的修改请同时更新 tokens.json。
 *
 * v2 要点：
 * · 字阶（type ramp）取代独立的字号表 + 行高表——每档绑定 字体/字重/字号/行高/字距，
 *   禁止自由组合。行高全部为 4px 的倍数，垂直节奏由此产生。
 * · 正文使用系统字体栈（零下载）；品牌衬线 Noto Serif SC 900 只用于 display 档，
 *   以 unicode-range 切片 woff2 加载（见 fonts/fonts.css）。
 * · 交互态颜色为预计算 token，不再用「变暗 5%」口头规则。
 */

/* Local @font-face bindings (sliced webfonts). */
@import url("fonts/fonts.css");

:root {
  /* ============================================================
   * 1. 品牌色（Brand Colors）
   * ============================================================ */
  --yyt-color-brand-black: #000000;
  --yyt-color-brand-white: #FFFFFF;
  --yyt-color-brand-green: #66993E;   /* 品牌主色 */
  --yyt-color-brand-orange: #FF9933;  /* 品牌副色 */

  /* ============================================================
   * 2. 标记色板（Highlight · 网页教学内容的标记色，≤3 色/屏）
   * ============================================================ */
  --yyt-color-highlight-green: #66993E;   /* 优先级 1 · 配黑字 */
  --yyt-color-highlight-orange: #FF9933;  /* 优先级 2 · 配黑字 */
  --yyt-color-highlight-yellow: #FFFF00;  /* 优先级 3 · 配黑字 */
  --yyt-color-highlight-purple: #75147C;  /* 优先级 4 · 文字反白 */
  --yyt-color-highlight-teal: #377E7F;    /* 优先级 5 · 文字反白 */
  --yyt-color-highlight-magenta: #EA33F7; /* 优先级 6 · 文字反白 */
  --yyt-color-highlight-error: #EA3323;   /* 仅错误语义，禁止装饰 · 文字反白 */

  /* ============================================================
   * 3. 中性色（Neutral · 9 级灰阶）
   * ============================================================ */
  --yyt-color-neutral-0: #FFFFFF;     /* 主背景 */
  --yyt-color-neutral-50: #F7F7F7;    /* 浅背景、分组 */
  --yyt-color-neutral-100: #EEEEEE;   /* 分割线、占位 */
  --yyt-color-neutral-200: #D9D9D9;   /* 禁用文字、输入框边框 */
  --yyt-color-neutral-400: #A6A6A6;   /* 弱化文字 */
  --yyt-color-neutral-500: #7A7A7A;   /* 次级图标、辅助文字 */
  --yyt-color-neutral-700: #3D3D3D;   /* 二级正文 */
  --yyt-color-neutral-900: #1A1A1A;   /* 强对比正文 */
  --yyt-color-neutral-1000: #000000;  /* 主文字 */

  /* ============================================================
   * 4. 语义色（Semantic）
   * ============================================================ */
  --yyt-color-success: #66993E;
  --yyt-color-success-subtle: #E8F2DD;
  --yyt-color-warning: #FF9933;
  --yyt-color-warning-subtle: #FFE9D2;
  --yyt-color-error: #EA3323;
  --yyt-color-error-subtle: #FBDDD9;
  --yyt-color-info: #377E7F;
  --yyt-color-info-subtle: #DCE8E8;
  --yyt-color-link: #0066CC;
  --yyt-color-link-visited: #75147C;
  --yyt-color-error-text-strike: #C00000;  /* 错句贯穿划线时的文字色 */

  /* ============================================================
   * 5. 交互态（Interaction · 预计算，替代「变暗 5%」）
   * ============================================================ */
  --yyt-color-brand-green-hover: #5A8737;
  --yyt-color-brand-green-active: #4F7830;
  --yyt-color-brand-orange-hover: #EB8A26;
  --yyt-color-brand-orange-active: #D67B1F;
  --yyt-color-brand-black-hover: #262626;   /* 黑底按钮 hover（略提亮） */
  --yyt-color-brand-black-active: #0D0D0D;
  --yyt-color-error-hover: #D02C1E;
  --yyt-color-error-active: #B62518;
  --yyt-color-link-hover: #0052A3;
  --yyt-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #66993E; /* 键盘焦点环 · 无障碍必需 */

  /* ============================================================
   * 6. 字体族（Font Families）
   * · 正文 = 系统字体栈，零下载；品牌感由衬线 display 档独家承担
   * ============================================================ */
  --yyt-font-serif: "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", "SimSun", serif;
  --yyt-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
                   "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei",
                   "Noto Sans SC", sans-serif;
  --yyt-font-phonetic: "Lucida Sans Unicode", "Arial Unicode MS", sans-serif;
  --yyt-font-decorative: "ZCOOL KuaiLe", sans-serif; /* 装饰 · 按需引入 fonts/fonts-decorative.css */
  --yyt-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ============================================================
   * 7. 字重（Font Weight）
   * ============================================================ */
  --yyt-font-weight-light: 300;    /* 可选 · 大字号下的轻盈变体，正文禁用 */
  --yyt-font-weight-regular: 400;
  --yyt-font-weight-medium: 500;
  --yyt-font-weight-bold: 700;
  --yyt-font-weight-black: 900;    /* 仅衬线 display 档 */

  /* ============================================================
   * 8. 字阶（Type Ramp · 核心资产）
   * 每档 = family / weight / size / line / tracking 五件套，成套使用。
   * 行高均为 4px 倍数（rem，根字号 16px）。
   * 负字距只作用于拉丁字符为主的标题；纯中文标题 tracking 取 0。
   * ============================================================ */

  /* code-01 · 代码 / 音标 · 12/16 */
  --yyt-type-code-01-font: var(--yyt-font-mono);
  --yyt-type-code-01-weight: 400;
  --yyt-type-code-01-size: 0.75rem;
  --yyt-type-code-01-line: 1rem;
  --yyt-type-code-01-tracking: 0;

  /* label-01 · 标签 / 辅助说明 / 图注 · 12/16 */
  --yyt-type-label-01-font: var(--yyt-font-sans);
  --yyt-type-label-01-weight: 400;
  --yyt-type-label-01-size: 0.75rem;
  --yyt-type-label-01-line: 1rem;
  --yyt-type-label-01-tracking: 0.02em;

  /* body-01 · 紧凑正文 / UI 控件文字 · 14/20 */
  --yyt-type-body-01-font: var(--yyt-font-sans);
  --yyt-type-body-01-weight: 400;
  --yyt-type-body-01-size: 0.875rem;
  --yyt-type-body-01-line: 1.25rem;
  --yyt-type-body-01-tracking: 0;

  /* body-02 · 默认正文 · 16/24 */
  --yyt-type-body-02-font: var(--yyt-font-sans);
  --yyt-type-body-02-weight: 400;
  --yyt-type-body-02-size: 1rem;
  --yyt-type-body-02-line: 1.5rem;
  --yyt-type-body-02-tracking: 0;

  /* body-03 · 阅读型长文正文 · 18/28 */
  --yyt-type-body-03-font: var(--yyt-font-sans);
  --yyt-type-body-03-weight: 400;
  --yyt-type-body-03-size: 1.125rem;
  --yyt-type-body-03-line: 1.75rem;
  --yyt-type-body-03-tracking: 0;

  /* heading-01 · 小标题（与正文同号，靠字重区分）· 16/24 */
  --yyt-type-heading-01-font: var(--yyt-font-sans);
  --yyt-type-heading-01-weight: 700;
  --yyt-type-heading-01-size: 1rem;
  --yyt-type-heading-01-line: 1.5rem;
  --yyt-type-heading-01-tracking: 0;

  /* heading-02 · 卡片 / 区块标题 · 20/28 */
  --yyt-type-heading-02-font: var(--yyt-font-sans);
  --yyt-type-heading-02-weight: 700;
  --yyt-type-heading-02-size: 1.25rem;
  --yyt-type-heading-02-line: 1.75rem;
  --yyt-type-heading-02-tracking: 0;

  /* heading-03 · 页内大标题 · 24/32 */
  --yyt-type-heading-03-font: var(--yyt-font-sans);
  --yyt-type-heading-03-weight: 700;
  --yyt-type-heading-03-size: 1.5rem;
  --yyt-type-heading-03-line: 2rem;
  --yyt-type-heading-03-tracking: 0;

  /* display-01 · 页面主标题（衬线出场线：≥32px 才允许 Serif 900）· 32/40 */
  --yyt-type-display-01-font: var(--yyt-font-serif);
  --yyt-type-display-01-weight: 900;
  --yyt-type-display-01-size: 2rem;
  --yyt-type-display-01-line: 2.5rem;
  --yyt-type-display-01-tracking: -0.01em;

  /* display-02 · 落地页标题 · 42/52 */
  --yyt-type-display-02-font: var(--yyt-font-serif);
  --yyt-type-display-02-weight: 900;
  --yyt-type-display-02-size: 2.625rem;
  --yyt-type-display-02-line: 3.25rem;
  --yyt-type-display-02-tracking: -0.015em;

  /* display-03 · Hero 主视觉 · 56/64 */
  --yyt-type-display-03-font: var(--yyt-font-serif);
  --yyt-type-display-03-weight: 900;
  --yyt-type-display-03-size: 3.5rem;
  --yyt-type-display-03-line: 4rem;
  --yyt-type-display-03-tracking: -0.02em;

  /* display-04 · 超大陈述 · 72/80 */
  --yyt-type-display-04-font: var(--yyt-font-serif);
  --yyt-type-display-04-weight: 900;
  --yyt-type-display-04-size: 4.5rem;
  --yyt-type-display-04-line: 5rem;
  --yyt-type-display-04-tracking: -0.02em;

  /* ============================================================
   * 9. 间距（Spacing · 4px 基底，名字 × 4 = 像素值）
   * ============================================================ */
  --yyt-space-0: 0px;
  --yyt-space-1: 4px;
  --yyt-space-2: 8px;
  --yyt-space-3: 12px;
  --yyt-space-4: 16px;
  --yyt-space-6: 24px;
  --yyt-space-8: 32px;
  --yyt-space-10: 40px;
  --yyt-space-12: 48px;
  --yyt-space-16: 64px;
  --yyt-space-20: 80px;
  --yyt-space-24: 96px;
  --yyt-space-32: 128px;

  /* ============================================================
   * 10. 布局（Layout）
   * ============================================================ */
  --yyt-container: 1120px;  /* 内容列最大宽度；超宽屏靠留白收窄，不拉大字号 */
  --yyt-measure: 36em;      /* 正文行长上限 ≈ 中文 28–38 字/行 */

  /* ============================================================
   * 10b. 控件与浮层尺寸（Control & Overlay sizing）
   * 控件高度沿用按钮/输入框的 32/40/48；以下为其余复用尺寸。
   * ============================================================ */
  --yyt-control-height-toggle: 36px;   /* Toggle / Segmented，比主控件小一档 */
  --yyt-otp-cell-w: 44px;              /* 验证码单格宽 */
  --yyt-otp-cell-h: 52px;              /* 验证码单格高 */
  --yyt-overlay-dropdown-min: 200px;   /* 下拉菜单 / Popover 最小宽 */
  --yyt-overlay-calendar: 280px;       /* 日历面板宽 */
  --yyt-overlay-drawer: 380px;         /* 抽屉 Sheet 宽 */
  --yyt-overlay-command: 560px;        /* 命令面板 ⌘K 宽 */

  /* ============================================================
   * 11. 圆角（Radius）
   * ============================================================ */
  --yyt-radius-none: 0px;
  --yyt-radius-sm: 4px;     /* 标签、代码片段 */
  --yyt-radius-md: 8px;     /* 控件默认：按钮、输入框 */
  --yyt-radius-lg: 12px;    /* 卡片 */
  --yyt-radius-xl: 16px;    /* 弹窗 */
  --yyt-radius-full: 9999px; /* 胶囊 / 圆形 */

  /* ============================================================
   * 12. 阴影（Shadow · 仅 UI 层级提示，永不装饰）
   * ============================================================ */
  --yyt-shadow-none: none;
  --yyt-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --yyt-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --yyt-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.2);

  /* ============================================================
   * 13. 动效时长（Motion · Duration）
   * ============================================================ */
  --yyt-duration-instant: 50ms;      /* @kind other */
  --yyt-duration-fast: 150ms;        /* @kind other */
  --yyt-duration-base: 250ms;        /* @kind other */
  --yyt-duration-slow: 450ms;        /* @kind other */
  --yyt-duration-extra-slow: 700ms;  /* @kind other */

  /* ============================================================
   * 14. 缓动曲线（Motion · Easing）
   * ============================================================ */
  --yyt-ease-linear: linear;                              /* @kind other */
  --yyt-ease-in: cubic-bezier(0.4, 0, 1, 1);              /* @kind other */
  --yyt-ease-out: cubic-bezier(0, 0, 0.2, 1);             /* @kind other */
  --yyt-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);        /* @kind other */
  --yyt-ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  /* ============================================================
   * 15. 层级（Z-Index）
   * ============================================================ */
  --yyt-z-base: 0;         /* @kind other */
  --yyt-z-sticky: 100;     /* @kind other */
  --yyt-z-dropdown: 1000;  /* @kind other */
  --yyt-z-modal: 2000;     /* @kind other */
  --yyt-z-toast: 3000;     /* @kind other */
  --yyt-z-tooltip: 4000;   /* @kind other */

  /* ============================================================
   * 16. 响应式断点（Breakpoints · 用于 @media 查询参考）
   * 注：CSS 变量本身不能在 @media 中直接使用，仅作记录
   * ============================================================ */
  --yyt-bp-mobile: 0px;
  --yyt-bp-tablet: 768px;
  --yyt-bp-desktop: 1024px;
  --yyt-bp-wide: 1440px;
}


/* ================================================================
 * 17. 工具类（Utility Classes）
 * ================================================================ */

/* 文字颜色 */
.yyt-text-primary  { color: var(--yyt-color-neutral-1000); }
.yyt-text-secondary{ color: var(--yyt-color-neutral-700); }
.yyt-text-tertiary { color: var(--yyt-color-neutral-500); }
.yyt-text-muted    { color: var(--yyt-color-neutral-400); }
.yyt-text-disabled { color: var(--yyt-color-neutral-200); }

/* 标记 · 黑字保留版（绿、橙、黄）*/
.yyt-highlight-green  { background-color: var(--yyt-color-highlight-green); color: var(--yyt-color-brand-black); }
.yyt-highlight-orange { background-color: var(--yyt-color-highlight-orange); color: var(--yyt-color-brand-black); }
.yyt-highlight-yellow { background-color: var(--yyt-color-highlight-yellow); color: var(--yyt-color-brand-black); }

/* 标记 · 文字反白版（紫、青、品红、错误红）*/
.yyt-highlight-purple  { background-color: var(--yyt-color-highlight-purple); color: var(--yyt-color-brand-white); }
.yyt-highlight-teal    { background-color: var(--yyt-color-highlight-teal); color: var(--yyt-color-brand-white); }
.yyt-highlight-magenta { background-color: var(--yyt-color-highlight-magenta); color: var(--yyt-color-brand-white); }
.yyt-highlight-error   { background-color: var(--yyt-color-highlight-error); color: var(--yyt-color-brand-white); }

/* 错句划线 */
.yyt-text-strike-error {
  text-decoration: line-through;
  color: var(--yyt-color-error-text-strike);
}


/* ================================================================
 * 18. 减少动效偏好支持（无障碍）
 * ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 暗色模式：待品牌方决定是否启用（原则：反相灰阶、保持品牌色板）。 */