/* ============================================================
   设计令牌 —— Kittea Workspace的视觉基因
   一个手账本该有的样子：暖纸、墨水、铅笔阴影、和纸胶带
   ============================================================ */

:root {
  /* 纸与墨 */
  --paper: #f6efe3;
  --paper-1: #f1e8da;      /* 比 paper 深一档：粘滞composer 的渐变底、面板底 */
  --paper-2: #fdf8ef;
  --paper-3: #efe5d5;
  --paper-deep: #e8dcc9;   /* 引文 / 代码块 / 工具条按下态的底色 */
  --paper-edge: #e3d6c2;
  --ink: #33291f;
  --ink-soft: #6f6152;
  --ink-faint: #9c8d7b;
  --line: #c3b39a;
  --line-soft: #ddcfba;

  /* 手绘蜡笔色板（与后端 preferences.accent 的可选值一致） */
  --clay: #d97757;      /* 陶土红：主强调 */
  --clay-soft: #f2dcd1;
  --sage: #6b9b7a;      /* 苔绿：完成 / 安全 */
  --sage-soft: #dbe8dc;
  --mustard: #d9a039;   /* 芥末黄：提醒 / 待办 */
  --mustard-soft: #f4e5c6;
  --sky: #7f8fc4;       /* 雾蓝：聊天 / 文件 */
  --sky-soft: #dde3f0;
  --plum: #c98ba9;      /* 藕紫：心情 / 问答 */
  --plum-soft: #f0dde6;
  --slate: #8a8f98;     /* 石墨灰 */
  --highlight: #ffe9a8; /* 记号笔 */

  --accent: var(--clay);
  --accent-soft: var(--clay-soft);
  /* 「深一档」的文字用色：在白纸上要对比度够，不能直接拿 --accent。
     跟 --ink 混，夜色下 ink 是浅色、自动变亮，白天自动变深，两边都不会糊。 */
  --accent-deep: color-mix(in srgb, var(--accent) 62%, var(--ink));
  --sage-deep: color-mix(in srgb, var(--sage) 62%, var(--ink));

  /* 尺寸与节奏 */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-irregular: 18px 22px 19px 24px / 22px 18px 24px 19px;
  --r-irregular-2: 24px 16px 22px 18px / 17px 23px 18px 25px;

  --gap: 15px;
  --gap-sm: 8px;
  --gap-lg: 22px;

  --shadow-paper: 0 1px 0 rgba(51, 41, 31, .07), 2px 3px 0 rgba(51, 41, 31, .05), 0 6px 14px -8px rgba(51, 41, 31, .2);
  --shadow-lift: 0 2px 0 rgba(51, 41, 31, .09), 3px 4px 0 rgba(51, 41, 31, .07), 0 14px 26px -12px rgba(51, 41, 31, .34);
  --shadow-stamp: inset 0 0 0 2px currentColor;

  /* 字体 */
  --font-hand: 'LXGW WenKai', 'LXGW WenKai Screen', 'Ma Shan Zheng', 'Kaiti SC', 'STKaiti', KaiTi, serif;
  --font-display: 'Ma Shan Zheng', 'LXGW WenKai', 'Kaiti SC', 'STKaiti', serif;
  --font-ui: 'LXGW WenKai', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-26: 25px;
  --fs-34: 32px;

  /* 动效节奏（非线性弹簧与物理阻尼，杜绝机械淡入淡出） */
  --ease-hand: cubic-bezier(.22, .78, .28, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-spring: cubic-bezier(.2, 1.12, .32, 1);
  --ease-morph: cubic-bezier(.16, .88, .24, 1);
  --t-fast: 150ms;
  --t-base: 260ms;
  --t-slow: 420ms;

  --rail-w: 224px;

  /* ---------- 手机专用（之前完全没有） ----------
     --safe-* 跟着系统走：刘海、home 条、圆角屏幕都能让开
     --bar-h 是底部导航的高度，--tap 是手指能稳定按中的最小边长 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --tap: 44px;
  --bar-h: 76px;        /* 底部导航实高：6 + 62 + 6 + 描边 */
  --topbar-h: 56px;
  --fab-h: 52px;
}

/* ---------- 夜色手账 ---------- */
[data-theme="night"] {
  --paper: #211d18;
  --paper-2: #2b251e;
  --paper-3: #332b23;
  --paper-edge: #3d342a;
  --ink: #f0e6d6;
  --ink-soft: #bfae99;
  --ink-faint: #8d7f6d;
  --line: #5b4f41;
  --line-soft: #453b31;

  --clay: #e08a63;
  --clay-soft: #4a2f24;
  --sage: #93bf98;
  --sage-soft: #2b3a2d;
  --mustard: #e8be63;
  --mustard-soft: #3f3520;
  --sky: #93b6d2;
  --sky-soft: #293640;
  --plum: #cba2ba;
  --plum-soft: #3b2b34;
  --highlight: #5a4a1d;

  --shadow-paper: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 18px -10px rgba(0, 0, 0, .7);
  --shadow-lift: 0 2px 0 rgba(0, 0, 0, .35), 0 18px 34px -16px rgba(0, 0, 0, .8);
}

/* ---------- 强调色可换（用户偏好） ---------- */
/* 强调色由 JS 根据 preferences.accent 直写 --accent */

/* 用户自选强调色（后端 preferences.accent 直接给 hex）：
   soft 版本由它和纸色混出来，保证对比度不塌 */
:root { --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--paper-2)); }

/* ---------- 密度（紧凑 / 舒适） ---------- */
[data-density="compact"] { --gap: 11px; --gap-sm: 6px; --gap-lg: 16px; --rail-w: 202px; }
[data-density="cozy"]    { --gap: 15px; --gap-sm: 8px; --gap-lg: 22px; }
[data-density="roomy"]   { --gap: 22px; --gap-sm: 12px; --gap-lg: 34px; --rail-w: 248px; }

/* ---------- 字号 ---------- */
[data-font-size="small"]  { --fs-11: 10px; --fs-12: 11px; --fs-13: 12px; --fs-14: 13px; --fs-15: 14px; --fs-16: 15px; --fs-17: 16px; --fs-18: 17px; --fs-20: 18px; --fs-26: 23px; --fs-34: 29px; }
[data-font-size="medium"] { }
[data-font-size="large"]  { --fs-11: 12px; --fs-12: 13px; --fs-13: 14px; --fs-14: 15px; --fs-15: 16px; --fs-16: 17px; --fs-17: 19px; --fs-18: 20px; --fs-20: 22px; --fs-26: 28px; --fs-34: 38px; }

/* ---------- 动效偏好 ---------- */
[data-motion="calm"] { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;   /* 应用自己框住自己：文档滚不动，顶栏底栏就不可能被“视口变高”推走 */
}

html {
  /* 转屏 / 键盘弹出时别让系统偷偷改字号 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 手机点按钮会闪一块灰色方块，手绘画风里特别难看 */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-15);
  color: var(--ink);
  background-color: var(--paper);
  /* 直接把淡方格与微噪点烤在 body 底色上，不用 position:fixed + mix-blend-mode:multiply，
     滚动与手势动画时浏览器无需每帧重混整屏图层，GPU/CPU 占用大幅下降 */
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--line) 28%, transparent) 1px, transparent 0),
    repeating-linear-gradient(to right, color-mix(in srgb, var(--line-soft) 24%, transparent) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--line-soft) 24%, transparent) 0 1px, transparent 1px 28px);
  background-size: 14px 14px, 28px 28px, 28px 28px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 纸页边缘微暗角（纯静态渐变，不触发滤镜或混合模式重绘） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  contain: strict;
  background: radial-gradient(120% 95% at 50% 42%, transparent 62%, color-mix(in srgb, var(--paper-edge) 38%, transparent) 100%);
  opacity: .55;
}

[data-theme="night"] body::before { opacity: .35; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

::selection { background: var(--highlight); color: var(--ink); }

a { color: var(--accent); text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

.noscript {
  margin: 40px auto;
  max-width: 420px;
  padding: 20px;
  font-family: var(--font-hand);
  text-align: center;
}

.boot-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 90px 20px;
  color: var(--ink-soft);
  font-family: var(--font-hand);
  letter-spacing: .12em;
}

.boot-note span.boot-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  animation: bootBounce 1.1s var(--ease-hand) infinite;
}
.boot-note span.boot-dot:nth-child(2) { animation-delay: .14s; }
.boot-note span.boot-dot:nth-child(3) { animation-delay: .28s; }