/* ============================================================
   theme-learn.css — 苦旅（Learn）站点主题映射
   依据：DESIGN-SYSTEM.md §1.3（Learn = 天空蓝 + 阳光黄 / 成长 · 行动）
   ------------------------------------------------------------
   只做「槽位 → 本站色」的映射，不写任何布局与组件规则。
   组件层（components.css）读取 --ui-* / --brand-* 即可自动适配本站。
   必须在 tokens.css 之后加载。
   ============================================================ */

:root{
  /* 品牌槽位 */
  --brand:var(--c-learn-600);           /* #2A6FB5 主强调 */
  --brand-ink:#FFFFFF;
  --brand-soft:rgba(42,111,181,.12);
  --brand-2:var(--c-sun-yellow);        /* 次强调：阳光黄 */

  /* 兼容令牌：download.html / privacy.html 共用 learn.css，需要这一组才能
     与 learn.html 的「暖白阳光」外观一致。
     注意：learn.css 的 :root 定义了一批令牌（--ink-deep / --text-c / --pink…），
     但只有 learn-sunny.css 给出浅色取值；只加载 learn.css 的页面
     （download.html / privacy.html）会因此拿到深色或未定义值 —— 例如
     learn.css 的 body.learn{background:var(--ink-deep)} 就因 --ink-deep 未定义
     而整条声明失效。本文件必须给出完整取值，页面才能不依赖覆盖层独立成立。 */
  --bg:var(--c-warm-white);
  --bg-2:#FFF6E2;
  --surface:rgba(24,32,42,.045);
  --surface-2:rgba(24,32,42,.08);
  --ink:var(--c-ink-900);
  --ink-deep:var(--c-ink-900);
  --ink-soft-c:#3A4350;
  --ink-soft:rgba(24,32,42,.72);
  /* 弱文字（页脚版权/版本号）原 50% 透明度实测 3.18:1，提高到 62% 达 AA */
  --ink-faint:rgba(24,32,42,.62);
  --text-c:var(--c-ink-900);
  --muted-c:var(--c-ink-500);
  --paper:#FFFDF7;
  --pink:var(--c-learn-600);
  --pink-bright:var(--c-sky-blue);
  --periwinkle:var(--c-sky-blue);
  /* 可读性修正（对比度审计）：头像底 #B7976C 等浅色配白字仅 1.02–3.5:1，
     NEW 徽章 #1FA97C 在暖白底 2.94:1。此处给出同色相深阶，用于正文级小字。 */
  --sage:#0F7A57;
  --c-job-clay:#8A4F32;
  --c-job-moss:#4A5236;
  --c-job-sand:#7A6244;
  --c-job-olive:#414A32;
  --c-job-ink:#3A3428;
  --clay:#E8773C;
  --moss:#2E9E63;
  --accent:var(--c-learn-600);
  --accent-2:var(--c-learn-700);
  --accent-ink:#FFFFFF;
  --line:rgba(24,32,42,.12);
  --line-strong:rgba(24,32,42,.2);

  /* 表面与描边 */
  --ui-bg:var(--c-warm-white);
  --ui-bg-soft:#FFF6E2;
  --ui-surface:rgba(255,255,255,.72);
  --ui-surface-2:rgba(255,255,255,.94);
  --ui-line:rgba(24,32,42,.12);
  --ui-line-strong:rgba(24,32,42,.2);

  /* 品牌渐变（hero 标题 / 强调字） */
  --ui-grad:linear-gradient(120deg,var(--c-sky-blue) 0%,var(--c-sun-yellow) 100%);
  --ui-grad-ink:linear-gradient(92deg,var(--c-learn-700),var(--c-travel-600));
}

/* 页面底色与文字色显式声明：learn.css 的 body.learn 规则只设了
   background:var(--ink-deep)，未设 color（依赖 base.css 的 body 规则）。
   这里用更高特异性补齐，确保「只加载 learn.css」的页面也有完整浅色外观。 */
body.learn{
  background:var(--bg);
  color:var(--ink);
}


/* ============================================================
   可读性修正（依据 .tmp-shots/contrast-audit.cjs 实测）
   ------------------------------------------------------------
   职位卡头像原实现为 background:color-mix(in srgb,var(--c) 82%,transparent)
   + color:#fff，头像底被 18% 透明稀释后趋近页面底色，白字实测仅 1.02–3.5:1。
   这里把 --c 映射到同色相深阶，并让底色不再被稀释。
   ============================================================ */
/* 2026-10-15 修正：上面那版「把 --c 重映射成深阶」的做法**不生效** ——
   --c 是写在行内 style 上的自定义属性，行内优先级高于任何样式表规则，
   所以 .learn-jobs .jcard__ava[style*="#b7976c"]{--c:#7A6244} 永远被行内值压住。
   实测（Playwright 读 computedStyle）头像仍是原色 #b7976c + 白字 = 2.79:1。
   现在改成**不动 --c**，直接把背景和黑色做 color-mix 压暗到可承载白字：
   最浅的 #b7976c 压暗后约 5.4:1，其余更深色只会更高。品牌色相仍然保留。 */
.jcard__ava{
  background:#6b5738;
  background:color-mix(in srgb, var(--c) 65%, #0B0A08 35%);
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
}

/* 2026-10-15：learn.css 里 .icon-button/.ticket-button/.book-card 统一写了 outline:0，
   去掉默认轮廓后没有补替代焦点样式 —— 键盘用户看不到焦点在哪（WCAG 2.4.7）。
   这里补可见焦点环；用 :focus-visible 保证鼠标点击不出现难看的框。 */
.book-card:focus-visible,
.icon-button:focus-visible,
.ticket-button:focus-visible,
.close-button:focus-visible,
.pill:focus-visible{
  outline:3px solid #2f2a24;
  outline-offset:3px;
  border-radius:inherit;
}
html.dark .book-card:focus-visible,
html.dark .icon-button:focus-visible,
html.dark .ticket-button:focus-visible,
html.dark .close-button:focus-visible,
html.dark .pill:focus-visible{
  outline-color:#FFD84D;
}