/* ════════════════════════════════════════════════════════════════════════
AMS 主题系统 v1 · assets/ams-theme.css
────────────────────────────────────────────────────────────────────────
任何新模块（概览 / 内容 / 文件 / 数据 / SEO / AI / 设置）只需要两行：
三层架构 —— 组件只准引用 Layer 2 / 3，禁止写死颜色、圆角、内边距：
Layer 1 基础色阶 --n-*（中性）· --c-*（状态）· --accent-h / --accent-c
品牌常量，不随主题切换而改变
Layer 2 语义令牌 --bg / --surface / --fg / --muted / --border / --accent …
随「模式」与「主题色」变化
Layer 3 尺度令牌 --radius / --ctrl-h / --row-pad-y / --shadow …
随「密度」与「圆角」变化
运行期由 ams-theme.js 把偏好写到 上：
data-mode="light|dark" data-accent="green|…"
data-density="comfortable|compact" data-radius="sharp|soft|round"
新增主题色：只在 Layer 2 的 [data-accent] 组里加一行 hue / chroma，
不要新增语义令牌名，也不要散落新的 hex。
════════════════════════════════════════════════════════════════════════ */
/* ═══ Layer 1 · 基础色阶 ═══════════════════════════════════════════════ */
:root {
/* 中性色阶 —— 冷灰，色相 250，15 级 */
--n-0: oklch(100% 0 0);
--n-25: oklch(98.8% 0.003 250);
--n-50: oklch(97.6% 0.005 250);
--n-100: oklch(95.2% 0.006 250);
--n-150: oklch(92.4% 0.007 250);
--n-200: oklch(89.0% 0.008 250);
--n-300: oklch(80.0% 0.010 250);
--n-400: oklch(68.0% 0.012 250);
--n-500: oklch(56.0% 0.014 250);
--n-600: oklch(47.0% 0.016 250);
--n-700: oklch(38.0% 0.018 250);
--n-800: oklch(30.0% 0.019 250);
--n-850: oklch(25.0% 0.019 250);
--n-900: oklch(21.0% 0.018 250);
--n-950: oklch(16.0% 0.015 250);
--n-1000: oklch(12.5% 0.012 250);
/* 状态色 —— 与主题色解耦，任何时候都保留语义 */
--c-ok: oklch(56% 0.14 152);
--c-warn: oklch(64% 0.14 72);
--c-danger: oklch(56% 0.19 27);
--c-info: oklch(58% 0.14 250);
/* 字体栈 —— display 用于标题，body 用于正文，mono 用于数据 */
--font-display: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
/* 主题色默认 —— 绿（品牌基线） */
--accent-h: 145;
--accent-c: 0.152;
}
/* ═══ Layer 2 · 语义令牌 · 亮色（默认） ═══════════════════════════════ */
:root {
/* 主题色：--accent 用于文字/图标/描边/选中；--accent-fill 用于实心按钮 */
--accent-l-base: 54%;
--accent-fl-base: 47%;
--accent-l: var(--accent-l-base);
--accent-fl: var(--accent-fl-base);
--accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
--accent-fill: oklch(var(--accent-fl) var(--accent-c) var(--accent-h));
--accent-on: var(--n-0);
--accent-hover: oklch(calc(var(--accent-fl) - 6%) var(--accent-c) var(--accent-h));
--accent-active: oklch(calc(var(--accent-fl) - 10%) var(--accent-c) var(--accent-h));
--accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
--accent-ring: color-mix(in oklch, var(--accent) 32%, transparent);
/* 表面 */
--bg: var(--n-50);
--surface: var(--n-0);
--surface-2: var(--n-100);
--surface-3: var(--n-150);
/* 前景 */
--fg: var(--n-900);
--fg-2: var(--n-700);
--muted: var(--n-500);
--border: var(--n-150);
--border-strong: var(--n-300);
/* 应用外壳（顶栏）—— 暗色外壳在两种模式下都成立 */
--chrome-bg: var(--n-950);
--chrome-fg: var(--n-25);
--on-dark: var(--chrome-fg);
--on-dark-dim: color-mix(in oklch, var(--chrome-fg) 64%, transparent);
--on-dark-soft: color-mix(in oklch, var(--chrome-fg) 10%, transparent);
--media-bg: var(--n-950);
--scrim: color-mix(in oklch, var(--n-1000) 42%, transparent);
--scrim-strong: color-mix(in oklch, var(--n-1000) 52%, transparent);
/* 派生前景（hover 底、表格斑纹等） */
--fg-soft: color-mix(in oklch, var(--fg) 6%, transparent);
--fg-softer: color-mix(in oklch, var(--fg) 3.5%, transparent);
/* 语义状态 */
--ok: var(--c-ok); --warn: var(--c-warn); --danger: var(--c-danger); --info: var(--c-info);
--ok-soft: color-mix(in oklch, var(--ok) 15%, transparent);
--warn-soft: color-mix(in oklch, var(--warn) 18%, transparent);
--danger-soft: color-mix(in oklch, var(--danger) 14%, transparent);
--info-soft: color-mix(in oklch, var(--info) 14%, transparent);
--ok-text: oklch(45% 0.13 152);
--warn-text: oklch(46% 0.12 70);
--danger-text: oklch(49% 0.19 27);
/* ═══ Layer 3 · 尺度令牌 ═══════════════════════════════════════════ */
/* 排版下限：任何文本不得小于 12px，保证可读性与触控体验 */
--fs-min: 12px;
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-pill: 999px;
--shadow: 0 8px 28px color-mix(in oklch, var(--n-1000) 14%, transparent);
--shadow-pop: 0 14px 38px color-mix(in oklch, var(--n-1000) 20%, transparent);
/* 层级：从页面内吸顶到全局提示，按用途取用，避免各页自定魔法数字 */
--z-topbar: 30;
--z-shell: 50;
--z-pop: 60;
--z-pop-raised: 61;
--z-help: 70;
--z-help-raised: 71;
--z-modal: 90;
--z-modal-raised: 91;
--z-drawer: 110;
--z-drawer-raised: 111;
--z-tip: 140;
--z-toast: 200;
--pad-x: 16px; /* 页面横向内边距 */
--bar-pad: 10px; /* 工具条纵向内边距 */
--row-pad-y: 9px; /* 列表行纵向内边距 */
--row-pad-x: 12px; /* 列表行横向内边距 */
--tree-pad-y: 6px; /* 目录树节点纵向内边距 */
--ctrl-h: 36px; /* 控件最小高度 / 触控目标 */
--gap-y: 8px; /* 控件组间距 */
color-scheme: light;
}
/* ═══ 暗色模式 ════════════════════════════════════════════════════════ */
:root[data-mode="dark"] {
--accent-l: calc(var(--accent-l-base) + 15%);
--accent-fl: calc(var(--accent-fl-base) + 1%);
--accent-on: var(--n-1000);
--accent-hover: oklch(calc(var(--accent-fl) + 5%) var(--accent-c) var(--accent-h));
--accent-active: oklch(calc(var(--accent-fl) + 9%) var(--accent-c) var(--accent-h));
--accent-soft: color-mix(in oklch, var(--accent) 18%, transparent);
--bg: var(--n-950);
--surface: var(--n-900);
--surface-2: var(--n-850);
--surface-3: var(--n-800);
--fg: var(--n-25);
--fg-2: var(--n-200);
--muted: var(--n-400);
--border: var(--n-800);
--border-strong: var(--n-700);
--chrome-bg: oklch(19% 0.016 250);
--chrome-fg: var(--n-25);
--media-bg: var(--n-1000);
--scrim: color-mix(in oklch, var(--n-1000) 62%, transparent);
--scrim-strong: color-mix(in oklch, var(--n-1000) 70%, transparent);
--fg-soft: color-mix(in oklch, var(--fg) 9%, transparent);
--fg-softer: color-mix(in oklch, var(--fg) 5%, transparent);
--ok-text: oklch(80% 0.13 152);
--warn-text: oklch(84% 0.13 78);
--danger-text: oklch(79% 0.15 25);
--shadow: 0 8px 28px color-mix(in oklch, oklch(0% 0 0) 55%, transparent);
--shadow-pop: 0 14px 38px color-mix(in oklch, oklch(0% 0 0) 66%, transparent);
color-scheme: dark;
}
/* ═══ 主题色预设 ══════════════════════════════════════════════════════
故意不带 :root 限定——任何元素只要挂上 data-accent 就能在自己的子树里
换色，控制面板里的色板圆点正是靠这一点复用语义令牌。 */
[data-accent="green"] { --accent-h: 145; --accent-c: 0.152; }
[data-accent="blue"] { --accent-h: 256; --accent-c: 0.155; }
[data-accent="violet"] { --accent-h: 295; --accent-c: 0.160; }
[data-accent="teal"] { --accent-h: 196; --accent-c: 0.118; }
[data-accent="amber"] { --accent-h: 74; --accent-c: 0.145; --accent-l-base: 46%; --accent-fl-base: 40%; }
[data-accent="rose"] { --accent-h: 18; --accent-c: 0.170; }
/* 复合令牌必须在带 data-accent 的元素上重新合成，子树才能就地换色。
（自定义属性在声明元素上完成 var() 替换，直接继承的是已算好的结果。） */
[data-accent] {
--accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
--accent-fill: oklch(var(--accent-fl) var(--accent-c) var(--accent-h));
}
/* ═══ 圆角档位 ════════════════════════════════════════════════════════ */
:root[data-radius="sharp"] { --radius-sm: 3px; --radius: 4px; --radius-lg: 6px; --radius-xl: 8px; }
:root[data-radius="round"] { --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-xl: 24px; }
/* ═══ 密度档位 ════════════════════════════════════════════════════════ */
:root[data-density="compact"] {
--pad-x: 12px; --bar-pad: 7px; --row-pad-y: 6px; --row-pad-x: 10px;
--tree-pad-y: 4px; --ctrl-h: 32px; --gap-y: 6px;
}
/* ═══ 基础层 ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0; background: var(--bg); color: var(--fg);
font-family: var(--font-body); font-size: 14px; line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--radius-sm); }
::selection { background: var(--accent-soft); }
.mono { font-family: var(--font-mono); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 统一 Toast 错误态（页面级 .toast 与外壳 .ams-toast 共用） */
.toast.err, .toast.danger, .ams-toast.err { border-color: var(--danger); color: var(--danger-text); }
.toast.err .ic, .toast.danger .ic, .ams-toast.err .ic { color: var(--danger-text); }
/* ═══ 极简页脚 ══════════════════════════════════════════════════════════ */
.ams-footer {
display: block;
flex: 0 0 auto;
height: 44px;
margin-top: 32px;
background: transparent;
color: var(--muted);
font-size: var(--fs-min);
line-height: 1.35;
}
.ams-footer-in {
width: 100%;
height: 100%;
padding: 0 var(--pad-x);
display: flex;
align-items: center;
gap: 6px 14px;
flex-wrap: nowrap;
}
.ams-footer-brand { color: var(--muted); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ams-footer-brand .fb-short { display: none; }
.ams-footer-ver { font-family: var(--font-mono); font-size: var(--fs-min); color: var(--fg-2); white-space: nowrap; }
.ams-footer-gap { flex: 1 1 auto; }
.ams-footer a, .ams-footer-link { color: var(--muted); white-space: nowrap; }
.ams-footer a:hover, .ams-footer-link:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.ams-footer-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.ams-footer--roomy { margin-top: 56px; }
@media (max-width: 560px) {
.ams-footer { margin-top: 24px; }
.ams-footer-in { height: 100%; padding-block: 0; gap: 3px 10px; }
.ams-footer-brand .fb-long { display: none; }
.ams-footer-brand .fb-short { display: inline; }
.ams-footer-gap { display: block; }
}