/* ================================================================
   Lucy 设计令牌 v2 — 电脑版和手机版共用
   颜色系统：OKLCH 感知均匀色彩，暖灰中性 + 珊瑚橙品牌色
   所有尺寸基于 4px 网格，间距 4/8/12/16/24/32/48/64
   ================================================================ */

:root {
  color-scheme: light dark;

  /* ── 字体 ── */
  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-num: "SF Pro Display", "DIN Alternate", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ── 中性色阶：暖灰 10 级，off-white/off-black ── */
  --n-0: #faf9f7;   /* 页面底色 */
  --n-1: #f5f3ef;   /* 浅表面 */
  --n-2: #edeae4;   /* 卡片底 */
  --n-3: #e2ddd6;   /* 分割线强 */
  --n-4: #cdc8bf;   /* 次要图标 */
  --n-5: #b4aea4;   /* 占位符 */
  --n-6: #8a8278;   /* 辅助文字 */
  --n-7: #5c5650;   /* 次要文字（AA ≥4.5:1 on n-0） */
  --n-8: #312e2a;   /* 主要文字深 */
  --n-9: #1a1815;   /* 正文 off-black */

  /* 语义角色 */
  --bg:       var(--n-0);
  --bg-elev:  var(--n-1);
  --surface:  #ffffff;
  --surface-2: var(--n-1);
  --surface-3: var(--n-2);
  --line:           rgba(26, 24, 21, .07);
  --line-strong:    rgba(26, 24, 21, .12);
  --ink:      var(--n-9);
  --ink-2:    var(--n-8);
  --ink-3:    var(--n-7);   /* AA 对比 ≥4.5:1 */
  --ink-inv:  #ffffff;

  /* ── 品牌：Lucy 珊瑚橙 ── */
  --accent:      #e05a2b;        /* 主色 */
  --accent-ink:  #b33f10;        /* 文字用（白底 ≥4.5） */
  --accent-soft: #fce8df;        /* 浅底 */
  --accent-dim:  rgba(224,90,43,.12);

  /* ── 极光渐变 ── */
  --glow-a: #ff7a45;   /* 暖橙 */
  --glow-b: #e0458a;   /* 玫红 */
  --glow-c: #7c5fff;   /* 靛紫 */
  --glow-d: #2ec4b6;   /* 青绿 */
  --grad: linear-gradient(135deg, var(--glow-a) 0%, var(--glow-b) 45%, var(--glow-c) 100%);
  --grad-soft: linear-gradient(135deg,
    color-mix(in srgb, var(--glow-a) 14%, transparent),
    color-mix(in srgb, var(--glow-c) 12%, transparent));

  /* ── 玻璃态 ── */
  --glass:      color-mix(in srgb, var(--bg-elev) 76%, transparent);
  --glass-card: color-mix(in srgb, var(--surface) 88%, transparent);
  --glass-line: rgba(26, 24, 21, .09);
  --aurora-op: 0.52;

  /* ── 语义色 ── */
  --cool:      #2878d6; --cool-ink: #1558a8; --cool-soft: #ddeefb;
  --heat:      #d97b26; --heat-ink: #9e520d; --heat-soft: #fce8d0;
  --ok:        #1f9c5e; --ok-ink:   #136e40; --ok-soft:   #d8f2e5;
  --warn:      #c98500; --warn-ink: #8a5a00; --warn-soft: #fdf2d0;
  --bad:       #cc3c3c; --bad-ink:  #a02020; --bad-soft:  #fce4e4;

  /* ── 圆角 ── */
  --r-s:  8px;
  --r:   14px;
  --r-l: 20px;
  --r-xl:28px;
  /* 兼容旧名 */
  --radius-s: var(--r-s);
  --radius:   var(--r);
  --radius-l: var(--r-l);
  --radius-xl: var(--r-xl);

  /* ── 阴影 ── */
  --shadow-1: 0 1px 3px rgba(26,24,21,.06), 0 1px 2px rgba(26,24,21,.04);
  --shadow-2: 0 4px 12px rgba(26,24,21,.07), 0 12px 32px -12px rgba(26,24,21,.14);
  --shadow-3: 0 16px 48px -12px rgba(26,24,21,.28);

  /* ── 动效 ── */
  --ease:   cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ── 布局 ── */
  --rail-w:    56px;
  --sidebar-w: 264px;
  --topbar-h:  56px;
  --col:       720px;
  --side-w:    var(--sidebar-w);
  --aurora-op: .52;
  --level: 0;
}

/* ── 深色模式 ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --n-0: #141210;
    --n-1: #1c1a17;
    --n-2: #252220;
    --n-3: #302d2a;
    --n-4: #4a4540;
    --n-5: #6a6460;
    --n-6: #918b84;
    --n-7: #b5afa8;   /* AA ≥4.5:1 on n-0 dark */
    --n-8: #d8d2ca;
    --n-9: #f0ece6;

    --surface:    #201e1b;
    --surface-2:  #262320;
    --surface-3:  #2e2b27;
    --line:           rgba(240, 236, 230, .07);
    --line-strong:    rgba(240, 236, 230, .12);

    --accent:     #f07240;
    --accent-ink: #ff9e74;    /* 深色模式文字用更亮 */
    --accent-soft: rgba(240, 114, 64, .16);
    --accent-dim:  rgba(240, 114, 64, .10);

    --glow-a: #ff8a52;
    --glow-b: #f05a9a;
    --glow-c: #8c72ff;
    --glow-d: #38d4c8;

    --glass:      color-mix(in srgb, var(--bg-elev) 68%, transparent);
    --glass-card: color-mix(in srgb, var(--surface) 82%, transparent);
    --glass-line: rgba(240, 236, 230, .08);
    --aurora-op: .36;

    --cool:      #4a9ee0; --cool-ink: #7cc4f8; --cool-soft: rgba(74,158,224,.15);
    --heat:      #e89840; --heat-ink: #f4bc72; --heat-soft: rgba(232,152,64,.15);
    --ok:        #38b878; --ok-ink:   #70d4a4; --ok-soft:   rgba(56,184,120,.15);
    --warn:      #e0aa30; --warn-ink: #f0c84c; --warn-soft: rgba(224,170,48,.15);
    --bad:       #e85454; --bad-ink:  #f49090; --bad-soft:  rgba(232,84,84,.15);

    --shadow-1: 0 1px 3px rgba(0,0,0,.25);
    --shadow-2: 0 4px 12px rgba(0,0,0,.22), 0 12px 32px -12px rgba(0,0,0,.45);
    --shadow-3: 0 16px 48px -12px rgba(0,0,0,.65);
  }
}

/* ── 基础重置 ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}