/* 窗边 · 设计令牌与四时段基础(替代 01-base.css 的旧海风主题)
   规格来源:docs/窗边-双人空间视觉与交互重设计.md §10/§17/§18/§25
   保留旧变量名映射:--bg-primary/--bg-card/--text-primary 等仍输出,
   供未迁移的模块(骨架屏/onboarding/auth)过渡使用。 */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

button, a, [role="button"] { touch-action: manipulation; }

:root {
    /* 图层表 §18.3 */
    --z-deco: 0;
    --z-content: 1;
    --z-date: 10;
    --z-nav: 20;
    --z-newtip: 25;
    --z-mask: 40;
    --z-pop: 50;

    /* 尺寸契约 §18.1(360–599 基准;断点覆盖见下) */
    --side: 20px;
    --nav-h: 56px;
    --bottomnav-h: 64px;
    --bottomnav-reserve: 80px;   /* JS 实测实际高度+16 后覆盖 */
    --avatar-d: 56px;
    --scene-title: 30px;
    --read-max: 680px;
    --radius-page: 20px;
    --radius-surface: 14px;
    --radius-btn: 12px;
    --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px;
    --gap-6: 24px; --gap-8: 32px;
    --font-body: 18px;
    --ease: cubic-bezier(.3, .7, .3, 1);

    /* 旧变量兼容映射(未迁移模块仍引用) */
    --bg-primary: var(--bg);
    --bg-card: var(--paper);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-tertiary: var(--ink-2);
    --radius-md: var(--radius-surface);
    --radius-lg: var(--radius-page);
    --radius-pill: 999px;
    --shadow-card: var(--shadow-1);
    --header-h: 56px;
    --hairline: var(--line);
}

@media (max-width: 359.9px) {
    :root { --side: 16px; --avatar-d: 48px; --scene-title: 28px; }
}
@media (min-width: 600px) {
    :root { --side: 24px; --avatar-d: 64px; --scene-title: 32px; }
}

/* 白天:四段共用结构,环境光与表面温度做出可感知差异(§10.1/§19)
   清晨偏冷灰调 + 斜射金光;午后暖雾白 + 正顶暖光;傍晚加深的杏色暮光 */
html[data-theme="morning"],
html[data-theme="afternoon"],
html[data-theme="evening"] {
    --bg: #F6F3EC;
    --paper: #FFFCF6;
    --ink: #263C39;
    --ink-2: #586A64;
    --teal: #477B70;
    --teal-soft: #E3EDE9;
    --apricot: #AA6549;
    --apricot-soft: #F3E6DC;
    --line: rgba(38, 60, 57, .10);
    --btn-ink: #FFFCF6;
    --err: #A6452F;
    --shadow-1: 0 1px 3px rgba(38, 60, 57, .07);
    --shadow-2: 0 6px 20px rgba(38, 60, 57, .10);
}
html[data-theme="morning"]   { --bg: #F3F4EE; --scene-glow: #F2E2C4; --scene-op: .5; }
html[data-theme="afternoon"] { --bg: #F8F2E6; --scene-glow: #EBCFAB; --scene-op: .34; }
html[data-theme="evening"]   { --bg: #F1E5D4; --scene-glow: #E2AF88; --scene-op: .55; }

/* ---------- 夜间 §10.1 ---------- */
html[data-theme="night"] {
    --bg: #152426;
    --paper: #203235;
    --ink: #F0EDE5;
    --ink-2: #B3C2BC;
    --teal: #9BCDBD;
    --teal-soft: #2A4245;
    --apricot: #E4B69A;
    --apricot-soft: #463A31;
    --scene-glow: #675540;
    --scene-op: .55;
    --line: rgba(240, 237, 229, .14);
    --btn-ink: #152426;
    --err: #E8A08D;
    --shadow-1: 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, .4);
    --skeleton-base: #1C2E31;
    --skeleton-shine: #26403F;
    /* 旧模块变量兜底 */
    --bg-secondary: #1A2B2D;
    --bg-glass: rgba(21, 36, 38, .8);
    --text-muted: #8FA5A0;
}

/* ---------- 基础 ---------- */
html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC',
                 'MiSans', 'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: var(--font-body);
    line-height: 1.75;
    min-height: 100vh;
    min-height: 100dvh;
    overscroll-behavior-y: contain;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

:is(button, a, textarea, input, select, [tabindex]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--teal);
    border-radius: var(--radius-btn);
}

[hidden] { display: none !important; }

.app { max-width: var(--read-max); margin: 0 auto; min-height: 100dvh; }

/* 主按钮/次按钮/文本操作 §20.1 */
.btn-primary {
    background: var(--teal); color: var(--btn-ink);
    font-weight: 600; font-size: 16px;
    min-height: 44px; padding: 0 20px;
    border-radius: 999px;
    transition: transform .12s var(--ease);
}
.btn-primary:active:not(:disabled) { transform: scale(.98); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-line {
    padding: 6px 14px; border: 1px solid var(--line);
    border-radius: 999px; font-size: 14px; color: var(--teal);
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.btn-text { color: var(--teal); font-size: 14px; min-height: 44px; min-width: 44px; padding: 0 8px; }

/* 头像(首字母+稳定底色 §5.2) */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--avatar-d); height: var(--avatar-d);
    border-radius: 50%; font-size: calc(var(--avatar-d) * .36);
    font-weight: 600; flex: none; color: #FFFCF6;
}
html[data-theme="night"] .avatar { color: #152426; }
.avatar--sm { width: 28px; height: 28px; font-size: 13px; }
.avatar--teal { background: var(--teal); }
.avatar--apricot { background: var(--apricot); }

/* 首次淡入 §11(一次,不循环) */
@keyframes wb-fadein { from { opacity: 0; } to { opacity: 1; } }
.scene { animation: wb-fadein .22s var(--ease) 1; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
html[data-reduce] * { animation: none !important; transition: none !important; }