/*
 * 落樱 · 界面主题色板
 *
 * <html data-theme="sakura|cream|sage|lavender|blue|night"> 由 /js/theme.js 在 <head> 里最先设置。
 * 页面里只用这里的变量，不要再写死颜色。变量说明见 docs/主题系统.md。
 *
 * 顺序有讲究：先是公共派生块，再是六套主题；同优先级时后写的赢，所以夜樱能覆盖公共块里的状态色。
 * 选择器用 html[data-theme=…]（比页面里的 :root 优先级高），旧页面残留的 :root 变量也会被盖住。
 */

/* ---------- 公共：字体、派生变量、旧名字兼容 ---------- */
:root,
html[data-theme] {
  --serif: 'Noto Serif SC', "PingFang SC", "Microsoft YaHei", serif;
  --sans: 'Sora', "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  --text-on-image: #FFFFFF;
  --primary-gradient: linear-gradient(135deg, var(--primary), var(--primary-strong));

  /* 状态色：和主题主色分开，换主题也不变成别的意思 */
  --success: #2F8A5F;
  --success-soft: #E5F4EC;
  --warning: #B26F12;
  --warning-soft: #FCF1DC;
  --danger: #C43D3D;
  --danger-soft: #FCE8E8;
  --info: #3F6FA0;
  --info-soft: #E6EFF8;

  /* 旧名字（前台页面） */
  --muted: var(--text-secondary);
  --subtle: var(--text-muted);
  --line: var(--border);

  /* 旧名字（后台） */
  --bg: var(--bg-page);
  --card-bg: var(--surface);
  --sidebar-bg: linear-gradient(180deg, var(--surface-2) 0%, var(--soft) 100%);
  --shadow-sm: 0 1px 3px rgba(var(--shadow-rgb), .06);
  --shadow-md: 0 4px 16px rgba(var(--shadow-rgb), .08);
  --shadow-lg: 0 8px 32px rgba(var(--shadow-rgb), .12);

  /* 液态玻璃：聊天页开着「房间背景」（html.has-room-bg）时，浮在照片上的按钮、输入框、菜单用。
     浅色主题都从 --surface-rgb 派生；夜樱在自己的块里改成深色玻璃。
     fill 是按钮/输入框（后面有模糊），fill-strong 是菜单/面板/小标签（上面有字），
     rim 是玻璃边缘的亮线，shine 是顶上一道高光，veil 是盖在照片上的一层薄纱，bubble 是照片上「他」的气泡底 */
  --lg-fill: rgba(var(--surface-rgb), .5);
  --lg-fill-strong: rgba(var(--surface-rgb), .86);
  --lg-rim: rgba(255, 255, 255, .72);
  --lg-shine: rgba(255, 255, 255, .9);
  --lg-shadow: 0 6px 18px rgba(var(--shadow-rgb), .14);
  --lg-veil: rgba(var(--bg-page-rgb), .28);
  --lg-bubble: rgba(var(--surface-rgb), .92);
  --lg-photo-filter: none;
}

html {
  color-scheme: light;
  background-color: var(--bg-page);
}

/* 换主题：theme.js 用 View Transitions 把整页截图淡入淡出（不支持的浏览器直接瞬间换）。
   不要再给每个元素加颜色过渡：渐变、阴影、毛玻璃跟不上，一半先跳一半慢慢变，看着就是闪。 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .28s;
  animation-timing-function: ease;
}

/* 页面之间跳转：新页面画好之前先留着旧页面，画好后淡入，不露出底色（不支持的浏览器忽略这段） */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* 同一次打开里换页：入场动画只在第一个页面播，之后直接显示（theme.js 给 html 加 ly-seen）。
   只管「还没显示」那一刻：一开始就不透明、不位移，等页面脚本加上 is-visible 时数值不变，也就没有动画；
   不用 !important、不碰 is-visible 之后的样式，卡片按下的缩放之类照旧。 */
html.ly-seen [data-reveal]:not(.is-visible) {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- 樱落粉（默认，和改主题之前一模一样） ---------- */
:root,
html[data-theme="sakura"] {
  --bg-page: #FDF7F6;
  --bg-page-rgb: 253, 247, 246;
  --surface: #FFFFFF;
  --surface-rgb: 255, 255, 255;
  --surface-2: #FFF9FA;
  --surface-input: #FFFFFF;
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .92);
  /* 弹窗遮罩三档：soft 小弹窗（原 .22–.24），--overlay 底部面板/选择器/确认框/裁剪（原 .35–.42），strong 看大图（原 .72）；
     樱落粉用原来的 75,21,40 底色 */
  --overlay-soft: rgba(75, 21, 40, .24);
  --overlay: rgba(75, 21, 40, .38);
  --overlay-strong: rgba(75, 21, 40, .72);

  --text: #4B1528;
  --text-secondary: #993556;
  --text-muted: #B8607E;

  --primary: #D4537E;
  --primary-strong: #B73D67;
  --primary-rgb: 212, 83, 126;
  /* 主色的亮端：柔和渐变按钮 linear-gradient(135deg, rgba(var(--primary-rgb), .94), rgba(var(--primary-light-rgb), .86)) */
  --primary-light-rgb: 244, 140, 174;
  --on-primary: #FFFFFF;
  --accent: #D4537E;
  --accent-rgb: 212, 83, 126;
  --accent-2: #9B7FD4;
  --accent-2-rgb: 155, 127, 212;
  --soft: #FBEAF0;
  --soft-2: #F4C0D1;

  --border: rgba(244, 192, 209, .55);
  --border-strong: #ED93B1;
  --focus-ring: rgba(212, 83, 126, .28);
  --shadow-rgb: 212, 83, 126;
  --shadow: 0 12px 32px rgba(212, 83, 126, .06);
  --shadow-float: 0 18px 36px rgba(212, 83, 126, .14);
  --skeleton: #F7E4EA;

  --chat-bg: #FDF7F6;
  --bubble-self-bg: linear-gradient(135deg, #E8A0B8, #D4839E);
  --bubble-self-text: #FFFFFF;
  --bubble-other-bg: rgba(255, 255, 255, .72);
  --bubble-other-text: #4B1528;
  --bubble-other-border: rgba(244, 192, 209, .55);
  /* 房间背景照片染成主题色的程度（mix-blend-mode: color）；照片本来就是粉色，所以不染 */
  --lg-photo-tint: transparent;

  --chrome: #D4537E;

  /* 装饰色：--ink 是 C1 锁屏卡上的深色名字（夜樱里反过来是浅色）；--ink-card-* 是 C2 深色角色卡的底，上面放白字；
     --vip-* 是会员徽章；--player-* 是首页音乐播放器的唱片渐变、唱臂高光和投影 */
  --ink: #4A2D5E;
  --ink-card-from: #2A1A3E;
  --ink-card-to: #4A2D5E;
  --vip-bg: linear-gradient(135deg, #FDE68A, #F9A8D4);
  --vip-text: #7C2D12;
  --player-from: #FF8EC7;
  --player-to: #A685FF;
  --player-light: #C4B1FF;
  --player-glow-rgb: 255, 122, 179;

  --pink-50: #FBEAF0;
  --pink-100: #F4C0D1;
  --pink-200: #ED93B1;
  --pink-300: #E3799D;
  --pink-400: #D4537E;
  --pink-500: #B73D67;
  --pink-600: #C4466F;
  --pink-700: #72243E;
  --pink-800: #5E1D33;
  --pink-900: #4B1528;
  --cream: #FFFAF6;
  --purple-50: #FAF5FF;
  --purple-100: #F3E8FF;
  --purple-400: #C084FC;
  --purple-500: #A855F7;
}

/* ---------- 奶油信笺 ---------- */
html[data-theme="cream"] {
  --bg-page: #FBF6EE;
  --bg-page-rgb: 251, 246, 238;
  --surface: #FFFCF6;
  --surface-rgb: 255, 252, 246;
  --surface-2: #FDF8F1;
  --surface-input: #FFFDF9;
  --glass: rgba(255, 252, 246, .74);
  --glass-strong: rgba(255, 252, 246, .93);
  --overlay-soft: rgba(48, 34, 24, .24);
  --overlay: rgba(48, 34, 24, .38);
  --overlay-strong: rgba(48, 34, 24, .72);

  --text: #3F3027;
  --text-secondary: #7A5A43;
  --text-muted: #94745D;

  --primary: #A9754A;
  --primary-strong: #8B5E3C;
  --primary-rgb: 169, 117, 74;
  --primary-light-rgb: 214, 161, 118;
  --on-primary: #FFFFFF;
  --accent: #A9754A;
  --accent-rgb: 169, 117, 74;
  --accent-2: #C4867A;
  --accent-2-rgb: 196, 134, 122;
  --soft: #F6ECDF;
  --soft-2: #EBD8C2;

  --border: rgba(214, 180, 145, .5);
  --border-strong: #DDBB97;
  --focus-ring: rgba(169, 117, 74, .28);
  --shadow-rgb: 139, 94, 60;
  --shadow: 0 12px 32px rgba(139, 94, 60, .07);
  --shadow-float: 0 18px 36px rgba(139, 94, 60, .15);
  --skeleton: #F1E6D8;

  --chat-bg: #FBF6EE;
  --bubble-self-bg: linear-gradient(135deg, #CFA27A, #B4825A);
  --bubble-self-text: #FFFFFF;
  --bubble-other-bg: rgba(255, 252, 246, .8);
  --bubble-other-text: #3F3027;
  --bubble-other-border: rgba(214, 180, 145, .5);
  --lg-photo-tint: rgba(169, 117, 74, .45);

  --chrome: #A9754A;

  --ink: #5A3A2C;
  --ink-card-from: #3A271F;
  --ink-card-to: #5A3A2C;
  --vip-bg: linear-gradient(135deg, #F8E3A6, #EECDB0);
  --vip-text: #6B3A14;
  --player-from: #DDA77C;
  --player-to: #C4867A;
  --player-light: #E2B9AE;
  --player-glow-rgb: 201, 140, 96;

  --pink-50: #F6ECDF;
  --pink-100: #EBD8C2;
  --pink-200: #DDBB97;
  --pink-300: #C99A6E;
  --pink-400: #A9754A;
  --pink-500: #8B5E3C;
  --pink-600: #9A6A43;
  --pink-700: #5E3E27;
  --pink-800: #4E3424;
  --pink-900: #3F3027;
  --cream: #FFFCF6;
  --purple-50: #FBF4F2;
  --purple-100: #F5E4E0;
  --purple-400: #C4867A;
  --purple-500: #A96B5F;
}

/* ---------- 青苔来信 ---------- */
html[data-theme="sage"] {
  --bg-page: #F3F7F2;
  --bg-page-rgb: 243, 247, 242;
  --surface: #FCFEFB;
  --surface-rgb: 252, 254, 251;
  --surface-2: #F7FAF6;
  --surface-input: #FFFFFF;
  --glass: rgba(252, 254, 251, .74);
  --glass-strong: rgba(252, 254, 251, .93);
  --overlay-soft: rgba(22, 38, 28, .24);
  --overlay: rgba(22, 38, 28, .38);
  --overlay-strong: rgba(22, 38, 28, .72);

  --text: #243A2D;
  --text-secondary: #46684F;
  --text-muted: #64816C;

  --primary: #5E8869;
  --primary-strong: #4E725A;
  --primary-rgb: 94, 136, 105;
  --primary-light-rgb: 136, 183, 148;
  --on-primary: #FFFFFF;
  --accent: #5E8869;
  --accent-rgb: 94, 136, 105;
  --accent-2: #7E9CB8;
  --accent-2-rgb: 126, 156, 184;
  --soft: #E8F1EA;
  --soft-2: #C9DDCE;

  --border: rgba(159, 193, 168, .5);
  --border-strong: #9FC1A8;
  --focus-ring: rgba(94, 136, 105, .28);
  --shadow-rgb: 78, 114, 90;
  --shadow: 0 12px 32px rgba(78, 114, 90, .07);
  --shadow-float: 0 18px 36px rgba(78, 114, 90, .15);
  --skeleton: #E3ECE4;

  --chat-bg: #F3F7F2;
  --bubble-self-bg: linear-gradient(135deg, #8DB59A, #6F9A7C);
  --bubble-self-text: #FFFFFF;
  --bubble-other-bg: rgba(252, 254, 251, .8);
  --bubble-other-text: #243A2D;
  --bubble-other-border: rgba(159, 193, 168, .5);
  --lg-photo-tint: rgba(94, 136, 105, .5);

  --chrome: #5E8869;

  --ink: #2D4A45;
  --ink-card-from: #1D302C;
  --ink-card-to: #2D4A45;
  --vip-bg: linear-gradient(135deg, #F4E4A4, #C4DECB);
  --vip-text: #5A4512;
  --player-from: #8CBF99;
  --player-to: #7E9CB8;
  --player-light: #B2C6DA;
  --player-glow-rgb: 110, 165, 126;

  --pink-50: #E8F1EA;
  --pink-100: #C9DDCE;
  --pink-200: #9FC1A8;
  --pink-300: #7FA58A;
  --pink-400: #5E8869;
  --pink-500: #4E725A;
  --pink-600: #557D61;
  --pink-700: #34503E;
  --pink-800: #2C4535;
  --pink-900: #243A2D;
  --cream: #FCFEFB;
  --purple-50: #F1F5F9;
  --purple-100: #E1E9F1;
  --purple-400: #7E9CB8;
  --purple-500: #5F7F9C;
}

/* ---------- 雾紫月光 ---------- */
html[data-theme="lavender"] {
  --bg-page: #F6F3FA;
  --bg-page-rgb: 246, 243, 250;
  --surface: #FCFAFF;
  --surface-rgb: 252, 250, 255;
  --surface-2: #F9F6FD;
  --surface-input: #FFFFFF;
  --glass: rgba(252, 250, 255, .74);
  --glass-strong: rgba(252, 250, 255, .93);
  --overlay-soft: rgba(34, 26, 50, .24);
  --overlay: rgba(34, 26, 50, .38);
  --overlay-strong: rgba(34, 26, 50, .72);

  --text: #332A42;
  --text-secondary: #65507F;
  --text-muted: #866FA0;

  --primary: #8B6FAA;
  --primary-strong: #735A91;
  --primary-rgb: 139, 111, 170;
  --primary-light-rgb: 184, 160, 210;
  --on-primary: #FFFFFF;
  --accent: #8B6FAA;
  --accent-rgb: 139, 111, 170;
  --accent-2: #D08BA6;
  --accent-2-rgb: 208, 139, 166;
  --soft: #F0EAF7;
  --soft-2: #DCCFEC;

  --border: rgba(191, 169, 218, .5);
  --border-strong: #BFA9DA;
  --focus-ring: rgba(139, 111, 170, .28);
  --shadow-rgb: 115, 90, 145;
  --shadow: 0 12px 32px rgba(115, 90, 145, .07);
  --shadow-float: 0 18px 36px rgba(115, 90, 145, .15);
  --skeleton: #ECE5F4;

  --chat-bg: #F6F3FA;
  --bubble-self-bg: linear-gradient(135deg, #B49BD0, #957AB6);
  --bubble-self-text: #FFFFFF;
  --bubble-other-bg: rgba(252, 250, 255, .8);
  --bubble-other-text: #332A42;
  --bubble-other-border: rgba(191, 169, 218, .5);
  --lg-photo-tint: rgba(139, 111, 170, .45);

  --chrome: #8B6FAA;

  --ink: #45305E;
  --ink-card-from: #271B3A;
  --ink-card-to: #45305E;
  --vip-bg: linear-gradient(135deg, #F6E3A8, #DCC8EE);
  --vip-text: #6A3A1C;
  --player-from: #B095D6;
  --player-to: #7F64A0;
  --player-light: #D4C6EA;
  --player-glow-rgb: 150, 115, 195;

  --pink-50: #F0EAF7;
  --pink-100: #DCCFEC;
  --pink-200: #BFA9DA;
  --pink-300: #A68BC6;
  --pink-400: #8B6FAA;
  --pink-500: #735A91;
  --pink-600: #7F64A0;
  --pink-700: #4C3B63;
  --pink-800: #403353;
  --pink-900: #332A42;
  --cream: #FCFAFF;
  --purple-50: #FCF2F6;
  --purple-100: #F6E1EA;
  --purple-400: #D08BA6;
  --purple-500: #B86E8B;
}

/* ---------- 雨后雾蓝 ---------- */
html[data-theme="blue"] {
  --bg-page: #F2F6FA;
  --bg-page-rgb: 242, 246, 250;
  --surface: #FAFCFF;
  --surface-rgb: 250, 252, 255;
  --surface-2: #F5F9FC;
  --surface-input: #FFFFFF;
  --glass: rgba(250, 252, 255, .74);
  --glass-strong: rgba(250, 252, 255, .93);
  --overlay-soft: rgba(20, 32, 46, .24);
  --overlay: rgba(20, 32, 46, .38);
  --overlay-strong: rgba(20, 32, 46, .72);

  --text: #243447;
  --text-secondary: #46627F;
  --text-muted: #5B7D9F;

  --primary: #5D82A8;
  --primary-strong: #4E6E91;
  --primary-rgb: 93, 130, 168;
  --primary-light-rgb: 142, 175, 208;
  --on-primary: #FFFFFF;
  --accent: #5D82A8;
  --accent-rgb: 93, 130, 168;
  --accent-2: #9A8BC4;
  --accent-2-rgb: 154, 139, 196;
  --soft: #E7EFF7;
  --soft-2: #C8D9EA;

  --border: rgba(157, 186, 214, .5);
  --border-strong: #9DBAD6;
  --focus-ring: rgba(93, 130, 168, .28);
  --shadow-rgb: 78, 110, 145;
  --shadow: 0 12px 32px rgba(78, 110, 145, .07);
  --shadow-float: 0 18px 36px rgba(78, 110, 145, .15);
  --skeleton: #E2EAF3;

  --chat-bg: #F2F6FA;
  --bubble-self-bg: linear-gradient(135deg, #8FB0D2, #6E93BA);
  --bubble-self-text: #FFFFFF;
  --bubble-other-bg: rgba(250, 252, 255, .8);
  --bubble-other-text: #243447;
  --bubble-other-border: rgba(157, 186, 214, .5);
  --lg-photo-tint: rgba(93, 130, 168, .5);

  --chrome: #5D82A8;

  --ink: #2C3E5C;
  --ink-card-from: #1B2638;
  --ink-card-to: #2C3E5C;
  --vip-bg: linear-gradient(135deg, #F5E3A6, #C6DAEF);
  --vip-text: #5A4214;
  --player-from: #86AEDB;
  --player-to: #9A8BC4;
  --player-light: #C5BCE4;
  --player-glow-rgb: 104, 148, 200;

  --pink-50: #E7EFF7;
  --pink-100: #C8D9EA;
  --pink-200: #9DBAD6;
  --pink-300: #7D9FC4;
  --pink-400: #5D82A8;
  --pink-500: #4E6E91;
  --pink-600: #557799;
  --pink-700: #334B66;
  --pink-800: #2B3F56;
  --pink-900: #243447;
  --cream: #FAFCFF;
  --purple-50: #F5F3FA;
  --purple-100: #E8E3F4;
  --purple-400: #9A8BC4;
  --purple-500: #7E6DAE;
}

/* ---------- 晚安夜樱（深色） ---------- */
html[data-theme="night"] {
  color-scheme: dark;

  --bg-page: #18151C;
  --bg-page-rgb: 24, 21, 28;
  --surface: #242029;
  --surface-rgb: 36, 32, 41;
  --surface-2: #2C2632;
  --surface-input: #2C2632;
  --glass: rgba(36, 32, 41, .86);
  --glass-strong: rgba(30, 26, 35, .94);
  /* 夜樱底色本来就暗，遮罩要更深才压得住 */
  --overlay-soft: rgba(0, 0, 0, .45);
  --overlay: rgba(0, 0, 0, .55);
  --overlay-strong: rgba(0, 0, 0, .82);

  --text: #F3EAF0;
  --text-secondary: #CDB5C3;
  --text-muted: #A893A3;

  /* 深色下主按钮是浅粉底 + 深色字，所以按钮文字一定要用 --on-primary，别写死白色 */
  --primary: #DDA1B5;
  --primary-strong: #C98AA0;
  --primary-rgb: 221, 161, 181;
  --primary-light-rgb: 201, 138, 160;
  --on-primary: #30202A;
  --accent: #E8A3BB;
  --accent-rgb: 232, 163, 187;
  --accent-2: #BEA2E0;
  --accent-2-rgb: 190, 162, 224;
  --soft: #2E2531;
  --soft-2: #3E3142;

  --border: rgba(222, 180, 205, .16);
  --border-strong: #5A4858;
  --focus-ring: rgba(232, 163, 187, .35);
  --shadow-rgb: 0, 0, 0;
  --shadow: 0 12px 32px rgba(0, 0, 0, .28);
  --shadow-float: 0 18px 36px rgba(0, 0, 0, .42);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .45);
  --skeleton: #2E2833;

  --chat-bg: #18151C;
  --bubble-self-bg: linear-gradient(135deg, #7A5468, #674657);
  --bubble-self-text: #FFF5F9;
  --bubble-other-bg: #2E2733;
  --bubble-other-text: #F3EAF0;
  --bubble-other-border: rgba(222, 180, 205, .12);
  /* 夜樱：照片压暗，玻璃是深色的（不出现白色的大块），边缘只留一点点亮 */
  --lg-photo-tint: transparent;
  --lg-photo-filter: brightness(.52) saturate(.8);
  --lg-fill: rgba(36, 32, 41, .55);
  --lg-fill-strong: rgba(30, 26, 35, .88);
  --lg-rim: rgba(255, 255, 255, .12);
  --lg-shine: rgba(255, 255, 255, .1);
  --lg-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  --lg-veil: rgba(24, 21, 28, .36);
  --lg-bubble: #2E2733;

  --success: #7CC9A1;
  --success-soft: rgba(124, 201, 161, .14);
  --warning: #E8B866;
  --warning-soft: rgba(232, 184, 102, .14);
  --danger: #F08A86;
  --danger-soft: rgba(240, 138, 134, .15);
  --info: #8FB6DE;
  --info-soft: rgba(143, 182, 222, .14);

  --chrome: #18151C;

  --ink: #E8DAF0;
  --ink-card-from: #2C2533;
  --ink-card-to: #463A52;
  --vip-bg: linear-gradient(135deg, #4B3D24, #4A3245);
  --vip-text: #F3D08A;
  --player-from: #E8A3BB;
  --player-to: #BEA2E0;
  --player-light: #D9C8F0;
  --player-glow-rgb: 232, 163, 187;

  /* 旧名字在深色下按「用途」取色：50/100 当底色，400 以上当文字 */
  --pink-50: #2E2531;
  --pink-100: #3E3142;
  --pink-200: #8A6A7E;
  --pink-300: #B07A92;
  --pink-400: #E8A3BB;
  --pink-500: #F0B8CB;
  --pink-600: #D893AA;
  --pink-700: #F1D3DE;
  --pink-800: #F2DEE6;
  --pink-900: #F3EAF0;
  --cream: #211D26;
  --purple-50: #2A2433;
  --purple-100: #352C40;
  --purple-400: #BEA2E0;
  --purple-500: #CDB4EA;
}