/**
 * 英语兔 · colors_and_type.css (v2)
 *
 * Semantic aliases + type-ramp classes + prose mapping. Pull this in alongside
 * tokens.css to get a ready-to-use, branded surface:
 *
 *   <link rel="stylesheet" href="tokens.css" />
 *   <link rel="stylesheet" href="colors_and_type.css" />
 *
 * 字体不走 CDN：正文是系统字体栈（零下载），衬线切片由 tokens.css 引入的
 * fonts/fonts.css 提供。
 */

:root {
  /* ============================================================
   * Semantic colour aliases
   * ============================================================ */
  --bg-1: var(--yyt-color-neutral-0);          /* page bg */
  --bg-2: var(--yyt-color-neutral-50);         /* section bg */
  --bg-3: var(--yyt-color-neutral-100);        /* tonal block */
  --bg-inverse: var(--yyt-color-brand-black);

  --fg-1: var(--yyt-color-neutral-1000);       /* primary text */
  --fg-2: var(--yyt-color-neutral-700);        /* secondary text */
  --fg-3: var(--yyt-color-neutral-500);        /* tertiary text */
  --fg-muted: var(--yyt-color-neutral-400);
  --fg-disabled: var(--yyt-color-neutral-200);
  --fg-inverse: var(--yyt-color-brand-white);

  --border-1: var(--yyt-color-neutral-100);    /* default hairline */
  --border-2: var(--yyt-color-neutral-200);    /* input border */
  --border-strong: var(--yyt-color-brand-black);

  --accent: var(--yyt-color-brand-green);      /* primary accent · 品牌绿 */
  --accent-hover: var(--yyt-color-brand-green-hover);
  --accent-active: var(--yyt-color-brand-green-active);
  --accent-2: var(--yyt-color-brand-orange);   /* secondary · 品牌橙 */
  --accent-2-hover: var(--yyt-color-brand-orange-hover);
  --accent-2-active: var(--yyt-color-brand-orange-active);
  --accent-on: var(--yyt-color-brand-white);   /* text on accent */

  --link: var(--yyt-color-link);
  --link-hover: var(--yyt-color-link-hover);
  --link-visited: var(--yyt-color-link-visited);

  --success: var(--yyt-color-success);
  --warning: var(--yyt-color-warning);
  --error: var(--yyt-color-error);
  --info: var(--yyt-color-info);

  --highlight-1: var(--yyt-color-highlight-green);
  --highlight-2: var(--yyt-color-highlight-orange);
  --highlight-3: var(--yyt-color-highlight-yellow);
  --highlight-4: var(--yyt-color-highlight-purple);
  --highlight-5: var(--yyt-color-highlight-teal);
  --highlight-6: var(--yyt-color-highlight-magenta);
  --highlight-error: var(--yyt-color-highlight-error);

  --focus-ring: var(--yyt-focus-ring);

  /* ============================================================
   * Type families · semantic
   * ============================================================ */
  --serif-display: var(--yyt-font-serif);
  --sans-body: var(--yyt-font-sans);
  --mono-phonetic: var(--yyt-font-phonetic);
  --mono-code: var(--yyt-font-mono);
  --decorative: var(--yyt-font-decorative);
}

/* ============================================================
 * Type-ramp classes · 一档一个 class，五件套成套生效
 * ============================================================ */
.yyt-type-code-01    { font: var(--yyt-type-code-01-weight) var(--yyt-type-code-01-size)/var(--yyt-type-code-01-line) var(--yyt-type-code-01-font); letter-spacing: var(--yyt-type-code-01-tracking); }
.yyt-type-label-01   { font: var(--yyt-type-label-01-weight) var(--yyt-type-label-01-size)/var(--yyt-type-label-01-line) var(--yyt-type-label-01-font); letter-spacing: var(--yyt-type-label-01-tracking); }
.yyt-type-body-01    { font: var(--yyt-type-body-01-weight) var(--yyt-type-body-01-size)/var(--yyt-type-body-01-line) var(--yyt-type-body-01-font); letter-spacing: var(--yyt-type-body-01-tracking); }
.yyt-type-body-02    { font: var(--yyt-type-body-02-weight) var(--yyt-type-body-02-size)/var(--yyt-type-body-02-line) var(--yyt-type-body-02-font); letter-spacing: var(--yyt-type-body-02-tracking); }
.yyt-type-body-03    { font: var(--yyt-type-body-03-weight) var(--yyt-type-body-03-size)/var(--yyt-type-body-03-line) var(--yyt-type-body-03-font); letter-spacing: var(--yyt-type-body-03-tracking); }
.yyt-type-heading-01 { font: var(--yyt-type-heading-01-weight) var(--yyt-type-heading-01-size)/var(--yyt-type-heading-01-line) var(--yyt-type-heading-01-font); letter-spacing: var(--yyt-type-heading-01-tracking); }
.yyt-type-heading-02 { font: var(--yyt-type-heading-02-weight) var(--yyt-type-heading-02-size)/var(--yyt-type-heading-02-line) var(--yyt-type-heading-02-font); letter-spacing: var(--yyt-type-heading-02-tracking); }
.yyt-type-heading-03 { font: var(--yyt-type-heading-03-weight) var(--yyt-type-heading-03-size)/var(--yyt-type-heading-03-line) var(--yyt-type-heading-03-font); letter-spacing: var(--yyt-type-heading-03-tracking); }
.yyt-type-display-01 { font: var(--yyt-type-display-01-weight) var(--yyt-type-display-01-size)/var(--yyt-type-display-01-line) var(--yyt-type-display-01-font); letter-spacing: var(--yyt-type-display-01-tracking); }
.yyt-type-display-02 { font: var(--yyt-type-display-02-weight) var(--yyt-type-display-02-size)/var(--yyt-type-display-02-line) var(--yyt-type-display-02-font); letter-spacing: var(--yyt-type-display-02-tracking); }
.yyt-type-display-03 { font: var(--yyt-type-display-03-weight) var(--yyt-type-display-03-size)/var(--yyt-type-display-03-line) var(--yyt-type-display-03-font); letter-spacing: var(--yyt-type-display-03-tracking); }
.yyt-type-display-04 { font: var(--yyt-type-display-04-weight) var(--yyt-type-display-04-size)/var(--yyt-type-display-04-line) var(--yyt-type-display-04-font); letter-spacing: var(--yyt-type-display-04-tracking); }

/* 纯中文标题不加负字距（负字距只为拉丁字形设计） */
.yyt-type-display-01:lang(zh), .yyt-type-display-02:lang(zh),
.yyt-type-display-03:lang(zh), .yyt-type-display-04:lang(zh) { letter-spacing: 0; }

.yyt-phonetic { font-family: var(--mono-phonetic); }

/* ============================================================
 * Prose · 一键排版容器
 * HTML 语义映射：h1→display-01 · h2→heading-03 · h3→heading-02 ·
 * h4→heading-01 · p/li→body-02 · small/figcaption→label-01
 * 标题节奏：上间距 ≥ 2× 下间距（靠近自己的内容）
 * ============================================================ */
.yyt-prose {
  font: var(--yyt-type-body-02-weight) var(--yyt-type-body-02-size)/var(--yyt-type-body-02-line) var(--yyt-type-body-02-font);
  color: var(--fg-1);
  background: var(--bg-1);
  max-width: var(--yyt-measure);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.yyt-prose h1 {
  font: var(--yyt-type-display-01-weight) var(--yyt-type-display-01-size)/var(--yyt-type-display-01-line) var(--yyt-type-display-01-font);
  letter-spacing: var(--yyt-type-display-01-tracking);
  margin: 0 0 var(--yyt-space-6);
}
.yyt-prose h2 {
  font: var(--yyt-type-heading-03-weight) var(--yyt-type-heading-03-size)/var(--yyt-type-heading-03-line) var(--yyt-type-heading-03-font);
  margin: var(--yyt-space-12) 0 var(--yyt-space-4);
}
.yyt-prose h3 {
  font: var(--yyt-type-heading-02-weight) var(--yyt-type-heading-02-size)/var(--yyt-type-heading-02-line) var(--yyt-type-heading-02-font);
  margin: var(--yyt-space-8) 0 var(--yyt-space-3);
}
.yyt-prose h4 {
  font: var(--yyt-type-heading-01-weight) var(--yyt-type-heading-01-size)/var(--yyt-type-heading-01-line) var(--yyt-type-heading-01-font);
  margin: var(--yyt-space-6) 0 var(--yyt-space-2);
}
.yyt-prose p, .yyt-prose li { margin: 0 0 var(--yyt-space-4); }
.yyt-prose li { margin-bottom: var(--yyt-space-2); }
.yyt-prose small, .yyt-prose figcaption {
  font: var(--yyt-type-label-01-weight) var(--yyt-type-label-01-size)/var(--yyt-type-label-01-line) var(--yyt-type-label-01-font);
  letter-spacing: var(--yyt-type-label-01-tracking);
  color: var(--fg-3);
}
.yyt-prose code {
  font: var(--yyt-type-code-01-weight) var(--yyt-type-code-01-size)/var(--yyt-type-code-01-line) var(--yyt-type-code-01-font);
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: var(--yyt-radius-sm);
}
.yyt-prose a { color: var(--link); text-underline-offset: 2px; }
.yyt-prose a:hover { color: var(--link-hover); }
.yyt-prose a:visited { color: var(--link-visited); }

/* ============================================================
 * Highlight pills（网页教学内容标记 · ≤3 色/屏）
 * ============================================================ */
.yyt-hl-green   { background: var(--highlight-1); color: #000; padding: 0 .15em; }
.yyt-hl-orange  { background: var(--highlight-2); color: #000; padding: 0 .15em; }
.yyt-hl-yellow  { background: var(--highlight-3); color: #000; padding: 0 .15em; }
.yyt-hl-purple  { background: var(--highlight-4); color: #fff; padding: 0 .15em; }
.yyt-hl-teal    { background: var(--highlight-5); color: #fff; padding: 0 .15em; }
.yyt-hl-magenta { background: var(--highlight-6); color: #fff; padding: 0 .15em; }
.yyt-hl-error   { background: var(--highlight-error); color: #fff; padding: 0 .15em; }
.yyt-strike-error { text-decoration: line-through; color: var(--yyt-color-error-text-strike); }

/* ============================================================
 * Focus · 所有可交互元素的键盘焦点环
 * ============================================================ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}