/* ============================ TOKENS ============================ */
:root{
  --bg:#F4F1E8; --panel:#FAF8F1; --panel2:#ECE8DB; --border:#D8D3C4;
  --txt:#26241d; --muted:#8a8472; --line:#E2DDCE; --line-strong:#C9C3B1; --sel:#EFE9D6;
  --accent:#E8743B; --accent2:#B08A6E; --good:#3F8F5B; --danger:#C0492F; --star:#D8A23B;
  --accent-hsl:18 79% 57%;
  --keycap-top:#FCFAF3; --keycap-bot:#ECE8DB; --keycap-edge:#C9C3B1;
  --inset:rgba(26,26,23,.06); --inset-strong:rgba(26,26,23,.13); --bevel-hi:rgba(255,255,255,.6);
  --glow:rgba(232,116,59,.5); --glow-soft:rgba(232,116,59,.28); --grid:rgba(26,26,23,.035);
  --np-thumb:none; --np-op:.06; --np-blend:luminosity; --led:var(--good); --well:inset 0 1px 0 var(--bevel-hi),0 1px 0 var(--keycap-edge);
  /* 扁平・融入背板的控件表面(以 --txt 混透明 → 各 skin 自動相稱;非圓角、無浮起鍵帽感) */
  --ctl-bg:color-mix(in srgb,var(--txt) 7%,transparent); --ctl-bg-h:color-mix(in srgb,var(--txt) 14%,transparent); --ctl-bd:color-mix(in srgb,var(--txt) 11%,transparent); --ctl-r:5px;
  /* === widened design primitives (2026-06-27): a skin overrides these to change the FEEL — radius / shadow / glass / blur / motion / media-ink — not just colour. Classic defaults below reproduce the current look (no-op). See SKINS.md. === */
  --r-card:14px;          /* video / cover cards */
  --r-chip:8px;           /* glass control chips (immersive toolbars) */
  --r-pop:12px;           /* popovers / menus / sheets */
  --r-pill:999px;
  --sh-ink:#000;          /* shadow tint — soft skins set this to a colour for diffused ambient shadows */
  --sh-card:0 6px 18px -10px var(--sh-ink);
  --sh-float:0 8px 24px -12px var(--sh-ink);    /* floating glass chips */
  --sh-lift:0 14px 34px -12px var(--sh-ink);    /* hover / raised */
  --sh-pop:0 18px 44px -16px var(--sh-ink);     /* popovers */
  --blur-glass:18px;      /* backdrop-blur strength on glass surfaces */
  --glass:color-mix(in srgb,var(--panel) 54%,transparent);        /* immersive chip glass */
  --glass-panel:color-mix(in srgb,var(--panel) 72%,transparent);  /* panels / popovers */
  --ease:cubic-bezier(.2,.8,.2,1);              /* primary motion curve */
  --ink-media:#fff;       /* text / controls over video */
  --scrim:rgba(0,0,0,.62);                      /* title scrim gradient over media */
}
[data-theme="dark"]{
  --bg:#0E0E0C; --panel:#171714; --panel2:#0A0A08; --border:#2A2A25;
  --txt:#E8E4D8; --muted:#8C887A; --line:#23231E; --line-strong:#3C3B34; --sel:#211F19;
  --accent:#F0824A; --accent2:#C2A184; --good:#5FB37C; --danger:#E0644A; --star:#E8B84B;
  --accent-hsl:20 85% 62%;
  --keycap-top:#1E1E1A; --keycap-bot:#121210; --keycap-edge:#3C3B34;
  --inset:rgba(0,0,0,.45); --inset-strong:rgba(0,0,0,.62); --bevel-hi:rgba(232,228,216,.07);
  --glow:rgba(240,130,74,.55); --glow-soft:rgba(240,130,74,.3); --grid:rgba(232,228,216,.03);
  --np-op:.10; --np-blend:screen;
}