/* @layer ui — 品牌标记的统一出处。
 *
 * 全应用只有一处定义 logo 怎么显示。之前散落着 📅 🗒️ 这类 emoji 占位，
 * 那是"还没做设计"的信号，不该出现在成品里。
 *
 * 关于标记的颜色：品牌是暖朱色，强调色是群青（或色板里的任一色）——
 * 这是**故意**的。品牌色不跟着色板走，它才是整个产品里唯一不变的那一点颜色；
 * 强调色是界面语言，会随色板改变。两者分工不同，别把 logo 染成 --accent。
 */

.brand-mark {
  display: block;
  flex: none;
  background: url('../../assets/logo.svg') center / contain no-repeat;
  font-size: 0;                /* 兜底：万一图没加载，也不要露出 alt 文字撑变形 */
}

.brand-mark--xs { width: 18px; height: 18px; }
.brand-mark--sm { width: 26px; height: 26px; }
.brand-mark--md { width: 40px; height: 40px; }
.brand-mark--lg { width: 60px; height: 60px; }

/* ---------------- The Preface ｜ 自 序 字标 ----------------
   2026-08-29 AppKit 实测定稿。三个 run 分别控制，是因为英文、分隔符和中文的
   视觉字号并不相等；把整串交给同一个 font-size 会让中文显得过大、分隔符过响。
   具体比较板与测量见 communications/brand/typography/。系统字体只通过平台 API
   使用，不把 Apple 字体文件复制进安装包。 */
.preface-wordmark {
  --preface-size: 15px;
  display: inline-flex;
  align-items: baseline;
  white-space: pre;
  color: var(--text);
  line-height: 1;
}

.preface-wordmark__latin {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--preface-size);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.preface-wordmark__divider {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--preface-size) * 0.75);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-faint);
}

.preface-wordmark__han {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
  font-size: calc(var(--preface-size) * 0.90);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* 引导页的品牌区 */
.onb__mark {
  width: 60px; height: 60px;
  background: url('../../assets/logo.svg') center / contain no-repeat;
}
/* 完成那一步用一个几何对勾，不用 emoji */
.onb__mark--done {
  background: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--success) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 22%, transparent);
  color: var(--success);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1;
}

/* ---------------- 色调选择器 ----------------
   五个色板各用自己的强调色画一枚圆点。预览用 data-palette-preview 就地覆盖变量，
   所以不必为每个色板各写一遍颜色——加一个色板只需在 themes.css 里加一行、这里加一行。 */

.palette-picker { display: flex; gap: 6px; }

.palette-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 7px 8px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.palette-swatch:hover { background: var(--surface-hover); }
.palette-swatch.is-active { border-color: var(--border); background: var(--surface); }

.palette-swatch__chip {
  width: 20px; height: 20px; border-radius: 50%;
  /* 这里不能用 --accent-grad：自定义属性的 var() 在**声明处**就被替换了，
     :root 上合成好的渐变继承下来已是定值，子元素再覆盖 --accent-h 也不会变。
     所以就地用分量重算一次。**改 themes.css 的 --accent-grad 时这里要同步。**
     两端的行程分主题写，理由与取值见 themes.css 的 --accent-grad 注释
     （压在渐变上的字浅深两套是相反的，两端各自往字的反方向收）。 */
  background: linear-gradient(168deg,
    light-dark(hsl(var(--accent-h) calc(var(--accent-s) - 8%) calc(var(--accent-l) + 4%)),
               hsl(var(--accent-h) calc(var(--accent-s) - 8%) calc(var(--accent-l) + 8%))) 0%,
    hsl(var(--accent-h) var(--accent-s) var(--accent-l)) 54%,
    light-dark(hsl(calc(var(--accent-h) + 5) var(--accent-s) calc(var(--accent-l) - 5%)),
               hsl(calc(var(--accent-h) + 5) var(--accent-s) calc(var(--accent-l) + 1%))) 100%);
  /* 内描边而不是外投影：圆点是"嵌在纸上"的颜料，不是"浮在纸上"的球 */
  box-shadow: inset 0 0 0 1px light-dark(hsl(0 0% 0% / 0.12), hsl(0 0% 100% / 0.16));
  transition: transform var(--dur) var(--ease-spring);
}
.palette-swatch:hover .palette-swatch__chip { transform: scale(1.08); }
.palette-swatch.is-active .palette-swatch__chip {
  box-shadow:
    inset 0 0 0 1px light-dark(hsl(0 0% 0% / 0.12), hsl(0 0% 100% / 0.16)),
    0 0 0 2.5px var(--surface),
    0 0 0 4px var(--accent);
}
/* 色点下的名字是**控件标签**（哪一枚色点叫什么），与 .seg__item、
   .workspace-switch__item 同一个角色，不是"退到后面去"的第三级注解。 */
.palette-swatch__name {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
}
.palette-swatch.is-active .palette-swatch__name { color: var(--text); }

/* 每枚色点显示自己那套色板的强调色，而不是当前生效的。
   数值必须与 themes.css 的色板表逐字一致——那边改了这里也要改。 */
.palette-swatch[data-palette-preview='ultramarine'] { --accent-h: 229; --accent-s: 66%; --accent-l: 45%; }
.palette-swatch[data-palette-preview='vermilion']   { --accent-h: 10;  --accent-s: 62%; --accent-l: 45%; }
.palette-swatch[data-palette-preview='ochre']       { --accent-h: 34;  --accent-s: 68%; --accent-l: 34%; }
.palette-swatch[data-palette-preview='pine']        { --accent-h: 165; --accent-s: 42%; --accent-l: 32%; }
.palette-swatch[data-palette-preview='ink']         { --accent-h: 228; --accent-s: 12%; --accent-l: 24%; }

/* 深色下预览点也要跟着提亮，否则五枚点会一起沉进暗底里看不见。
   与 themes.css 末尾那四条深色规则一一对应（数值型令牌进不了 light-dark()）。 */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .palette-swatch[data-palette-preview]        { --accent-l: 64%; }
  :root:not([data-theme='light']) .palette-swatch[data-palette-preview='ink']  { --accent-s: 16%; --accent-l: 72%; }
}
@media screen {
  :root[data-theme='dark'] .palette-swatch[data-palette-preview]       { --accent-l: 64%; }
  :root[data-theme='dark'] .palette-swatch[data-palette-preview='ink'] { --accent-s: 16%; --accent-l: 72%; }
}