/* ============================================================
 * theme.css — 双主题地基(tokens 契约正本)
 * ============================================================
 * 拍板(2026-08-25 台账「全站·双主题」):默认跟随系统;toggle 三态
 * (日→夜→跟随系统,localStorage yf-theme);日光版换主色=浓缩咖啡棕。
 *
 * 结构:
 *  · 夜版 tokens 不在这里 —— 留在各页 <style> 的 :root 里(现值即夜版)。
 *  · 日光版 tokens 写两遍:手动锁日([data-theme=light])+ 系统偏好
 *    (@media prefers-color-scheme)。⚠ 两块必须逐字同步,theme-test TH-1 锁死。
 *  · 主题差异化配件(阴影/网格线/徽章描边)一律走 --yf-* 变量,
 *    组件规则只写一遍,值由 tokens 决定。
 *
 * 日光版主色 = 主题黄 #f4c542(09-15 Jack「use the theme」「entire site stays with the theme」推翻浓缩咖啡棕;下面旧的对比度注释留作历史)。纸白底上的字走 --ignite-text/--ignite-display(墨色)+ 标题记号笔,黄块上的字走 --on-ignite。
 * 变量名沿用夜版(--black 在日光下其实是纸白)——只换值不改名,改名记技术债。
 *
 * 2026-08-31 · 对齐品牌指南 §10 Daylight(正本 https://brand.yummyfuture.us,
 * wefunder-pitch/skills/yummy-future-brand/references/full-guidelines.html):
 *  · 中性色全部照搬 §10 —— 纸底/分区底/卡面/墨色由暖棕调改中性调
 *    (#f6f4ef→#faf8f3、#f1eee7→#f4f1e9、#eae6dd→#ebe8e0、#dfd9cd→#e0dcd0、
 *     #171310→#0d0d0c、#2a251f→#1d1d1c;rule/hatch/阴影的墨底同步换成 13,13,12)。
 *  · 三处**不照搬**,原因是实测对比度过不了 WCAG AA(数字均按 WCAG 2.1
 *    相对亮度公式实算,尺子用 #000/#fff=21.00、#767676/#fff=4.54 校验过):
 *      --ignite  §10 给 #c89324,在 #faf8f3 上只有 2.58:1(正文需 4.5,UI 需 3)。
 *                本站 --ignite 被当正文 color 用 474 处,换上去等于全站强调字发虚。
 *                保留 #6b4a2b = 7.50:1。另:台账 2026-08-25「全站·双主题」拍板
 *                写死「日光版不用黄字也不用深金替身」,深金本就在红线内。
 *                ⚠ §10 正文自称 #c89324「约 4.6:1」、#f4c542「约 3.1:1」,实算
 *                分别是 2.58:1 和 1.53:1 —— 指南那两个数字是错的,已回报。
 *      --plasma  §10 给 #b88420 = 3.11:1,不过。保留 #543a20 = 9.88:1。
 *      --signal  §10 给 #5e8e3e = 3.65:1,不过。改用 #28642b —— 原值 #2e7031 在
 *                --steel-2 面上实测只有 4.40:1(mission 的「TODAY」徽章),差 0.1 过不了;
 *                #28642b 在五种日光底色上最低 5.20:1。派生的 signal-border/wash/led 同步。
 *  · --faint 取 .6 不取 §10 的 .46:.46 实测 3.17:1 不过 AA,而 --faint 是
 *    142 处正文 color;.6 = 5.02:1(纸底)/4.79:1(steel 面)最低点也过线。
 *  · --alert 保留 #b3282d(6.07:1):§10 只定义了 --warn #b0533b,本站没有这个变量。
 * ============================================================ */

/* 夜版下的配件默认值(夜版靠描边分层,不用阴影;网格线用白) */
:root {
  --yf-card-shadow: none;
  /* 角色色(Jack 09-15「entire site stays with the theme」):夜版全 = 主题黄,琥珀块上的字 = 黑 */
  --ignite-text: #f4c542;
  --ignite-display: #f4c542;
  --plasma-text: #ffd76a;
  --on-ignite: #0a0a0a;
  --yf-accent-marker: transparent;
  --yf-grid-line: rgba(255, 255, 255, 0.015);
  --yf-accent-glow: rgba(244, 197, 66, 0.18);
  --yf-accent-border: rgba(244, 197, 66, 0.4);
  --yf-signal-border: rgba(163, 217, 119, 0.4);
  --yf-alert-border: rgba(229, 72, 77, 0.4);
  /* 二期·内容六页配件(mission/careers/catering/fridge/software/reserve) */
  --yf-nav-bg: rgba(5, 5, 5, 0.85);
  --yf-pop-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  --yf-hero-grid: rgba(255, 255, 255, 0.04);
  --yf-hero-glow: rgba(244, 197, 66, 0.1);
  --yf-accent-wash: rgba(244, 197, 66, 0.08);
  --yf-accent-wash-2: rgba(244, 197, 66, 0.02);
  --yf-accent-fade: rgba(244, 197, 66, 0.25);
  --yf-signal-wash: rgba(163, 217, 119, 0.07);
  --yf-hatch: rgba(255, 255, 255, 0.022);
  --yf-led-on: rgba(244, 197, 66, 0.55);
  --yf-led-dim: rgba(233, 231, 226, 0.22);
  --yf-led-sig: rgba(163, 217, 119, 0.6);
  --yf-led-off: rgba(233, 231, 226, 0.14);
}

/* ---------- 日光版 tokens · 手动锁日 ---------- */
:root[data-theme="light"] {
  --black: #faf8f3;
  --void: #f4f1e9;
  --carbon: #ffffff;
  --steel: #ebe8e0;
  --steel-2: #e0dcd0;
  --rule: rgba(13, 13, 12, 0.1);
  --rule-2: rgba(13, 13, 12, 0.2);
  --white: #0d0d0c;
  --bone: #1d1d1c;
  --soft: rgba(13, 13, 12, 0.66);
  --faint: rgba(13, 13, 12, 0.6);
  --ignite: #f4c542;
  --plasma: #e3b12c;
  /* 纸白底上黄字看不清:小字/大标题强调词用墨色,大标题强调词下垫一道主题黄记号笔 */
  --ignite-text: #0d0d0c;
  --ignite-display: #0d0d0c;
  --plasma-text: #0d0d0c;
  --on-ignite: #0d0d0c;
  --yf-accent-marker: rgba(244, 197, 66, 0.75);
  --signal: #28642b;
  --alert: #b3282d;
  --yf-card-shadow: 0 1px 2px rgba(13, 13, 12, 0.06), 0 4px 16px rgba(13, 13, 12, 0.06);
  --yf-grid-line: rgba(13, 13, 12, 0.03);
  --yf-accent-glow: rgba(244, 197, 66, 0.16);
  --yf-accent-border: rgba(244, 197, 66, 0.45);
  --yf-signal-border: rgba(40, 100, 43, 0.45);
  --yf-alert-border: rgba(179, 40, 45, 0.45);
  /* 二期·内容六页配件 */
  --yf-nav-bg: rgba(250, 248, 243, 0.88);
  --yf-pop-shadow: 0 12px 40px rgba(13, 13, 12, 0.18);
  --yf-hero-grid: rgba(13, 13, 12, 0.05);
  --yf-hero-glow: rgba(244, 197, 66, 0.1);
  --yf-accent-wash: rgba(244, 197, 66, 0.08);
  --yf-accent-wash-2: rgba(244, 197, 66, 0.02);
  --yf-accent-fade: rgba(244, 197, 66, 0.25);
  --yf-signal-wash: rgba(40, 100, 43, 0.08);
  --yf-hatch: rgba(13, 13, 12, 0.035);
  --yf-led-on: rgba(244, 197, 66, 0.55);
  --yf-led-dim: rgba(29, 29, 28, 0.22);
  --yf-led-sig: rgba(40, 100, 43, 0.6);
  --yf-led-off: rgba(29, 29, 28, 0.14);
}

/* ---------- 日光版 tokens · 跟随系统(未手动锁夜) ----------
   ⚠ 与上一块逐字同步 —— theme-test TH-1 会盯 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --black: #faf8f3;
    --void: #f4f1e9;
    --carbon: #ffffff;
    --steel: #ebe8e0;
    --steel-2: #e0dcd0;
    --rule: rgba(13, 13, 12, 0.1);
    --rule-2: rgba(13, 13, 12, 0.2);
    --white: #0d0d0c;
    --bone: #1d1d1c;
    --soft: rgba(13, 13, 12, 0.66);
    --faint: rgba(13, 13, 12, 0.6);
    --ignite: #f4c542;
    --plasma: #e3b12c;
    /* 纸白底上黄字看不清:小字/大标题强调词用墨色,大标题强调词下垫一道主题黄记号笔 */
    --ignite-text: #0d0d0c;
    --ignite-display: #0d0d0c;
    --plasma-text: #0d0d0c;
    --on-ignite: #0d0d0c;
    --yf-accent-marker: rgba(244, 197, 66, 0.75);
    --signal: #28642b;
    --alert: #b3282d;
    --yf-card-shadow: 0 1px 2px rgba(13, 13, 12, 0.06), 0 4px 16px rgba(13, 13, 12, 0.06);
    --yf-grid-line: rgba(13, 13, 12, 0.03);
    --yf-accent-glow: rgba(244, 197, 66, 0.16);
    --yf-accent-border: rgba(244, 197, 66, 0.45);
    --yf-signal-border: rgba(40, 100, 43, 0.45);
    --yf-alert-border: rgba(179, 40, 45, 0.45);
    /* 二期·内容六页配件 */
    --yf-nav-bg: rgba(250, 248, 243, 0.88);
    --yf-pop-shadow: 0 12px 40px rgba(13, 13, 12, 0.18);
    --yf-hero-grid: rgba(13, 13, 12, 0.05);
    --yf-hero-glow: rgba(244, 197, 66, 0.1);
    --yf-accent-wash: rgba(244, 197, 66, 0.08);
    --yf-accent-wash-2: rgba(244, 197, 66, 0.02);
    --yf-accent-fade: rgba(244, 197, 66, 0.25);
    --yf-signal-wash: rgba(40, 100, 43, 0.08);
    --yf-hatch: rgba(13, 13, 12, 0.035);
    --yf-led-on: rgba(244, 197, 66, 0.55);
    --yf-led-dim: rgba(29, 29, 28, 0.22);
    --yf-led-sig: rgba(40, 100, 43, 0.6);
    --yf-led-off: rgba(29, 29, 28, 0.14);
  }
}

/* ---------- 主题配件(只写一遍,值随 tokens 翻转) ---------- */

/* 卡片/面板:日光加浅阴影分层,夜版 none */
.pcard, .stat, .panel { box-shadow: var(--yf-card-shadow); }

/* 门户底纹网格线 */
main.portal {
  background:
    linear-gradient(var(--yf-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--yf-grid-line) 1px, transparent 1px);
  background-size: 100px 100px;
}

/* 导航条底色:原页面写死了夜色半透明,这里按主题接管 */
nav.top { background: var(--yf-nav-bg); }

/* 徽章/标签描边:原页面写死了夜版 rgba,这里按主题接管 */
.order-badge.st-preparing, .order-badge.st-packing, .p-chip.warn { border-color: var(--yf-accent-border); }
.order-badge.st-delivered, .p-chip.ok { border-color: var(--yf-signal-border); }
.order-badge.st-manual { border-color: var(--yf-alert-border); }

/* 进度条当前步的光晕 */
.step.now .dot { box-shadow: 0 0 0 3px var(--yf-accent-glow); }

/* ---------- 首屏标题字 · 空心描边词 + 琥珀强调词 ----------
   2026-09-15 Jack 看琥珀主题预览:「only the caption is good: From repetition to creation.,
   revert all the rest, use this caption」。全站配色回到 main,只留这一处:
   首页/mission/careers 首屏大标题里原本淡灰的词(.stroke)= 描边、字心透明;同一标题里的强调词(.accent)
   两版都 = 主题黄 var(--ignite)(hero 里钉死 #f4c542,跟「Invest」按钮同色)——直接写 var(--ignite) 不经 :root 中转(中转会在根上算成日光棕)。Jack 09-15「the color is so ugly, use the theme!」否掉了暗琥珀。
   只作用在带 .stroke 的首屏标题(:has),其它页标题不动。选择器前加 html 提权,盖过各页 <style>。 */
html .hero h1 .stroke {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--ignite);
  font-weight: 700;
}
html.js-ready .hero h1 .stroke { color: transparent; -webkit-text-stroke-color: transparent; transition: -webkit-text-stroke-color .9s ease 0.7s; }
html.js-ready .hero.in h1 .stroke { color: transparent; -webkit-text-stroke-color: var(--ignite); }
html .hero h1:has(.stroke) .accent,
html.js-ready .hero.in h1:has(.stroke) .accent { color: var(--ignite); }
/* 进场动画起点照旧:没进场前强调词透明(页面自己的 transition 还在) */
html.js-ready .hero:not(.in) h1:has(.stroke) .accent { color: transparent; }
@media (max-width: 720px) { html .hero h1 .stroke { -webkit-text-stroke-width: 1.5px; } }

/* ---------- 标题强调词 · 日光版记号笔 ----------
   纸白底上的主题黄字读不出来,改成墨色字 + 下半截主题黄底(像荧光笔划过)。
   深色照片块把 --yf-accent-marker 钉成 transparent,那里照旧是黄字。 */
:is(h1, h2, h3) :is(.accent, .hl, em.ac) {
  background-image: linear-gradient(transparent 58%, var(--yf-accent-marker) 58%, var(--yf-accent-marker) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}