/* ==========================================================================
   OTIA 设计 token：Hub、意见墙、FOOD、后台共用这一份。
   页面样式只引用这里的变量；新增颜色、字号、时长先加到这里再用。
   ========================================================================== */

:root {
  /* ---------- 纸与墨 ---------- */
  --paper:        #FBF6EC;
  --paper-sunk:   #F3EADA;
  --paper-deep:   #EEE7D8;
  --card:         #FFFFFF;
  --ink:          #191510;
  --ink-70:       #57504a;
  /* 线条、虚线、装饰用；做文字对比度不够 */
  --ink-45:       #8b837b;
  /* 小号灰字用：米色底 5.2:1，黄便利贴 4.7:1 */
  --ink-muted:    #6e665d;

  /* 墨色透明度，用于柔和分隔线与二级投影 */
  --ink-a10:      rgba(25, 21, 16, 0.10);
  --ink-a15:      rgba(25, 21, 16, 0.15);
  --ink-a20:      rgba(25, 21, 16, 0.20);
  --ink-a25:      rgba(25, 21, 16, 0.25);
  --ink-a50:      rgba(25, 21, 16, 0.50);
  --scrim:        rgba(25, 21, 16, 0.42);
  /* 便利贴上的半透明白底（按钮、官方回复） */
  --glaze:        rgba(255, 255, 255, 0.68);
  /* 深色底上的文字 */
  --on-strong:    #FFFFFF;

  /* ---------- 主色与状态 ---------- */
  --accent:       #FFCE45;
  --accent-deep:  #F3B01C;
  --ok:           #3F8F5B;
  --ok-strong:    #2F7349;
  --danger:       #E4572E;
  --danger-strong:#C2451F;
  --danger-halo:  rgba(228, 87, 46, 0.22);
  --star:         #B87900;

  /* ---------- 便利贴 ---------- */
  --note-yellow:  #FFE9A8;
  --note-pink:    #FFD3D3;
  --note-blue:    #C7E4FA;
  --note-green:   #CDEBC5;
  --note-purple:  #E0D6FB;
  --note-white:   #FFFFFF;
  --note-sage:    #D5E5C1;
  --note-cream:   #FFF9E6;
  --note-rose:    #E7A9A7;

  /* FOOD 的饱和色块（餐次图标、标签） */
  --swatch-red:    #E76045;
  --swatch-green:  #73AD72;
  --swatch-blue:   #79ADD1;
  --swatch-pink:   #E9A8A4;
  --swatch-purple: #9B8CC7;
  --swatch-olive:  #526A4A;

  /* 胶带 */
  --tape:         rgba(255, 255, 255, 0.55);
  --tape-kraft:   rgba(233, 220, 188, 0.74);
  --tape-edge:    rgba(25, 21, 16, 0.25);

  /* ---------- 字体 ---------- */
  /* 拉丁字母用自托管的 Space Grotesk，中文交给系统黑体 */
  --font: "Space Grotesk", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
          "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* 字号层级：display / heading / body / caption */
  --fs-display:   clamp(40px, 5.2vw, 64px);
  --fs-h1:        clamp(30px, 4.6vw, 48px);
  --fs-h2:        clamp(21px, 2.4vw, 25px);
  --fs-h3:        18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   12px;
  /* 等宽小标签。功能性文字不低于这个值，插画里的装饰字除外 */
  --fs-micro:     11px;

  --lh-tight:     1.12;
  --lh-heading:   1.25;
  --lh-body:      1.6;
  /* 中文正文需要比拉丁字更松的行高 */
  --lh-cjk:       1.75;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      700;

  /* ---------- 间距（4px 基准） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---------- 描边、圆角、投影 ---------- */
  --bw:           2px;
  --bw-thick:     3px;
  --line:         var(--bw) solid var(--ink);

  --r-xs:         4px;
  --r-sm:         8px;
  --r-md:         12px;
  --r-lg:         16px;
  --r-pill:       999px;
  /* 四角不一样，手撕纸的感觉 */
  --r-note:       4px 14px 6px 12px;

  /* 老名字，保留给现有样式 */
  --r-card:       var(--r-lg);
  --r-input:      var(--r-md);

  /* 硬投影层级：贴着 → 放着 → 拿起来 → 浮起来 */
  --shadow-xs:    2px 2px 0 var(--ink);
  --shadow-sm:    3px 3px 0 var(--ink);
  --shadow:       4px 4px 0 var(--ink);
  --shadow-lg:    6px 6px 0 var(--ink);
  --shadow-xl:    8px 8px 0 var(--ink);

  /* ---------- 焦点 ---------- */
  --focus-ring:   0 0 0 3px var(--paper), 0 0 0 6px var(--ink);
  --focus-outline: 3px solid var(--ink);
  --focus-offset: 3px;

  /* ---------- 动效语法 ---------- */
  /* 按下 / 微交互 / 元素进出 / 页面切换 */
  --dur-press:    120ms;
  --dur-fast:     180ms;
  --dur-base:     240ms;
  --dur-enter:    320ms;
  --dur-page:     420ms;
  --dur-reveal:   900ms;
  /* 循环提示（骨架呼吸、进行中脉冲），减少动态效果时直接关掉 */
  --dur-loop:     1600ms;

  /* 落定：快起慢停，大多数动效用这个 */
  --ease-out:     cubic-bezier(.22, .72, .24, 1);
  /* 按下：干脆 */
  --ease-press:   cubic-bezier(.3, .7, .4, 1);
  /* 拿起：一点点过冲，像纸张有重量地弹一下，不飘 */
  --ease-lift:    cubic-bezier(.34, 1.28, .64, 1);
  /* 离场与往返 */
  --ease-in-out:  cubic-bezier(.65, 0, .35, 1);

  --wrap: 1160px;

  /* 顶层层级 */
  --z-bar: 40;
  --z-sheet: 100;
  --z-toast: 200;
}

/* 自托管的可变字体，只含拉丁字符（22KB）。
   国内访问不了 Google Fonts，所以字体文件必须放在自己服务器上。
   unicode-range 限制成拉丁范围，中文自然回落到系统黑体，不会白等。 */
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                 U+2215, U+FEFF, U+FFFD;
}

/* ---------- 全站共用的交互状态 ---------- */

/* 鼠标点击不出框，键盘 Tab 到一定看得见 */
:focus { outline: none; }
:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

/* 异步进行中：按钮保留宽度，文字换成转圈 */
[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid var(--ink);
  border-right-color: transparent;
  border-radius: 50%;
  animation: otia-spin 700ms linear infinite;
}
@keyframes otia-spin { to { transform: rotate(360deg); } }

/* 滚动入场：motion.js 只给首屏以外的 [data-reveal] 加 reveal-pending，
   进入视口时加 is-in，只播一次。脚本没跑起来时内容照常可见。 */
.reveal-pending { opacity: 0; transform: translateY(10px); }
.reveal-pending.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
}

/* 系统开了「减少动态效果」：去掉位移、缩放、旋转类动画，只保留透明度渐变 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-enter: 160ms;
    --dur-page: 1ms;
    --dur-reveal: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .reveal-pending { transform: none; }
  .reveal-pending.is-in { transition: opacity var(--dur-enter) linear; }
  button[aria-busy="true"]::after { animation: none; border-right-color: var(--ink); opacity: .5; }
}