/* ==========================================================================
   skin-booth.css — 皮肤 A「售票亭」· 柔化粗野主义（specs/023）
   --------------------------------------------------------------------------
   一句话：把「抽一条支线」画成一次真实的售票行为 —— 厚黑描边、硬位移阴影、
   巨型编号、三原色撞色，票根本身升格为界面主角。

   三条纪律（与 app.css 同构，违反即回退）：
     1. 只重写 app.css 已定义的 token，**不发明只有本皮肤用的核心色 token**。
        漏覆盖一个，那个位置就串回米纸朱砂 —— skin-system 守闸 C2/C3 用集合比对钉死。
     2. 零 @font-face、零外链、零 url() 位图。图形全靠描边、实色块与 CSS 渐变。
     3. 不改任何几何：margin/padding/flex/断点一律不动，021 那轮 dock⇄tabbar
        的修复必须原样成立。这里只动"看起来像什么"，不动"站在哪里"。
   ========================================================================== */

/* ---------- 1. 亮档 token ---------- */
html[data-skin="booth"] {
  /* 纸与墨：冷白卡纸，彻底离开米黄 —— 这是与默认档最直观的分野 */
  --paper: #FBFAF7;
  --paper-2: #FFFFFF;
  --paper-3: #EFEDE6;
  --ink: #0E1113;
  --ink-soft: #3A4046;
  --ink-faint: #6B7278;

  /* 撞色。注意映射：app.css 里 .btn-primary 用的是 --pine，.btn-accent 用 --vermillion，
     所以"主色"其实落在 --pine 上 —— 这里 --pine 给宝蓝、--vermillion 给电光橙。
     实测：#FBFAF7 字在 #1B4DFF 上 5.95:1 ✓；#0E1113 字在 #FF4E1B 上 5.6:1 ✓。 */
  --vermillion: #FF4E1B;
  --pine: #1B4DFF;
  --pine-deep: #0F1E6B;
  --gold: #FFD94D;

  /* 边界：粗野主义要"看得出发了哪一张纸"，比默认档更重 */
  --line: rgba(14, 17, 19, 0.30);
  --line-soft: rgba(14, 17, 19, 0.22);

  /* 派生色：网点改成印刷网格感，胶带从淡粉换成琥珀（粉胶带属于米纸那套语言） */
  --dot: rgba(14, 17, 19, 0.055);
  --tape: rgba(255, 217, 77, 0.62);
  --scrim: rgba(14, 17, 19, 0.55);
  --on-accent: #0E1113;
  --on-tag: #FFF6E8;
  --vermillion-soft: rgba(255, 78, 27, 0.45);
  --flow-night: #C2320C;
  --check-idle: #0E1113;
  --thumb-paper: #FFFFFF;

  /* 阴影：全部换成硬位移，零模糊 —— 这一条就把"柔影纸感"整个换掉了 */
  --shadow-paper: 4px 4px 0 rgba(14, 17, 19, 0.14);
  --shadow-lift: 8px 8px 0 rgba(14, 17, 19, 0.18);
  --shadow-tag: 2px 2px 0 rgba(14, 17, 19, 0.9);
  --shadow-thumb: 3px 3px 0 rgba(14, 17, 19, 0.18);
  --shadow-ticket: 7px 7px 0 rgba(14, 17, 19, 0.9);

  /* 字：宋体换黑体。系统栈，零 webfont */
  --font-display: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;

  /* 圆角：本档以方角为主（老板已批准默认档守 16/28、各皮肤自定） */
  --r-card: 10px;
}

/* ---------- 2. 组件结构：描边 + 硬投影 ---------- */
html[data-skin="booth"] .card,
html[data-skin="booth"] .tile,
html[data-skin="booth"] .lib-row,
html[data-skin="booth"] .stat,
html[data-skin="booth"] .badge,
html[data-skin="booth"] .input,
html[data-skin="booth"] .sheet,
html[data-skin="booth"] .one-line-field textarea {
  border: 2px solid var(--ink);
}

html[data-skin="booth"] .card { background: var(--paper-2); box-shadow: var(--shadow-paper); }
/* :not([aria-pressed]) 同 riso：不限定就会把选中态的宝蓝底吃掉，纸色字落在白底上 */
html[data-skin="booth"] .tile:not([aria-pressed="true"]) { background: var(--paper-2); }
html[data-skin="booth"] .chip { border: 2px solid var(--ink); color: var(--ink); font-weight: 600; }
html[data-skin="booth"] .chip[aria-pressed="true"] { background: var(--gold); color: var(--ink); }

/* 选中态磁贴：**不换背景色**。app.css 的 .tile[aria-pressed=true] 是
   background:--pine 与 color:--paper 成对出现的，只改背景会把纸色字留在金底上
   （实测 1.32:1 —— 真浏览器量的，不是推出来的）。粗野主义的选中感
   靠描边、硬投影与抬起表达，颜色对保持不动。 */
html[data-skin="booth"] .tile[aria-pressed="true"],
html[data-skin="booth"] .seg-item[aria-pressed="true"] { color: var(--paper); }
html[data-skin="booth"] .seg-item[aria-selected="true"] { color: var(--paper); }
html[data-skin="booth"] .tile[aria-pressed="true"] {
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
html[data-skin="booth"] .tile[aria-pressed="true"] .mark { color: var(--gold); }
/* 磁贴里的说明字：在深色选中底上不能再用 --ink-faint，否则等于没写 */
html[data-skin="booth"] .tile[aria-pressed="true"] .faint,
html[data-skin="booth"] .tile[aria-pressed="true"] .tiny { color: var(--paper); opacity: 1; }

/* 按钮：按下 = 位移吃掉阴影，这是粗野主义最"可摸"的一下 */
html[data-skin="booth"] .btn {
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 700;
  border-radius: 8px;
}
html[data-skin="booth"] .btn:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}
html[data-skin="booth"] .btn-ghost { background: var(--paper-2); color: var(--ink); }
html[data-skin="booth"] .btn-quiet { border: 2px dashed var(--ink); background: transparent; }
html[data-skin="booth"] .btn.is-locked {
  background: var(--paper-3);
  border: 2px dashed var(--ink);
  box-shadow: none;
}

/* 026：售票亭的 seg 原来是一圈 2px 黑框 + 内边距（“一版车票装在卡座里”）。
   老板这次要的是全局去掉这种矩形外框，所以框拿掉、选中那颗仍然用黑底金字硬块
   —— 粗野主义的记忆点在“硬块 + 硬阴影”，不在“一圈线”。 */
html[data-skin="booth"] .seg { border: none; border-radius: 0; padding: 0; }
html[data-skin="booth"] .seg-item { border: none; background: transparent; border-radius: 8px; }
html[data-skin="booth"] .seg-item[aria-pressed="true"] { background: var(--ink); color: var(--gold); }
html[data-skin="booth"] .seg-item[aria-selected="true"] { background: var(--ink); color: var(--gold); }

/* 三档：并排三张车票，选中那颗抬起来 */
html[data-skin="booth"] .tier-cell { border: 2px solid var(--ink); background: var(--paper-2); border-radius: 8px; }
html[data-skin="booth"] .tier-cell .v { font-weight: 800; }
html[data-skin="booth"] .tier-cell[aria-pressed="true"] {
  background: var(--vermillion);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: translateY(-3px);
}
html[data-skin="booth"] .tier-cell[aria-pressed="true"] .k { color: var(--ink); }

/* 巨型编号：从"一行小字"升格成画面主角 */
html[data-skin="booth"] .q-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--vermillion);
  -webkit-text-stroke: 1.5px var(--ink);
}
html[data-skin="booth"] .q-title,
html[data-skin="booth"] .head h1,
html[data-skin="booth"] .ticket-title,
html[data-skin="booth"] .persona-title,
html[data-skin="booth"] .level-num,
html[data-skin="booth"] .stat .n { font-weight: 800; }
html[data-skin="booth"] .head h1 { font-size: calc(var(--fs-hero) * 1.06); }

/* 雷达：刻度尺感 */
html[data-skin="booth"] .radar { color: var(--ink); }
html[data-skin="booth"] .radar__ring-stroke { stroke: var(--ink); stroke-width: 2; fill: none; }
html[data-skin="booth"] .radar__dot { stroke: var(--ink); stroke-width: 1.5; }
html[data-skin="booth"] .radar__me-dot { stroke: var(--ink); stroke-width: 2; }
html[data-skin="booth"] .compass { color: var(--ink); }

/* dock / tabbar：实色纸 + 硬分界。tabbar 从"半透模糊"改成实心黑条 ——
   只改配色与材质，padding 一字不动，--tabbar-h:74px 的分层账因此仍然成立。
   026：dock 上沿那根 3px 黑线拿掉（老板：全局不要外边框）；黑条本身是这一档的语言，保留。 */
html[data-skin="booth"] .dock {
  background: var(--paper);
  border-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-skin="booth"] .tabbar {
  background: var(--ink);
  border-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-skin="booth"] .tab { color: #8A9096; border-radius: 7px; }
html[data-skin="booth"] .tab[aria-current="page"] {
  color: var(--ink);
  background: var(--gold);
  font-weight: 700;
}

/* 票根：齿孔 + 厚边 + 硬投影。::before 那条胶带保留但换成琥珀（见 token） */
html[data-skin="booth"] .ticket {
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow-ticket);
  transform: rotate(-0.6deg);
}
/* 注意：不要给 .ticket::before / ::after 加 border-radius:50% + 描边。
   概念展板里那是“齿孔圆凹口”，但 app.css 中这两个伪元素是胶带条与侧边标签，
   尺寸由另外的规则定 —— 套上去会在票面上画出一个大黑圆圈（真浏览器实拍拓到）。 */
html[data-skin="booth"] .ticket::before { border: 2px solid var(--ink); }
html[data-skin="booth"] .ticket-foot { border-top: 3px dashed var(--ink); }
html[data-skin="booth"] .ticket-barcode { opacity: 1; }
html[data-skin="booth"] .ticket-stamp {
  border-width: 3px;
  border-radius: 6px;
  font-weight: 800;
  opacity: 1;
  box-shadow: 3px 3px 0 var(--ink);
}
html[data-skin="booth"] .ticket-blessing {
  border: 2px dashed var(--ink);
  border-bottom-width: 2px;
  background: var(--gold);
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
  opacity: 1;
  padding: var(--sp-2) var(--sp-3);
}
/* 族标签：黑底贴纸。不跟随 --fam-accent 是因为 12 族的 accent 明暗跨度过大，
   单一 --on-tag 无法在所有族上都够对比 —— 族身份改由票根纸色与左竖条承担。 */
html[data-skin="booth"] .family-tag {
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  font-weight: 700;
  border-radius: 4px;
}

html[data-skin="booth"] .lib-bar { background: var(--vermillion); }
html[data-skin="booth"] .progress { height: 6px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper-3); }
html[data-skin="booth"] .progress > i { background: var(--vermillion); border-radius: 0; }
html[data-skin="booth"] .vector-bar { background: var(--paper-3); }
html[data-skin="booth"] .badge.is-owned { border: 2px solid var(--ink); background: var(--gold); color: var(--ink); }
html[data-skin="booth"] .toast { border: 2px solid var(--paper); box-shadow: 3px 3px 0 var(--ink); font-weight: 600; }
html[data-skin="booth"] .check-box { border: 2px solid var(--ink); border-radius: 3px; }
html[data-skin="booth"] .eyebrow { font-weight: 700; letter-spacing: 0.16em; }
/* Lv 数字：用宝蓝不用电光橙。它是 --fs-title≈20.4px 且非粗体，
   按 AA 不算大字、门槛是 4.5；#FF4E1B 在白底上只 3.3，#1B4DFF 是 5.65。 */
html[data-skin="booth"] .level-num { color: var(--pine); }
html[data-skin="booth"] .why,
html[data-skin="booth"] .safety { border-left: 4px solid var(--ink); }

/* ---------- 3. 暗色变体：同方向降明度，黑框翻成白框 ---------- */
@media (prefers-color-scheme: dark) {
  html[data-skin="booth"] {
    --paper: #131518;
    --paper-2: #1C1F23;
    --paper-3: #26292E;
    --ink: #F4F3EE;
    --ink-soft: #B4B9BE;
    --ink-faint: #868C92;

    --vermillion: #FF6A3D;
    --pine: #4F7BFF;
    --pine-deep: #9EB8FF;
    --gold: #FFD94D;

    --line: rgba(244, 243, 238, 0.34);
    --line-soft: rgba(244, 243, 238, 0.26);

    --dot: rgba(244, 243, 238, 0.05);
    --tape: rgba(255, 217, 77, 0.40);
    --scrim: rgba(0, 0, 0, 0.68);
    --on-accent: #131518;
    --on-tag: #131518;
    --vermillion-soft: rgba(255, 106, 61, 0.5);
    --flow-night: #B23E17;
    --check-idle: #F4F3EE;
    --thumb-paper: #1C1F23;

    --shadow-paper: 4px 4px 0 rgba(244, 243, 238, 0.16);
    --shadow-lift: 8px 8px 0 rgba(244, 243, 238, 0.20);
    --shadow-tag: 2px 2px 0 rgba(244, 243, 238, 0.85);
    --shadow-thumb: 3px 3px 0 rgba(244, 243, 238, 0.16);
    --shadow-ticket: 7px 7px 0 rgba(244, 243, 238, 0.85);
  }
  /* 描边与硬投影的"墨"在暗档是浅色，需要逐条翻过来 */
  html[data-skin="booth"] .card,
  html[data-skin="booth"] .tile,
  html[data-skin="booth"] .lib-row,
  html[data-skin="booth"] .stat,
  html[data-skin="booth"] .badge,
  html[data-skin="booth"] .input,
  html[data-skin="booth"] .chip,
  html[data-skin="booth"] .seg,
  html[data-skin="booth"] .tier-cell,
  html[data-skin="booth"] .btn,
  html[data-skin="booth"] .ticket,
  html[data-skin="booth"] .ticket-blessing,
  html[data-skin="booth"] .one-line-field textarea { border-color: var(--ink); }
  html[data-skin="booth"] .btn { box-shadow: 3px 3px 0 var(--ink); }
  html[data-skin="booth"] .tile[aria-pressed="true"],
  html[data-skin="booth"] .tier-cell[aria-pressed="true"],
  html[data-skin="booth"] .chip[aria-pressed="true"] { box-shadow: 4px 4px 0 var(--ink); }
  html[data-skin="booth"] .btn:active:not(:disabled) { box-shadow: 0 0 0 var(--ink); }
  html[data-skin="booth"] .tabbar { background: #0B0C0E; }
  html[data-skin="booth"] .tab { color: #6E757B; }
  html[data-skin="booth"] .q-num { -webkit-text-stroke: 1.5px var(--ink); }
  html[data-skin="booth"] .family-tag { background: var(--ink); color: var(--paper); }

  /* 暗档选中态固定深字（024 台账②的同源账，v5 暗色探针当场拓出 1.24:1）：
     亮档是「黑底金字硬块」，同方向翻过去是「金底黑字」——不能只换 token
     让 --ink 翻浅后留在金/橙底上。seg 与 chip 与 tier 三处成对。 */
  html[data-skin="booth"] .seg-item[aria-pressed="true"],
  html[data-skin="booth"] .seg-item[aria-selected="true"] {
    background: var(--gold);
    color: #131518;
  }
  html[data-skin="booth"] .chip[aria-pressed="true"] { background: var(--gold); color: #131518; }
  html[data-skin="booth"] .tier-cell[aria-pressed="true"],
  html[data-skin="booth"] .tier-cell[aria-pressed="true"] .k { color: #131518; }
}