/* ==========================================================================
   Lamplet · 书桌（v7）设计变量
   低头看自己的书桌：顶上一根磁吸灯条照着桌面，灯下一张信纸。
   光源只有一个，在上面：所有物件的影子朝下，高光在上沿。
   设计说明：UI改版/设计说明.md

   分法照 DeepSeek Harness 的 ui-theme：
   - 先有材质色（木、纸、卡、便利贴、铝、液晶），再有语义角色（桌面上的字、纸上的字、线、状态）
   - 页面和组件只用语义角色，不写颜色字面量，不写主题选择器（主题只在本文件）
   - 字号和行高成对给出；圆角按用途分六档；浮起的面用阴影里的发丝描边，不另加边框
   ========================================================================== */

:root {
  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  --font-kai: 'WenKai', 'LXGW WenKai', 'Kaiti SC', 'STKaiti', 'KaiTi', serif;
  --font-num: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* 字号 / 行高：成对使用 */
  --t-display: 400 30px/42px var(--font-kai); /* 信纸上的“现在做” */
  --t-title: 400 26px/34px var(--font-kai); /* 页面标题 */
  --t-section: 400 20px/28px var(--font-kai); /* 区块标题 */
  --t-item: 400 16px/24px var(--font-kai); /* 任务名、卡片标题、导师的话 */
  --t-body: 400 15px/24px var(--font); /* 正文 */
  --t-ui: 400 14px/22px var(--font); /* 按钮、表单 */
  --t-small: 400 13px/20px var(--font); /* 说明、元信息 */
  --t-caption: 400 12px/18px var(--font); /* 角标、标签 */

  /* 圆角：按用途 */
  --r-xs: 4px; /* 低于 20 高的小东西 */
  --r-sm: 8px; /* 20–28 高的紧凑控件 */
  --r-md: 12px; /* 32–40 高的按钮、输入、单行 */
  --r-lg: 16px; /* 多行、分组 */
  --r-xl: 20px; /* 独立的卡片、桌垫 */
  --r-panel: 28px; /* 主容器：导师面板、弹层、输入框 */
  --r-paper: 3px; /* 纸：本来就是方角 */

  /* 动效 */
  --ease: cubic-bezier(0.32, 0.72, 0, 1); /* 滑入：抽屉阻尼 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-click: cubic-bezier(0.34, 1.4, 0.64, 1); /* 咔嗒：一点点过冲，只给小东西 */
  --d-fast: 120ms;
  --d: 200ms;
  --d-slow: 340ms;

  /* 版面 */
  --topbar-h: 52px;
  --lamp-h: 50px;
  --ai-w: 420px;
  --pill-h: 52px;
  --tab-h: 58px; /* 手机底部标签栏 */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --page-w: 1120px;

  /* 灯：亮度 0–1（开着是 1，见下面的 .lamp-lit），颜色由旋钮调（2700–4500K） */
  --warm: 255, 214, 150;
  --lamp: 0;
}

/* —— 白天：浅橡木桌面，灯关着 —— */
:root {
  color-scheme: light;
  --desk: #d6c3a3;
  --desk-2: #e2d1b3;
  --wood: 0.36; /* 木纹的浓淡 */
  --vignette: rgba(90, 60, 30, 0.12);

  --ink: #2a2420;
  --ink-2: #594e43;
  --ink-3: #6e6255;
  --line: rgba(60, 40, 20, 0.14);
  --line-2: rgba(60, 40, 20, 0.24);
  --hover: rgba(60, 40, 20, 0.06);
  --press: rgba(60, 40, 20, 0.1);

  --mat: #f8f3ea; /* 桌垫：成组的内容放在上面 */
  --mat-2: #f1eadd;
  --mat-ink: #2a2420;
  --mat-ink-2: #5d5247;
  --mat-ink-3: #6f6355;
  --mat-line: rgba(60, 40, 20, 0.12);

  --panel: #fffdf8; /* 浮起的面板：导师、弹层、菜单 */
  --panel-2: #f6f1e7;
  --panel-3: #ece5d7;

  --paper: #fffdf8;
  --paper-2: #f5efe3;
  --paper-ink: #24262b;
  --paper-ink-2: #565a62;
  --paper-line: rgba(36, 38, 43, 0.1);
  --card: #fffaf0;
  --card-red: rgba(184, 70, 52, 0.36);
  --card-blue: rgba(52, 96, 160, 0.14);
  --ticket: #fffaf0; /* 课票：票面和票根 */
  --ticket-2: #f4ecdb;
  --ticket-now: #f8e6c4;
  --ticket-perf: rgba(60, 40, 20, 0.3);
  --ticket-accent: #9a560a;
  --ticket-shadow: drop-shadow(0 1px 0.5px rgba(70, 45, 20, 0.16)) drop-shadow(0 7px 8px rgba(70, 45, 20, 0.16));
  --sticky: #f2df9c;
  --sticky-ink: #3a3018;
  --tray: #c49e72;
  --tray-2: #ad875e;
  --tray-rim: #93704b;

  --accent: #9a560a;
  --on-accent: #fff9ef;
  --accent-soft: rgba(154, 86, 10, 0.1);
  --ok: #4f7a3f;
  --ok-soft: rgba(79, 122, 63, 0.13);
  --warn: #8a5e0c;
  --warn-soft: rgba(176, 124, 20, 0.14);
  --danger: #b03e2a;
  --danger-soft: rgba(176, 62, 42, 0.1);
  --idle: rgba(60, 40, 20, 0.28);
  --ink-blue: #2c4778; /* 手绘的勾 */

  /* 白天开灯：浅色桌面上用「柔光」叠一层暖光，只是暖一点、亮一点，不会把桌面冲白 */
  --cast-blend: soft-light;
  --cast-k: 100%;
  --cast-key: 100%;
  --near-a: 0.2;

  --alu-1: #f7f7f5;
  --alu-2: #d5d7d9;
  --alu-3: #abafb4;
  --alu-4: #80858b;
  --clock-body: #ebe7df;
  --clock-body-2: #fbf9f4;
  --lcd: #15171b;
  --seg: 255, 226, 186;

  --shadow-1: 0 1px 1px rgba(70, 45, 20, 0.14), 0 6px 12px -8px rgba(70, 45, 20, 0.3); /* 贴着桌面的纸 */
  --shadow-2: 0 1px 1px rgba(70, 45, 20, 0.14), 0 14px 24px -14px rgba(70, 45, 20, 0.42); /* 卡、便利贴、闹钟 */
  --shadow-3: 0 2px 3px rgba(70, 45, 20, 0.12), 0 26px 46px -22px rgba(70, 45, 20, 0.5); /* 灯下的信纸 */
  --elev-stroke: rgba(60, 40, 20, 0.16);
  --elev-panel: 0 0 0 0.5px var(--elev-stroke), 0 3px 8px rgba(40, 25, 10, 0.05), 0 0 22px rgba(40, 25, 10, 0.06);
  --elev-prominent: 0 0 0 0.5px var(--elev-stroke), 0 8px 18px rgba(40, 25, 10, 0.08), 0 24px 60px -12px rgba(40, 25, 10, 0.22);
  --elev-soft: 0 0 0 0.5px var(--elev-stroke), 0 4px 16px rgba(40, 25, 10, 0.06), 0 0 26px rgba(40, 25, 10, 0.05);
  --desk-text-shadow: none; /* 直接写在桌面上的小字：夜里灯下要压一圈淡影，才不会被亮起来的木纹吃掉 */
  --mask: rgba(30, 20, 10, 0.36);
  --toast-bg: #3a332d;
  --toast-ink: #fbf6ee;
}

/* —— 夜里：胡桃木桌面，灯条亮着 —— */
:root[data-theme='dark'] {
  color-scheme: dark;
  --desk: #221913;
  --desk-2: #2b2119;
  --wood: 0.56;
  --vignette: rgba(6, 4, 2, 0.72);

  --ink: #ede5d7;
  --ink-2: #c0b4a2;
  --ink-3: #a09381;
  --line: rgba(255, 230, 200, 0.11);
  --line-2: rgba(255, 230, 200, 0.2);
  --hover: rgba(255, 236, 210, 0.06);
  --press: rgba(255, 236, 210, 0.1);

  --mat: #1d1814;
  --mat-2: #251f1a;
  --mat-ink: #ede5d7;
  --mat-ink-2: #c0b4a2;
  --mat-ink-3: #a29583;
  --mat-line: rgba(255, 230, 200, 0.09);

  --panel: #1f1a16;
  --panel-2: #29221c;
  --panel-3: #342b24;

  --paper: #f3ebdc;
  --paper-2: #e6dcc8;
  --paper-ink: #2b2118;
  --paper-ink-2: #65553f;
  --paper-line: rgba(43, 33, 24, 0.13);
  --card: #ece2cf;
  --card-red: rgba(184, 70, 52, 0.42);
  --card-blue: rgba(52, 96, 160, 0.17);
  --ticket: #efe5d1;
  --ticket-2: #e4d8bf;
  --ticket-now: #ecd3a6;
  --ticket-perf: rgba(43, 33, 24, 0.32);
  --ticket-accent: #8e4f08;
  --ticket-shadow: drop-shadow(0 1px 0.5px rgba(0, 0, 0, 0.35)) drop-shadow(0 8px 9px rgba(0, 0, 0, 0.42));
  --sticky: #e3cd82;
  --sticky-ink: #34290f;
  --tray: #5d4231;
  --tray-2: #4a3426;
  --tray-rim: #3b2a1f;

  --accent: #e8a046;
  --on-accent: #24170a;
  --accent-soft: rgba(232, 160, 70, 0.14);
  --ok: #96b884;
  --ok-soft: rgba(150, 184, 132, 0.15);
  --warn: #e0bc66;
  --warn-soft: rgba(224, 188, 102, 0.14);
  --danger: #ec806b;
  --danger-soft: rgba(236, 128, 107, 0.14);
  --idle: rgba(255, 236, 210, 0.3);
  --ink-blue: #2c4778;

  /* 夜里开灯：深色桌面用「颜色减淡」按比例提亮（主光约 2 倍，灯正下方约 2.4 倍） */
  --cast-blend: color-dodge;
  --cast-k: 50%;
  --cast-key: 58%;
  --near-a: 0.14;

  --alu-1: #8a8f98;
  --alu-2: #50555e;
  --alu-3: #31353c;
  --alu-4: #1d2025;
  --clock-body: #1c1d21;
  --clock-body-2: #2a2c31;
  --lcd: #0b0d10;
  --seg: 255, 231, 194;

  --shadow-1: 0 1px 1px rgba(0, 0, 0, 0.3), 0 8px 14px -8px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 1px 1px rgba(0, 0, 0, 0.28), 0 14px 22px -12px rgba(0, 0, 0, 0.72);
  --shadow-3: 0 1px 1px rgba(20, 10, 0, 0.3), 0 26px 46px -20px rgba(0, 0, 0, 0.75), 0 0 120px -40px rgba(var(--warm), calc(var(--lamp) * 0.22));
  --elev-stroke: rgba(255, 230, 200, 0.14);
  --elev-panel: 0 0 0 0.5px var(--elev-stroke), 0 3px 8px rgba(0, 0, 0, 0.28), 0 0 22px rgba(0, 0, 0, 0.3);
  --elev-prominent: 0 0 0 0.5px var(--elev-stroke), 0 8px 18px rgba(0, 0, 0, 0.35), 0 26px 64px -12px rgba(0, 0, 0, 0.65);
  --elev-soft: 0 0 0 0.5px var(--elev-stroke), 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 26px rgba(0, 0, 0, 0.3);
  --desk-text-shadow: 0 1px 1.5px rgba(10, 6, 2, 0.55), 0 0 12px rgba(10, 6, 2, 0.35);
  --mask: rgba(4, 3, 2, 0.55);
  --toast-bg: #3b342e;
  --toast-ink: #fbf6ee;
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(40, 25, 10, 0.32);
    --ink-3: #4f453b;
    --mat-ink-3: #4f453b;
  }
  :root[data-theme='dark'] {
    --line: rgba(255, 240, 220, 0.3);
    --ink-3: #d0c4b2;
    --mat-ink-3: #d0c4b2;
  }
}

/* 灯的亮度登记成可以过渡的数：开灯时 0 → 1 慢慢升上来（预热），关灯时很快灭掉。
   灯亮不亮和外观分开：白天也能开灯，夜里也能关灯（js/ui/theme.js） */
@property --lamp {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
:root {
  transition: --lamp 0.35s ease, background-color 0.9s ease;
}
:root.lamp-lit {
  --lamp: 1;
  transition: --lamp 1.4s cubic-bezier(0.2, 0.7, 0.1, 1), background-color 0.9s ease;
}
:root.lamp-off {
  --lamp: 0 !important;
  transition-duration: 0.3s;
}