/* ==================================================================
   OrgNote · glass.css —— 液态玻璃（Liquid Glass）风格令牌
   与 md3.css 互斥：由 <html data-theme="glass"> 激活。
   只定义变量 + 少量玻璃专属的折射/高光效果。
   ================================================================== */

/* ══════════════════ 深色玻璃 ══════════════════ */
[data-theme="glass"][data-mode="dark"] {
  --glass-bg-base: linear-gradient(160deg, #080c18 0%, #101728 42%, #180f2c 100%);
  --glass-b1: #3D63FF; --glass-b2: #A24BFF;
  --glass-b3: #00C2FF; --glass-b4: #FF3D8A;

  --glass-line: rgba(255,255,255,.20);
  --glass-fg: #FFFFFF;
  --glass-fg-dim: rgba(255,255,255,.70);
  --glass-chip-bg: rgba(255,255,255,.12);
  --glass-btn-bg: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.13));
  --glass-input-bg: rgba(255,255,255,.10);
  --glass-active-bg: rgba(255,255,255,.24);
  --glass-shadow: 0 10px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.45);

  --body-bg: #080c18;
  --card-bg: rgba(255,255,255,.10);
  --card-border: 1px solid rgba(255,255,255,.22);
  --card-backdrop: blur(24px) saturate(190%);
  --card-shadow: 0 10px 36px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.38);
  --backdrop: blur(22px) saturate(180%);
  --title-shadow: 0 1px 14px rgba(0,0,0,.45);
  --input-bg: rgba(255,255,255,.10);
  --topbar-bg: rgba(255,255,255,.07);
  --nav-bg: rgba(255,255,255,.09);

  --c-on-surface: #FFFFFF;
  --c-on-surface-variant: rgba(255,255,255,.72);
  --c-outline: rgba(255,255,255,.34);
  --c-outline-variant: rgba(255,255,255,.16);
  --c-surface: #0d1322;
  --c-surface-variant: rgba(255,255,255,.14);
  --c-surface-container-lowest: rgba(255,255,255,.05);
  --c-surface-container-low: rgba(255,255,255,.08);
  --c-surface-container: rgba(255,255,255,.10);
  --c-surface-container-high: rgba(255,255,255,.13);
  --c-surface-container-highest: rgba(255,255,255,.16);
  --c-primary: #A8CBFF; --c-on-primary: #06172E;
  --c-primary-container: rgba(255,255,255,.16); --c-on-primary-container: #FFFFFF;
  --c-secondary: #D6C8FF; --c-secondary-container: rgba(255,255,255,.14);
  --c-on-secondary-container: #FFFFFF;
  --c-tertiary: #9BE7FF; --c-tertiary-container: rgba(255,255,255,.14);
  --c-on-tertiary-container: #FFFFFF;
  --c-error: #FFB4AB; --c-on-error: #690005;
  --c-error-container: rgba(255,110,100,.24); --c-on-error-container: #FFDAD6;
  --c-inverse-surface: rgba(255,255,255,.94); --c-inverse-on-surface: #10131c;
}

/* ══════════════════ 浅色玻璃 ══════════════════ */
[data-theme="glass"][data-mode="light"] {
  --glass-bg-base: linear-gradient(160deg, #e9f0ff 0%, #f4ecff 48%, #ffeef5 100%);
  --glass-b1: #8FB4FF; --glass-b2: #C79BFF;
  --glass-b3: #8BE4FF; --glass-b4: #FFA6C9;

  --glass-line: rgba(255,255,255,.70);
  --glass-fg: #14161C;
  --glass-fg-dim: rgba(20,22,28,.64);
  --glass-chip-bg: rgba(255,255,255,.46);
  --glass-btn-bg: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.58));
  --glass-input-bg: rgba(255,255,255,.55);
  --glass-active-bg: rgba(255,255,255,.88);
  --glass-shadow: 0 10px 34px rgba(35,45,80,.16), inset 0 1px 0 rgba(255,255,255,.95);

  --body-bg: #e9f0ff;
  --card-bg: rgba(255,255,255,.46);
  --card-border: 1px solid rgba(255,255,255,.72);
  --card-backdrop: blur(24px) saturate(180%);
  --card-shadow: 0 10px 34px rgba(35,45,80,.14), inset 0 1px 0 rgba(255,255,255,.9);
  --backdrop: blur(22px) saturate(180%);
  --title-shadow: 0 1px 10px rgba(255,255,255,.6);
  --input-bg: rgba(255,255,255,.55);
  --topbar-bg: rgba(255,255,255,.42);
  --nav-bg: rgba(255,255,255,.46);

  --c-on-surface: #14161C;
  --c-on-surface-variant: rgba(20,22,28,.66);
  --c-outline: rgba(20,22,28,.28);
  --c-outline-variant: rgba(20,22,28,.12);
  --c-surface: #eef3ff;
  --c-surface-variant: rgba(255,255,255,.55);
  --c-surface-container-lowest: rgba(255,255,255,.55);
  --c-surface-container-low: rgba(255,255,255,.46);
  --c-surface-container: rgba(255,255,255,.55);
  --c-surface-container-high: rgba(255,255,255,.66);
  --c-surface-container-highest: rgba(255,255,255,.78);
  --c-primary: #2B4CC7; --c-on-primary: #FFFFFF;
  --c-primary-container: rgba(255,255,255,.72); --c-on-primary-container: #16225A;
  --c-secondary: #5A4A86; --c-secondary-container: rgba(255,255,255,.68);
  --c-on-secondary-container: #1B1630;
  --c-tertiary: #1F5F73; --c-tertiary-container: rgba(255,255,255,.68);
  --c-on-tertiary-container: #0C2A33;
  --c-error: #B3261E; --c-on-error: #FFFFFF;
  --c-error-container: rgba(255,180,171,.55); --c-on-error-container: #410E0B;
  --c-inverse-surface: rgba(20,22,28,.92); --c-inverse-on-surface: #F4F6FF;
}

/* ───────── 玻璃质感细节 ───────── */

/* 卡片：跟随指针的柔光（JS 写入 --mx / --my） */
[data-theme="glass"] .card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, -10%),
              rgba(255,255,255,.26), transparent 62%);
  opacity: 0; transition: opacity var(--dur-medium) var(--ease-standard);
}
[data-theme="glass"] .card:hover::before { opacity: 1; }

/* 玻璃边缘的折射高光 */
[data-theme="glass"] .card,
[data-theme="glass"] .auth-card,
[data-theme="glass"] .dialog,
[data-theme="glass"] .drawer {
  box-shadow: var(--card-shadow);
}

/* 顶栏 / 底栏 的玻璃分界线 */
[data-theme="glass"] .topbar,
[data-theme="glass"] .navbar {
  border-color: var(--glass-line);
}

/* 文字在玻璃上更通透 */
[data-theme="glass"] .card-title,
[data-theme="glass"] .rec-title,
[data-theme="glass"] .list-title,
[data-theme="glass"] .stat-num {
  text-shadow: var(--title-shadow);
}

/* 记录正文在玻璃上略提高不透明度，保证可读性 */
[data-theme="glass"] .rec-text { color: color-mix(in srgb, var(--c-on-surface) 88%, transparent); }

/* 表格 / 分布条在玻璃下的分隔线 */
[data-theme="glass"] .field input:focus,
[data-theme="glass"] .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.75);
}

/* 深色玻璃下，表单占位符更清楚 */
[data-theme="glass"][data-mode="dark"] .field input::placeholder,
[data-theme="glass"][data-mode="dark"] .field textarea::placeholder {
  color: rgba(255,255,255,.45);
}