@import url("./surfaces.css?v=3");

/* Opt-in interaction lock for canvases, games and other non-document surfaces. */
[data-interaction-lock="true"] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

[data-interaction-lock="true"] :is(img, a, button, canvas, svg) {
  -webkit-user-drag: none;
  user-drag: none;
}

[data-interaction-lock="true"] :is(input, textarea, select, [contenteditable]:not([contenteditable="false"])) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Shared brand foundation. Components may add semantic roles, but do not redefine these values. */
:root {
  --brand-white: 251 250 247;
  --brand-black: 20 22 26;
  --brand-red: 200 60 45;
  --brand-success: 21 178 107;
  --brand-warning: 238 155 19;
  --brand-accent: 56 200 156;
  --light-direct: 215 170 85;
  --light-sky: 100 135 175;
  --shadow-air: 36 53 74;

  /* Typography color roles: red acts, gold elevates, sky informs. */
  --text-primary: rgb(var(--brand-black));
  --text-secondary: rgb(20 22 26 / 0.64);
  --text-tertiary: rgb(20 22 26 / 0.46);
  --text-emphasis: rgb(var(--brand-red));
  --text-gold: rgb(139 101 30);
  --text-sky: rgb(47 91 130);
  --text-inverse: rgb(var(--brand-white));

  /* 思源风字体优先：正文走黑体，展示标题走粗宋；系统字体只作缺字/未安装时的兜底。 */
  --font-ui: "Noto Sans SC", "Source Han Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  --font-ui-strong: var(--font-ui);
  --font-display: "Noto Serif SC", "Source Han Serif SC", "STZhongsong", "Songti SC", "STSong", Georgia, var(--font-ui);
  --font-data: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", "PingFang SC", ui-monospace, monospace;
  --font-hei: var(--font-ui-strong);
  --font-song: var(--font-display);
  --font-song-bold: var(--font-display);
  --font-sans: var(--font-ui);
  --fs-sm: clamp(13px, 0.8vw + 10px, 15px);
  --fs-md: clamp(15px, 1vw + 11px, 17px);
  --fs-lg: clamp(17px, 1.2vw + 13px, 20px);

  --dur-fast: 160ms;
  --dur-med: 260ms;
  --dur-surface: 420ms;
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: var(--ease-standard);

  /* 可复用动效原语：组件只能引用语义 token，不在局部重写曲线。 */
  --motion-ease-enter: var(--ease-emphasized);
  --motion-ease-loop: var(--ease-standard);
  --motion-guide-shift: clamp(0.4rem, 1.8vmin, 1.05rem);
  --motion-guide-gap: clamp(0.35rem, 1.2vmin, 0.75rem);
  --motion-guide-radius: clamp(0.7rem, 2vmin, 1.1rem);
  --motion-guide-breathe: 2200ms;
}

html[data-theme="dark"] {
  --text-primary: rgb(var(--brand-white));
  --text-secondary: rgb(251 250 247 / 0.7);
  --text-tertiary: rgb(251 250 247 / 0.5);
  --text-emphasis: rgb(234 101 82);
  --text-gold: rgb(232 193 108);
  --text-sky: rgb(143 191 231);
  --text-inverse: rgb(var(--brand-black));
}

/* Semantic text utilities. Keep color meaning independent from component shape. */
.yz-text-primary { color: var(--text-primary); }
.yz-text-secondary { color: var(--text-secondary); }
.yz-text-tertiary { color: var(--text-tertiary); }
.yz-text-emphasis { color: var(--text-emphasis); }
.yz-text-gold { color: var(--text-gold); }
.yz-text-sky { color: var(--text-sky); }
.yz-text-inverse { color: var(--text-inverse); }

.yz-text-kicker {
  color: var(--text-tertiary);
  font-size: 0.78em;
  font-weight: 740;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Shared motion primitives. Offsets use vmin/em so the same cue remains calm
   on a watch-sized viewport and legible on a desktop stage. */
.yz-motion-reveal {
  animation: yz-motion-reveal var(--dur-surface) var(--motion-ease-enter) both;
}

.yz-motion-breathe {
  transform-origin: center;
  animation: yz-motion-breathe var(--motion-guide-breathe) var(--motion-ease-loop) infinite;
}

.yz-motion-float {
  animation: yz-motion-float var(--motion-guide-breathe) var(--motion-ease-loop) infinite;
}

.yz-motion-sweep {
  animation: yz-motion-sweep var(--motion-guide-breathe) var(--motion-ease-loop) infinite;
}

.yz-control-guidance {
  display: grid;
  justify-items: center;
  gap: var(--motion-guide-gap);
  width: min(100%, 22rem);
  padding: clamp(0.65rem, 2.1vmin, 1rem);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: var(--motion-guide-radius);
  color: inherit;
  background: color-mix(in srgb, currentColor 9%, transparent);
  box-shadow: 0 0 clamp(1rem, 4vmin, 2.5rem) color-mix(in srgb, currentColor 12%, transparent);
  pointer-events: none;
  text-align: center;
}

.yz-control-guidance__label {
  font-size: clamp(0.68rem, 1.8vmin, 0.82rem);
  font-weight: 740;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.yz-control-guidance__keys,
.yz-control-guidance__touch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38em;
  min-height: 2.1em;
}

.yz-control-guidance kbd,
.yz-control-guidance__touch span {
  display: inline-grid;
  min-width: 2.1em;
  min-height: 2.1em;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 0.5em;
  color: inherit;
  background: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 1px color-mix(in srgb, white 35%, transparent);
  font: 700 0.9em/1 var(--font-data);
}

.yz-control-guidance__touch span {
  min-width: clamp(3rem, 10vmin, 4.5rem);
  padding-inline: 0.55em;
  font-family: var(--font-ui);
  font-size: 0.76em;
}

@keyframes yz-motion-reveal {
  from { opacity: 0; transform: translateY(var(--motion-guide-shift)) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yz-motion-breathe {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.035); }
}

@keyframes yz-motion-float {
  0%, 100% { transform: translateY(0.22em); }
  50% { transform: translateY(-0.22em); }
}

@keyframes yz-motion-sweep {
  0%, 100% { transform: translateX(-0.42em); }
  50% { transform: translateX(0.42em); }
}

@keyframes yz-loader-spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
  .yz-motion-reveal,
  .yz-motion-breathe,
  .yz-motion-float,
  .yz-motion-sweep {
    animation: none !important;
    transform: none !important;
  }
}

/* 代码片段接入数据字体角色（font-data），杜绝浏览器默认等宽泄露 */
code, pre, kbd {
  font-family: var(--font-data);
}