/**
 * 设计令牌 — 全站字体、字号、间距的唯一来源。
 * 改 UI 节奏时优先只改本文件，避免在多个 CSS 中散落改 px。
 *
 * 加载顺序：design-tokens → tw-built → bootstrap-shim → global → ui-theme（最后一层仅视觉覆盖）
 */
:root {
  /* ----- 画布与表面（浅色：暖灰纸感 + 现代对比） ----- */
  --dough-white: #f5f4ef;
  --obsidian-black: #0b0d12;
  --navbar-height: 40px;

  --c-text-primary: #1a1d24;
  --c-text-secondary: #5c6470;
  --c-border-primary: #e0ddd4;
  --c-border-strong: #cfc8bc;
  --c-bg-body: #ebe8e1;
  --c-bg-primary: #ffffff;
  --c-bg-secondary: #e8e6e0;
  --c-bg-button: #ffffff;

  /* 品牌主色：克制蓝灰，用于主按钮、焦点、侧栏选中 */
  --c-accent: #3d6a9e;
  --c-accent-hover: #335c88;
  --c-accent-muted: rgba(61, 106, 158, 0.12);
  --c-accent-border: rgba(61, 106, 158, 0.38);

  --c-danger: #b42318;
  --c-danger-hover: #951f15;
  --c-success: #0f766e;

  /* 顶栏 */
  --navbar-surface: #2c313a;
  --navbar-surface-border: #23272e;
  --navbar-fg: #f4f5f7;
  --navbar-fg-muted: #b4b9c2;
  --brand-heading-color: #b8d9f8;

  /* 侧栏选中（随深浅主题由 body.dark 覆盖变量） */
  --sidebar-active-bg: var(--c-accent-muted);
  --sidebar-active-border: var(--c-accent-border);

  --surface-elevated: #ffffff;
  --surface-subtle: #efede6;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.07);
  --shadow-modal: 0 16px 48px rgba(15, 23, 42, 0.12);
  --backdrop-scrim: rgba(10, 12, 18, 0.45);

  --focus-ring: 0 0 0 2px var(--dough-white), 0 0 0 4px var(--c-accent);
  --focus-ring-inset: inset 0 0 0 2px rgba(61, 106, 158, 0.35);

  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-normal: 200ms;

  --slider-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  --btn-primary-bg: var(--c-accent);
  --btn-primary-bg-hover: var(--c-accent-hover);
  --btn-primary-border: #33587f;

  /* ----- 字体栈 ----- */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: ui-monospace, "Roboto Mono", "Cascadia Code", "SF Mono", Consolas,
    "Liberation Mono", Menlo, monospace;

  /**
   * 字号刻度（以 16px 为根，便于与用户浏览器缩放一致）
   * 语义命名：caption / xs / sm / body / ui / md / editor / lg / xl / display
   */
  --font-size-micro: 0.5rem; /* 8px */
  --font-size-3xs: 0.5625rem; /* 9px */
  --font-size-caption: 0.625rem; /* 10px */
  --font-size-2xs: 0.6875rem; /* 11px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.8125rem; /* 13px */
  --font-size-body: 0.875rem; /* 14px — 侧栏条目、正文辅级 */
  --font-size-ui: 0.9375rem; /* 15px — 顶栏品牌、表单标签 */
  --font-size-md: 1rem; /* 16px — 输入框、正文主级 */
  --font-size-editor: 1.0625rem; /* 17px — 编辑区 */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-xl-alt: 1.375rem; /* 22px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-stat: 1.625rem; /* 26px */
  --font-size-display-sm: 1.75rem; /* 28px — 门禁标题、大数字 */
  --font-size-display: 2rem; /* 32px — 预留 */
  /* 独立页标题 / 次要说明（如分享页） */
  --font-size-heading-sm: 1.35rem;
  --font-size-meta: 0.8rem;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.55;

  /**
   * 间距刻度（4px 基准 + 常用 6/10）
   */
  --space-0: 0;
  --space-1: 4px;
  --space-1-25: 5px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-75: 15px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 48px;

  /* 语义别名（组件可读性） */
  --gap-tight: var(--space-1);
  --gap-sm: var(--space-2);
  --gap-md: var(--space-3);
  --gap-lg: var(--space-4);
  --gap-xl: var(--space-5);

  /* 顶栏与工具区（与 notepad-navbar 规则对齐） */
  --navbar-toolbar-gap: var(--space-3);
  --notepad-navbar-gap: var(--space-3);

  /* 圆角（与现有界面一致的可调入口） */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 14px;

  /* 页面安全区内边距（顶栏容器等） */
  --page-inline-padding: max(var(--space-3), env(safe-area-inset-left, 0px));
  --page-inline-padding-end: max(var(--space-3), env(safe-area-inset-right, 0px));
  
  /* 按钮高度 */
  --btn-height-sm: 40px;
  --btn-height-md: 44px;
  --btn-height-lg: 48px;
  --btn-height-xl: 52px;
  
  /* Logo尺寸 */
  --logo-width-sm: 36px;
  --logo-height-sm: 44px;
  --logo-radius-sm: 9px;
  
  --logo-width-md: 40px;
  --logo-height-md: 48px;
  --logo-radius-md: 10px;
  
  --logo-width-lg: 44px;
  --logo-height-lg: 52px;
  --logo-radius-lg: 11px;
  
  --logo-width-xl: 48px;
  --logo-height-xl: 56px;
  --logo-radius-xl: 12px;
  
  /* Logo线条位置 */
  --logo-line-left-sm: 8px;
  --logo-line-top-sm: 12px;
  
  --logo-line-left-md: 9px;
  --logo-line-top-md: 13px;
  
  --logo-line-left-lg: 10px;
  --logo-line-top-lg: 14px;
  
  --logo-line-left-xl: 11px;
  --logo-line-top-xl: 15px;
  
  /* 动画位移 */
  --translate-y-sm: -1px;
  --translate-y-md: -2px;
  --translate-y-lg: -5px;
  --translate-y-xl: -10px;
  --translate-y-2xl: -20px;
  
  /* 阴影尺寸 */
  --shadow-spread-sm: 3px;
  --shadow-spread-md: 4px;
  
  /* 边框宽度 */
  --border-width-sm: 1px;
  --border-width-md: 2px;
  
  /* 模糊效果 */
  --blur-md: 16px;
}


html {
  font-size: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ----- 深色主题：覆写语义变量（脚本将 `dark` 加在 body） ----- */
body.dark {
  --dough-white: #161b22;
  --obsidian-black: #0d0f14;
  --c-text-primary: #e8eaef;
  --c-text-secondary: #9aa3b2;
  --c-border-primary: #2d3644;
  --c-border-strong: #3d4756;
  --c-bg-body: #0f1218;
  --c-bg-primary: #1a1f28;
  --c-bg-secondary: #242b35;
  --c-bg-button: #222830;

  --c-accent: #6ea8e8;
  --c-accent-hover: #86b6ef;
  --c-accent-muted: rgba(110, 168, 232, 0.18);
  --c-accent-border: rgba(110, 168, 232, 0.42);

  --c-danger: #f87171;
  --c-danger-hover: #fca5a5;
  --c-success: #2dd4bf;

  --navbar-surface: #12161d;
  --navbar-surface-border: #0a0c10;
  --navbar-fg: #eef0f3;
  --navbar-fg-muted: #9aa0a8;
  --brand-heading-color: #9dc5f0;

  --sidebar-active-bg: rgba(110, 168, 232, 0.2);
  --sidebar-active-border: rgba(140, 190, 245, 0.45);

  --surface-elevated: #1c222c;
  --surface-subtle: #181d26;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 20px 56px rgba(0, 0, 0, 0.55);
  --backdrop-scrim: rgba(4, 6, 10, 0.68);

  --focus-ring: 0 0 0 2px var(--obsidian-black), 0 0 0 4px var(--c-accent);
  --slider-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.04);

  --btn-primary-border: #5488c4;
}

/* ----- 分享页（独立 HTML，用 class 限定配色，避免影响主应用） ----- */
html.share-page {
  --share-bg: var(--dough-white);
  --share-text: var(--c-text-primary);
  --share-muted: var(--c-text-secondary);
  --share-err: #c0392b;
  --share-border: #ddd;
}

@media (prefers-color-scheme: dark) {
  html.share-page {
    --share-bg: var(--obsidian-black);
    --share-text: #e4e4e4;
    --share-muted: #9aa0a6;
    --share-err: #ff8a80;
    --share-border: #30363d;
  }
}