/* ==========================================================================
   study.zzxcd.cn · base.css
   --------------------------------------------------------------------------
   学习子域共用的地基（首页 + 番茄钟）。世界：**暴露结构**（EXPOSED STRUCTURE）。
   承重结构直接当外观：一张纸、一色墨、一个强调色；分离靠 2px 结构线，
   层级靠**硬位移块**（零模糊），不靠渐变、玻璃、柔和阴影、圆角。

   只放四样东西：
     1. 自托管字体（拉丁/数字子集；中文走系统字体栈）
     2. 设计令牌（四套主题由各页 applySettings() 写进 documentElement）
     3. 全局复位与浏览器自带表面的主题化
     4. 内容列宽度

   各页自己的界面在 study/assets/<页>.css；共用构件在 study/assets/shell.css。
   每个页面按 base.css → shell.css → <页>.css 引三条 <link>。
   ========================================================================== */

/* ---------- 1. 字体（子集：拉丁 + 数字 + 常用符号，见 scripts/build-fonts.py） ---------- */
@font-face {
  font-family: 'Archivo NB';
  src: url('../fonts/display.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Mono NB';
  src: url('../fonts/mono.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}

/* ---------- 2. 令牌 ---------- */
:root {
  /* 主题令牌 —— 四套主题必须覆盖这 11 键（见 docs/TOOLS.md 6.1）。
     语义按新世界重映射：--c-bg 是纸、--c-white 是抬起面。 */
  --c-bg: #f4f1ea;
  --c-neu-bg: #f4f1ea;
  --c-white: #ffffff;
  --c-neu-shadow-light: #ffffff;
  --c-neu-shadow-dark: #0a0a0a;
  --c-text: #0a0a0a;
  --c-text-sub: #5c5a54;
  --c-glass-bg: rgb(255 255 255 / 92%);
  --c-glass-border: #0a0a0a;
  --c-inset-dark: rgb(10 10 10 / 12%);
  --c-inset-light: rgb(255 255 255 / 90%);

  /* 子域强调色：信息域 = 深紫（原 #7c5cff 归入本世界的 8 色盘）。
     运行时由设置写入；这里的值只是 js 生效前的兜底。 */
  --c-orange: #1f4fa0;
  --c-sky: #4a9d9c;
  --c-gray: #8a8a8a;

  /* 世界：纸 / 墨 / 硬位移 */
  --nb-ink: var(--c-text);
  --nb-ink-soft: color-mix(in srgb, var(--c-text) 55%, var(--c-bg));
  --nb-rule: 2px;
  --nb-rule-heavy: 3px;
  --nb-shadow: 4px 4px 0 var(--c-text);
  --nb-shadow-sm: 3px 3px 0 var(--c-text);
  --nb-shadow-lg: 6px 6px 0 var(--c-text);
  /* 覆层遮罩：刻意不用 --c-text —— 暗色主题下它是亮色，拿它做遮罩会变成一层白纱 */
  --nb-scrim: color-mix(in srgb, #0a0a0a 72%, transparent);
  --nb-pad: 1rem;
  --nb-gap: 0.5rem;
  --nb-on-accent: #fff;

  --font-system: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-display: 'Archivo NB', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'Mono NB', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* 正文字体 = 自托管 Archivo；设置里的「字体」切换改的就是 --font 令牌 */
  --font: var(--font-display);
  --font-scale: 1;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --nb-dur: 110ms;
  --nb-dur-slow: 220ms;

  color-scheme: light;
}

/* ---------- 3. 复位与浏览器自带表面 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  /* 移动端按视口缩放，桌面锁定 16px（沿用项目既有做法，字号设置写 --font-scale） */
  font-size: calc(100vw / 375 * 16 * var(--font-scale));
}
@media (min-width: 768px) {
  html {
    font-size: calc(16px * var(--font-scale));
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 0.9rem;
  line-height: 1.5;
  /* 结构缝：2rem 见方的极淡网格，暗示模数；两条 1px 硬停止线，不产生色彩过渡 */
  background-image: linear-gradient(
      to right,
      color-mix(in srgb, var(--c-text) 7%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, color-mix(in srgb, var(--c-text) 7%, transparent) 1px, transparent 1px);
  background-size: 2rem 2rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
a {
  color: var(--c-orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
table {
  border-collapse: collapse;
}
[hidden] {
  display: none !important;
}
.hidden {
  display: none !important;
}

/* 浏览器自带的表面也要属于这套设计（最便宜的「被建造过」的信号） */
::selection {
  background: var(--c-orange);
  color: var(--nb-on-accent, #fff);
}
:focus-visible {
  outline: var(--nb-rule-heavy) solid var(--c-orange);
  outline-offset: 2px;
}
html {
  scrollbar-color: var(--c-text) var(--c-bg);
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--c-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--c-text);
  border: 2px solid var(--c-bg);
}
input,
textarea,
select {
  caret-color: var(--c-orange);
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
}

/* 尊重系统设置：本世界的动效本来就是机械跳变，减弱后只保留状态切换 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 4. 内容列 ---------- */
/* 宽度按工具类型分档：读/写型（文本、图片）宽列，工具型（颜色、密码、网络）中列 */
.app {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.1rem 0.9rem 2rem;
}
.app.wide {
  max-width: 60rem;
}
.app.narrow {
  max-width: 34rem;
}
@media (max-width: 400px) {
  .app {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}