/* ==========================================================================
   Eastudy V3 — 尺度 token

   这个文件**不含任何颜色**。颜色全部由 /assets/themes-12.css 负责。
   两个文件的分工：

     tokens.css      与主题无关的东西：圆角、间距、字号、行高、时长、字体、
                     布局尺寸（侧边栏宽、顶栏高、最小点击区）
     themes-12.css   12 套色系 × 浅深两版，以及把规范里的语义名映射到
                     组件已经在引用的名字上（--bg / --surface / --fg / …）

   为什么分成两个文件而不是一个：
   颜色是**按主题换的那一半**，尺度是**永远不动的那一半**。混在一起的时候，
   想加第 13 套主题就得在一个 300 行的文件里找色调该插在哪，还容易顺手把
   间距改掉。分开之后，改配色只需打开 themes-12.css。

   这里的尺度值仍然只声明一次 —— 旧版 app.css 自带四个互相覆盖的 :root
   块（紫深、紫浅、青浅、青深），同一件事谁都可能赢。 */

/* 两份自托管字体由所有页面共享，包含登录页；不重复注册同一文件。 */
@font-face {
  font-family: 'Eastudy Sans';
  src: url('/assets/auth/fonts/auth-sans.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Eastudy Serif';
  src: url('/assets/auth/fonts/auth-serif.woff') format('woff');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- 字号 --- */
  --text-xs: 12px; --text-sm: 13px; --text-base: 15px;
  --text-lg: 17px; --text-xl: 21px; --text-2xl: 27px; --text-3xl: 34px;

  /* --- 行高与字体 --- */
  --leading-tight:   1.25;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;
  --font-mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  --font-serif: "Eastudy UI Serif", Georgia, "Microsoft YaHei", serif;
  --font-sans: Arial, "Eastudy Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-read: "Times New Roman", "Eastudy Serif", "Songti SC", Georgia, serif;

  /* --- 圆角 --- */
  --radius-xs: 8px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* --- 间距 --- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;

  /* --- 动效 ---
     规范第 6 / 7 节：状态切换 160ms ease；主题切换也只有这一个淡化时长。 */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-theme: 160ms;
  --motion:      var(--dur-base);
  --motion-fast: var(--dur-fast);
  --motion-slow: var(--dur-slow);

  /* --- 布局尺寸 --- */
  --sidebar-w: 250px;
  --topbar-h: 58px;
  --tap-min: 44px;
}

:root{
 --font-ui: var(--font-sans);
 --font-body:16px;--font-page:28px;--font-section:20px;--font-card:16px;--font-note:14px;--font-meta:12px;
 --leading-title:1.35;--leading-body:1.65;--leading-note:1.6;
 --radius-control:8px;--radius-card:12px;--radius-layer:16px;--radius-chip:6px;
 --gap-1:4px;--gap-2:8px;--gap-3:12px;--gap-4:16px;--gap-6:24px;--gap-8:32px;--gap-12:48px;
 --card-pad:24px;--control-height:44px;--chip-height:24px;--icon-size:20px;
 --text-secondary:color-mix(in srgb,var(--fg-subtle) 65%,var(--fg-base));
 --teaching-readable:color-mix(in srgb,var(--teach-key-fg) 68%,var(--fg-base));
 --selection-ink:color-mix(in srgb,var(--primary) 65%,var(--fg-base));
 --action-fill:var(--primary);--action-hover:color-mix(in srgb,var(--primary) 96%,#fff);
 --control-border:color-mix(in srgb,var(--border-base) 50%,var(--fg-base));
 --selected-bg:color-mix(in srgb,var(--primary) 12%,var(--card-bg));
 --surface-shadow:0 2px 10px color-mix(in srgb,var(--fg-base) 4%,transparent);
 --layer-shadow:0 16px 48px color-mix(in srgb,var(--page-bg) 40%,#00000040);
 --motion-ui:160ms;--ease-ui:cubic-bezier(.2,.7,.2,1);
 --material-surface-top:color-mix(in srgb,var(--card-bg) 97%,#fff);
 --material-surface-bottom:color-mix(in srgb,var(--card-bg) 85%,var(--panel-bg));
 --material-highlight:rgba(255,255,255,.55);
 --material-reflection:rgba(255,255,255,.065);
 --material-secondary:color-mix(in srgb,var(--text-secondary) 80%,var(--fg-base));
 --material-contact:0 2px 4px #0b17261a;
 --material-elevation:0 10px 28px #0b172614;
 --card-text-secondary:color-mix(in srgb,var(--fg-subtle) 25%,var(--fg-base));
 --card-surface-top:color-mix(in srgb,var(--card-bg) 93%,var(--primary));
 --card-surface-bottom:color-mix(in srgb,var(--card-bg) 96%,var(--panel-bg));
 --card-surface-reflection:rgba(255,255,255,.58);
 --card-surface-ambient:color-mix(in srgb,var(--primary) 18%,transparent);
 --card-surface-face:radial-gradient(ellipse 85% 65% at 12% 0%,var(--card-surface-reflection),transparent 70%),radial-gradient(ellipse 130% 110% at 8% 110%,var(--card-surface-ambient),transparent 70%),linear-gradient(135deg,var(--card-surface-top),var(--card-surface-bottom) 75%);
 --card-edge:color-mix(in srgb,var(--border-base) 86%,var(--fg-base));
 --card-edge-light:color-mix(in srgb,var(--primary) 30%,var(--card-edge));
 --card-surface-shadow:inset 0 1px 0 #ffffffa6,inset 1px 0 0 #ffffff33,0 3px 6px #0b172612,0 12px 24px -10px #0b172630,0 0 16px -9px color-mix(in srgb,var(--primary) 18%,transparent);
 --material-layer-shadow:0 16px 40px #0b172624;
 --material-button-top:var(--action-fill);
 --material-button-mid:color-mix(in srgb,var(--action-fill) 91%,#000);
 --material-button-bottom:color-mix(in srgb,var(--action-fill) 72%,#000);
 --material-button-shadow:0 8px 18px -6px color-mix(in srgb,var(--primary) 38%,transparent),0 2px 4px #0b172626;
 --material-control-top:color-mix(in srgb,var(--card-bg) 92%,transparent);
 --material-control-bottom:color-mix(in srgb,var(--panel-bg) 94%,transparent);
 --material-control-face:linear-gradient(155deg,var(--material-control-top),var(--material-control-bottom));
 --material-selected-face:linear-gradient(155deg,color-mix(in srgb,var(--selected-bg) 94%,#fff),var(--selected-bg));
 --material-control-edge:color-mix(in srgb,var(--primary) 18%,var(--border-base));
 --material-control-shadow:inset 0 1px 0 var(--material-highlight),0 2px 6px #0b172614;
 --material-control-blur:8px;
 --word-surface-recess:inset 0 10px 18px -14px #0b172638,inset 0 3px 6px -5px #0b172626;
 --word-surface-edge:inset 0 1px 0 var(--material-highlight),inset 0 -1px 0 #ffffff33;
 --skeleton-base:color-mix(in srgb,var(--fg-base) 9%,var(--card-bg));
 --skeleton-shine:color-mix(in srgb,var(--fg-base) 4%,var(--card-bg));
 --tag-sage-bg:#d8f5df;--tag-sage-fg:#196237;
 --tag-teal-bg:#cff4f1;--tag-teal-fg:#115c62;
 --tag-blue-bg:#dae9ff;--tag-blue-fg:#244f96;
 --tag-violet-bg:#ece0ff;--tag-violet-fg:#643394;
 --tag-amber-bg:#ffeabd;--tag-amber-fg:#795019;
 --tag-rose-bg:#ffe0eb;--tag-rose-fg:#903357;
}
html[data-mode=light]{--action-fill:color-mix(in srgb,var(--primary) 97%,#000);--action-hover:color-mix(in srgb,var(--primary) 92%,#000)}
html[data-mode=dark]{
 --tag-sage-bg:#1c4230;--tag-sage-fg:#a6e9c0;
 --tag-teal-bg:#163f45;--tag-teal-fg:#a4e6e6;
 --tag-blue-bg:#243a5a;--tag-blue-fg:#b3d3ff;
 --tag-violet-bg:#3f2d59;--tag-violet-fg:#d8b8ff;
 --tag-amber-bg:#4d3a20;--tag-amber-fg:#ffe0a4;
 --tag-rose-bg:#512f43;--tag-rose-fg:#ffc1dd;
 --material-surface-top:color-mix(in srgb,var(--card-bg) 94%,#fff);
 --material-surface-bottom:color-mix(in srgb,var(--card-bg) 95%,#000);
 --material-highlight:rgba(255,255,255,.18);
 --material-reflection:rgba(255,255,255,.055);
 --material-contact:0 2px 4px #00000040;
 --material-elevation:0 10px 28px #00000038;
 --card-surface-top:color-mix(in srgb,var(--card-bg) 92%,var(--primary));
 --card-surface-bottom:color-mix(in srgb,var(--card-bg) 98%,#000);
 --card-surface-reflection:rgba(255,255,255,.065);
 --card-surface-ambient:color-mix(in srgb,var(--primary) 24%,transparent);
 --card-edge:color-mix(in srgb,var(--border-base) 75%,var(--fg-base));
 --card-edge-light:color-mix(in srgb,var(--primary) 30%,var(--card-edge));
 --card-surface-shadow:inset 0 1px 0 #ffffff24,inset 1px 0 0 #ffffff08,0 3px 6px #00000030,0 12px 24px -10px #00000070,0 0 16px -9px color-mix(in srgb,var(--primary) 24%,transparent);
 --material-layer-shadow:0 16px 40px #00000055;
 --material-button-top:color-mix(in srgb,var(--action-fill) 90%,#fff);
 --material-button-mid:var(--action-fill);
 --material-button-bottom:color-mix(in srgb,var(--action-fill) 88%,#000);
 --material-control-top:color-mix(in srgb,var(--material-surface-top) 90%,transparent);
 --material-control-bottom:color-mix(in srgb,var(--panel-bg) 96%,transparent);
 --material-control-shadow:inset 0 1px 0 var(--material-highlight),0 2px 6px #00000026;
 --word-surface-recess:inset 0 10px 18px -14px #00000066,inset 0 3px 6px -5px #00000040;
 --word-surface-edge:inset 0 1px 0 var(--material-highlight),inset 0 -1px 0 #ffffff0a;
}
@media(max-width:640px){:root{--font-page:24px;--card-pad:16px}}
@media(prefers-reduced-motion:reduce){:root{--motion-ui:0ms}html{scroll-behavior:auto!important}}

:root{--tag-topic-face-lightness:89%;--tag-topic-ink-lightness:22%;--tag-topic-face-saturation:72%;--tag-topic-ink-saturation:60%}
html[data-mode=dark]{--tag-topic-face-lightness:22%;--tag-topic-ink-lightness:86%}