/* ════════════════════════════════════════════════════════════
   KILOQ tokens — 單一事實來源
   視覺規格：docs/specs/KILOQ_design_spec_v3.md（§14.4 形狀 / §14.5 色彩）
   圓角系統：docs/specs/KILOQ_radius_spec_v1.md（--r-0 / -xs / -sm / -pill）
   規則：頁面 CSS 禁裸 hex、禁裸 px 圓角；一律走 token。
   改動前先跑 npm run check:spec。
   ════════════════════════════════════════════════════════════ */

:root {
  /* 60% 中性暖底 */
  --paper: #15140F;
  --paper-2: #1F1E18;
  --bubble: #23211A;

  /* 文字墨色（三階） */
  --ink: #EDEBE3;
  --ink-2: #9C9A8E;
  --ink-3: #65635A;

  /* 10% 橘（唯一強調色） */
  --signal: #FF5A2C;

  /* 30% 青綠 */
  --teal: #1E3A38;
  --teal-2: #264A47;
  --teal-ink: #7FB8AF;

  /* 字型 */
  --logo: 'Barlow', sans-serif;
  --sans: 'Zen Kaku Gothic New', 'Barlow', 'Noto Sans TC', sans-serif;
  --serif: 'Zen Old Mincho', 'Noto Serif TC', serif;
  --mono: 'JetBrains Mono', monospace;

  /* 字級音階（base 16 / 比率 1.333 / 8px 基線） */
  --u-0: 16px; --lh-u: 24px;
  --k-1: 21px; --lh-1: 32px;
  --k-2: 28px; --lh-2: 40px;
  --k-3: 38px; --lh-3: 56px;
  --k-4: 50px; --lh-4: 64px;
  --k-5: 67px; --lh-5: 72px;
  --t--1: 13px; --lh--1: 16px;
  --t--2: 11px; --lh--2: 16px;
  --baseline: 8px;

  /* 結構線粗細（auth 表單 signal 橫線 / 其他結構線共用） */
  --rule: 3px;
  /* 橘底（--signal）上的深色字——深淺一致，不隨主題反相 */
  --on-signal: #15140F;
  /* scrim：平塗遮罩，由 --paper（深色底）推導 */
  --scrim: color-mix(in srgb, var(--paper) 82%, transparent);

  /* 形狀 token（沿用 radius_spec v1.1；詳見 docs/specs/KILOQ_radius_spec_v1.md） */
  --r-0:    0;       /* 銳角 — 工具/系統態：admin、規格裸線、輸入底線 */
  --r-xs:   3px;     /* 小元件 — chip、徽章、app-btn、active tab */
  --r-sm:   6px;     /* 卡片 — 鞋評卡、預覽卡、modal */
  --r-pill: 999px;   /* 膠囊（保留，目前未用） */

  /* 深淺切換鈕色塊（主題無關，固定兩色） */
  --sw-d: #1F1E18;   /* 品牌深色塊（= 深色 --paper-2） */
  --sw-l: #EDE7DA;   /* 品牌淺色塊（= 淺色 --paper-2） */

  /* teal 邊框（identity chip linked 態） */
  --teal-border: #2E5450;

  /* 版面 */
  --margin: clamp(18px, 5vw, 64px);
  --gutter: 16px;
  --app-max-h: 960px;
}

:root[data-appearance="light"] {
  /* scrim 在淺色模式改用 --ink（深色）推導 */
  --scrim: color-mix(in srgb, var(--ink) 54%, transparent);
  --paper: #F6F1E8;
  --paper-2: #EDE7DA;
  --bubble: #FFFCF6;
  --ink: #26221B;
  --ink-2: #6B6356;
  --ink-3: #A89B86;
  --signal: #DD3B12;
  --teal: #CFE3DE;
  --teal-2: #BAD6CF;
  --teal-ink: #2E6A60;
  --teal-border: #A9CDC5;
}

/* ── 全域 reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ── 品牌 Logo（共用）：改這裡 = 全站生效 ── */
.logo {
  font-family: var(--logo); font-weight: 800;
  font-size: var(--k-1); letter-spacing: -.02em;
  color: var(--ink);
}