/* ==========================================================================
   个人知识碎片沉淀站 · Design Tokens v1.0
   --------------------------------------------------------------------------
   锚定：SPEC.md v1.0 §8（锁定色值）  |  设计师：颜好看  |  2026-07-25
   架构：L1 primitives → L2 semantic → L3 component → L4 page（只许向下引用）
   纪律（P0，违反即退回）：
   - L1 之外禁止出现裸 hex 值（全项目唯一例外：#fff / #000）
   - 禁止 emoji 作功能图标（唯一图标源：Lucide 1.26.0，见 DESIGN.md §4）
   - 禁止紫→粉渐变及 Indigo→Pink 任意渐变组合
   - 动效收敛 150ms ease-out；禁止弹跳缓动 cubic-bezier(0.68,-0.55,0.265,1.55)
   ========================================================================== */

:root {

  /* ========================================================================
     L1 · PRIMITIVES — 原始色板（全站唯一允许书写 hex 的层；业务代码禁直引）
     ======================================================================== */

  /* slate 中性阶（冷灰带微蓝相，禁纯灰纯黑） */
  --slate-0:   #FFFFFF;
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* steel 钢青墨阶（品牌主色族，cyan-800 系） */
  --steel-50:  #ECF4F6;   /* 8% 淡底：选中态/hover 衬底 */
  --steel-100: #D0E4EA;
  --steel-700: #0E7490;   /* SPEC §8 锁定 accent */
  --steel-800: #155E75;   /* SPEC §8 锁定 accent-hover */
  --steel-900: #13566C;   /* 裁决：active = hover 再压暗 8%（DESIGN.md §2 记录） */

  /* RGB 三通道原语（供 rgba() 透明场景引用，禁业务侧另写数值） */
  --slate-900-rgb: 15, 23, 42;
  --steel-700-rgb: 14, 116, 144;

  /* dark 深色阶原语（MVP 不启用；fast-follow 时 [data-theme="dark"] 直接映射） */
  --dark-bg-0:   #0B0F14;
  --dark-bg-1:   #11161D;
  --dark-bg-2:   #1A212B;
  --dark-fg-0:   #E6EBF0;
  --dark-fg-1:   #B9C2CC;
  --dark-fg-2:   #8A94A1;
  --dark-fg-3:   #5C6672;
  --dark-line-0: #262F3A;
  --dark-line-1: #1A212B;
  --dark-steel-400: #2AA5C4;
  --dark-steel-400-rgb: 42, 165, 196;
  --dark-steel-300: #4AB8D3;
  --dark-steel-500: #1E8FAB;
  --dark-steel-900: #06232B;
  --dark-steel-950: #12303A;
  --dark-mark-bg: #6B5D1F;
  --dark-mark-fg: #F5F1E0;

  /* 语义色 primitives（SPEC §8 锁定） */
  --green-600: #16A34A;
  --green-50:  #F0FDF4;
  --amber-600: #D97706;
  --amber-50:  #FFFBEB;
  --red-600:   #DC2626;
  --red-700:   #B91C1C;
  --red-50:    #FEF2F2;
  --yellow-200:#FEF08A;   /* mark 高亮（荧光笔批注意象） */

  /* ========================================================================
     L2 · SEMANTIC — 语义别名（业务代码只引用本层及以下）
     ======================================================================== */

  /* 表面 */
  --bg:           var(--slate-50);
  --surface:      var(--slate-0);
  --surface-warm: var(--slate-100);

  /* 前景（对比度核算见 DESIGN.md §2：muted 为正文级下限，meta 仅装饰/冗余） */
  --fg:    var(--slate-900);
  --fg-2:  var(--slate-700);
  --muted: var(--slate-500);
  --meta:  var(--slate-400);

  /* 边框 */
  --border:      var(--slate-200);
  --border-soft: var(--slate-100);

  /* 品牌强调（每屏 ≤2 处可见使用，SPEC §8 纪律） */
  --accent:        var(--steel-700);
  --accent-hover:  var(--steel-800);
  --accent-active: var(--steel-900);
  --accent-on:     var(--slate-0);
  --accent-soft:   var(--steel-50);

  /* 语义色 */
  --success:      var(--green-600);
  --success-soft: var(--green-50);
  --warn:         var(--amber-600);
  --warn-soft:    var(--amber-50);
  --danger:       var(--red-600);
  --danger-hover: var(--red-700);
  --danger-soft:  var(--red-50);

  /* 搜索高亮（荧光笔批注，不是 accent 系——避免与强调色争频） */
  --mark-bg: var(--yellow-200);
  --mark-fg: var(--slate-900);

  /* 聚焦环（3px，钢青墨 35% 透明度） */
  --focus-ring: 0 0 0 3px rgba(var(--steel-700-rgb), 0.35);

  /* ========================================================================
     L3 · COMPONENT — 组件槽位
     ======================================================================== */

  /* 按钮 */
  --btn-primary-bg:     var(--accent);
  --btn-primary-fg:     var(--accent-on);
  --btn-primary-hover:  var(--accent-hover);
  --btn-primary-active: var(--accent-active);
  --btn-ghost-fg:       var(--fg-2);
  --btn-ghost-hover-bg: var(--surface-warm);
  --btn-danger-bg:      var(--danger);
  --btn-danger-fg:      var(--slate-0);
  --btn-danger-hover:   var(--danger-hover);

  /* 输入框 / 快记框 */
  --input-bg:           var(--surface);
  --input-border:       var(--border);
  --input-fg:           var(--fg);
  --input-placeholder:  var(--meta);
  --input-focus-border: var(--accent);
  --input-error-border: var(--danger);
  --input-disabled-bg:  var(--surface-warm);

  /* 卡片（memo / 搜索结果） */
  --card-bg:           var(--surface);
  --card-border:       var(--border);
  --card-hover-border: var(--slate-300);

  /* 徽标（类型/可见性：中性，不用颜色区分公开私密——用图标+文字） */
  --badge-bg: var(--surface-warm);
  --badge-fg: var(--fg-2);

  /* 骨架屏（微光扫过，非闪烁） */
  --skeleton-base:  var(--slate-100);
  --skeleton-shine: rgba(255, 255, 255, 0.72);

  /* 后台表格 */
  --table-head-fg:   var(--muted);
  --table-row-hover: var(--surface-warm);
  --table-border:    var(--border-soft);

  /* 日期分隔线 / 卷宗分隔 */
  --divider-line: var(--border);
  --divider-fg:   var(--meta);

  /* AI 对话问/答分段左边线 */
  --dialogue-rule: var(--border);
  --dialogue-q-bg: var(--surface-warm);

  /* Toast */
  --toast-bg: var(--slate-800);
  --toast-fg: var(--slate-50);

  /* ========================================================================
     L4 · PAGE — 页面级槽位（仅页面容器引用，数量从简）
     ======================================================================== */

  --page-timeline-bg: var(--bg);
  --page-reader-bg:   var(--surface);   /* 详情页阅读层：纯白衬底，内文舒展 */
  --page-admin-bg:    var(--bg);
  --page-archive-bg:  var(--bg);

  /* ========================================================================
     排版（A1-identity：字体栈英文在前，中文回落系统栈，零 webfont 中文加载）
     ======================================================================== */

  --font-body: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 字号 7 级（之外禁用） */
  --text-xs:   0.75rem;    /* 12px 徽标/辅助 */
  --text-sm:   0.8125rem;  /* 13px 元数据/时间戳 */
  --text-md:   0.875rem;   /* 14px 后台表格/次级正文 */
  --text-base: 1rem;       /* 16px 正文（阅读层基准） */
  --text-lg:   1.25rem;    /* 20px 小节标题/卡片题 */
  --text-xl:   1.5rem;     /* 24px 页面标题 */
  --text-2xl:  2rem;       /* 32px 详情页大标题 */

  /* 字重 3 级（510/590 走 Inter 可变字重；系统字体自动回落最近档） */
  --weight-regular: 400;
  --weight-medium:  510;
  --weight-semibold: 590;

  /* 行高 */
  --leading-body:  1.75;   /* 中文长文阅读层 */
  --leading-ui:    1.5;    /* UI 控件/短文本 */
  --leading-tight: 1.3;    /* 标题 */
  --leading-badge: 1.2;    /* 徽标单行 */

  /* 字距（标题负字距；中文正文不加字距） */
  --tracking-display: -0.01em;
  --tracking-caps:    0.06em;

  /* ========================================================================
     间距（4px 基准网格，之外禁用）
     ======================================================================== */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ========================================================================
     圆角（上限 12px，禁过度圆角）
     ======================================================================== */

  --radius-sm:   4px;     /* 徽标/标签/代码内联 */
  --radius-md:   8px;     /* 按钮/输入框/小卡 */
  --radius-lg:   12px;    /* memo 卡片/弹层 */
  --radius-pill: 9999px;  /* 仅头像/徽标胶囊（本项目无头像，慎用） */

  /* ========================================================================
     层级与阴影（浅色主题克制：以 1px 边框环为主，阴影仅给"浮起"元素）
     ======================================================================== */

  --elev-flat:   none;
  --elev-ring:   0 0 0 1px var(--border);
  --elev-raised: 0 1px 2px rgba(var(--slate-900-rgb), 0.04), 0 4px 12px rgba(var(--slate-900-rgb), 0.06);
  --elev-overlay: 0 8px 24px rgba(var(--slate-900-rgb), 0.12), 0 2px 6px rgba(var(--slate-900-rgb), 0.08);

  /* ========================================================================
     动效（150ms ease-out 收敛；禁弹跳缓动）
     ======================================================================== */

  --motion-fast:   100ms;  /* 按下/勾选即时反馈 */
  --motion-base:   150ms;  /* hover/变色/展开收敛值 */
  --motion-enter:  200ms;  /* 抽屉/Toast 进入上限 */
  --ease-standard: cubic-bezier(0, 0, 0.2, 1);

  /* ========================================================================
     布局（断点值仅作文档参照，媒体查询中需写字面量——CSS 变量不进 @media）
     断点：768px / 1024px（SPEC §10 锁定）
     ======================================================================== */

  --measure:      680px;   /* 阅读/信息流容器恒定宽度（SPEC §10 锁定） */
  --sidebar-w:    240px;   /* PC 左栏（≥1024px） */
  --header-h:     56px;    /* H5 顶栏 */
  --quicknote-h:  48px;    /* H5 底部输入栏最小高（拇指热区） */
  --touch-min:    44px;    /* 触控目标下限 */
  --reader-pad-x: 24px;    /* 阅读容器左右内边距下限 → 内容 ≈632px ≈ 40 字 */

  /* ========================================================================
     z-index 阶梯
     ======================================================================== */

  --z-base:    0;
  --z-sticky:  100;   /* H5 底部输入栏 / PC 顶部快记框 */
  --z-drawer:  200;   /* H5 抽屉导航 */
  --z-modal:   300;   /* 确认对话框 / ActionSheet */
  --z-toast:   400;   /* Toast */
}

/* ==========================================================================
   深色主题 · 预留块（MVP 不启用 —— SPEC §3 Out-of-Scope "fast-follow"）
   届时仅需填充本块 + 10 行 JS 翻转 data-theme，业务代码零改动。
   暗色纪律（flomo 经验）：必须专门调校对比度，禁止简单反色；
   层级用亮度递进（bg 最深 → surface 渐亮）代替阴影加深。
   取值全部引用 L1 dark 原语（上方 --dark-*），本块零 hex。
   ==========================================================================

[data-theme="dark"] {
  --bg:           var(--dark-bg-0);
  --surface:      var(--dark-bg-1);
  --surface-warm: var(--dark-bg-2);
  --fg:           var(--dark-fg-0);
  --fg-2:         var(--dark-fg-1);
  --muted:        var(--dark-fg-2);
  --meta:         var(--dark-fg-3);
  --border:       var(--dark-line-0);
  --border-soft:  var(--dark-line-1);
  --accent:       var(--dark-steel-400);
  --accent-hover: var(--dark-steel-300);
  --accent-active:var(--dark-steel-500);
  --accent-on:    var(--dark-steel-900);
  --accent-soft:  var(--dark-steel-950);
  --mark-bg:      var(--dark-mark-bg);
  --mark-fg:      var(--dark-mark-fg);
  --focus-ring:   0 0 0 3px rgba(var(--dark-steel-400-rgb), 0.4);
}

   ========================================================================== */

/* ==========================================================================
   动效降级（无障碍硬性要求，全站生效）
   ========================================================================== */

@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;
  }
}