/* ============================================================
   OfficeMind · Design Tokens
   多主题 / 多语言 设计底座
   ============================================================ */

/* ---------- 排版与尺度 ---------- */
:root {
  /* 跨平台字体栈：顺序不可调整，各平台自动落到最佳字体 */
  --font-sans:
    -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Text", "Segoe UI",
    "Inter", "SF Pro Text",
    "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Cascadia Code",
    "Liberation Mono", Menlo, monospace;

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px;
  --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 26px; --r-full: 999px;

  --sidebar-w: 244px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 62px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .22s;

  /* 毛玻璃：由 app.js 能力检测后写入 data-glass */
  --glass-blur: 18px;
  --glass-fallback: var(--surface);

  --z-drawer: 900; --z-modal: 1000; --z-toast: 1200; --z-login: 1500;
}

/* ---------- 主题：极夜·靛（默认） ---------- */
[data-theme="midnight"] {
  --bg: #0B0D1A;
  --bg-grad: radial-gradient(1200px 700px at 12% -8%, #1C2149 0%, transparent 62%),
             radial-gradient(900px 620px at 96% 4%, #17284A 0%, transparent 58%);
  --bg-soft: #12152B;
  --surface: #171B36;
  --surface-2: #1E2343;
  --surface-3: #262C54;
  --surface-hi: #2E3564;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .16);
  --text: #E9EBFA;
  --text-dim: #A6ADCE;
  --text-mute: #737BA3;
  --accent: #6D7BFF;
  --accent-soft: rgba(109, 123, 255, .16);
  --accent-text: #FFFFFF;
  --accent-2: #38E8B0;
  --accent-2-soft: rgba(56, 232, 176, .14);
  --ok: #38E8B0; --warn: #FFB84D; --danger: #FF6B81; --info: #56C7FF;
  --purple: #B37BFF; --pink: #FF7BC2; --amber: #FFB84D;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .34);
  --shadow-2: 0 6px 22px rgba(0, 0, 0, .38);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, .5);
  --glass: rgba(23, 27, 54, .78);
  --grid-line: rgba(255, 255, 255, .045);
  --floor-a: #151936; --floor-b: #12152B;
  color-scheme: dark;
}

/* ---------- 主题：晨光·白 ---------- */
[data-theme="aurora"] {
  --bg: #F5F6FB;
  --bg-grad: radial-gradient(1000px 600px at 8% -10%, #E4E8FF 0%, transparent 60%),
             radial-gradient(820px 520px at 98% 2%, #DFF3EE 0%, transparent 56%);
  --bg-soft: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F8FD;
  --surface-3: #EEF0F9;
  --surface-hi: #E6E9F6;
  --border: rgba(18, 22, 55, .10);
  --border-strong: rgba(18, 22, 55, .18);
  --text: #171B33;
  --text-dim: #5A6180;
  --text-mute: #8A91AC;
  --accent: #4E5FE8;
  --accent-soft: rgba(78, 95, 232, .12);
  --accent-text: #FFFFFF;
  --accent-2: #14B489;
  --accent-2-soft: rgba(20, 180, 137, .12);
  --ok: #14B489; --warn: #E8971A; --danger: #E5484D; --info: #2F9BE0;
  --purple: #8B5CF6; --pink: #E5489B; --amber: #E8971A;
  --shadow-1: 0 1px 2px rgba(20, 26, 60, .07);
  --shadow-2: 0 6px 20px rgba(20, 26, 60, .10);
  --shadow-3: 0 20px 48px rgba(20, 26, 60, .16);
  --glass: rgba(255, 255, 255, .82);
  --grid-line: rgba(18, 22, 55, .05);
  --floor-a: #F8F9FE; --floor-b: #F1F3FB;
  color-scheme: light;
}

/* ---------- 主题：深海·蓝 ---------- */
[data-theme="ocean"] {
  --bg: #06121F;
  --bg-grad: radial-gradient(1100px 640px at 10% -10%, #0F3555 0%, transparent 60%),
             radial-gradient(860px 560px at 96% 0%, #0B2743 0%, transparent 55%);
  --bg-soft: #0A1B2C;
  --surface: #0E2136;
  --surface-2: #132B45;
  --surface-3: #193653;
  --surface-hi: #214363;
  --border: rgba(120, 200, 255, .12);
  --border-strong: rgba(120, 200, 255, .22);
  --text: #E2F2FF;
  --text-dim: #93B6D2;
  --text-mute: #62819B;
  --accent: #2FA8FF;
  --accent-soft: rgba(47, 168, 255, .16);
  --accent-text: #04182B;
  --accent-2: #31E2C4;
  --accent-2-soft: rgba(49, 226, 196, .14);
  --ok: #31E2C4; --warn: #FFC15E; --danger: #FF6E87; --info: #7BD0FF;
  --purple: #A98BFF; --pink: #FF8FCB; --amber: #FFC15E;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 6px 22px rgba(0, 8, 20, .45);
  --shadow-3: 0 18px 48px rgba(0, 8, 20, .58);
  --glass: rgba(10, 27, 44, .8);
  --grid-line: rgba(120, 200, 255, .05);
  --floor-a: #0C1E31; --floor-b: #091827;
  color-scheme: dark;
}

/* ---------- 主题：竹青·林 ---------- */
[data-theme="forest"] {
  --bg: #F3F8F4;
  --bg-grad: radial-gradient(1000px 600px at 8% -10%, #DCEFE3 0%, transparent 60%),
             radial-gradient(820px 520px at 98% 2%, #E7F2DC 0%, transparent 56%);
  --bg-soft: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5FAF6;
  --surface-3: #EBF4EE;
  --surface-hi: #E0EDE4;
  --border: rgba(16, 48, 34, .11);
  --border-strong: rgba(16, 48, 34, .2);
  --text: #12281D;
  --text-dim: #4E6A5A;
  --text-mute: #7E9486;
  --accent: #17855F;
  --accent-soft: rgba(23, 133, 95, .12);
  --accent-text: #FFFFFF;
  --accent-2: #C78A16;
  --accent-2-soft: rgba(199, 138, 22, .12);
  --ok: #17855F; --warn: #D08A12; --danger: #D24A4A; --info: #2F86C4;
  --purple: #7A5CC4; --pink: #C4568F; --amber: #D08A12;
  --shadow-1: 0 1px 2px rgba(14, 44, 30, .07);
  --shadow-2: 0 6px 20px rgba(14, 44, 30, .10);
  --shadow-3: 0 20px 48px rgba(14, 44, 30, .15);
  --glass: rgba(255, 255, 255, .84);
  --grid-line: rgba(16, 48, 34, .05);
  --floor-a: #F7FBF8; --floor-b: #EFF6F1;
  color-scheme: light;
}

/* ---------- 主题：暖阳·砂 ---------- */
[data-theme="sunset"] {
  --bg: #FBF6F1;
  --bg-grad: radial-gradient(1000px 600px at 6% -10%, #FCE7D4 0%, transparent 60%),
             radial-gradient(820px 520px at 98% 2%, #F7E3E6 0%, transparent 56%);
  --bg-soft: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FDF8F4;
  --surface-3: #F6EDE6;
  --surface-hi: #F0E3D9;
  --border: rgba(70, 40, 24, .11);
  --border-strong: rgba(70, 40, 24, .2);
  --text: #2A1B12;
  --text-dim: #6E5547;
  --text-mute: #9A8477;
  --accent: #D9622B;
  --accent-soft: rgba(217, 98, 43, .12);
  --accent-text: #FFFFFF;
  --accent-2: #0E8F80;
  --accent-2-soft: rgba(14, 143, 128, .12);
  --ok: #0E8F80; --warn: #C98A12; --danger: #CF4444; --info: #2D7FB8;
  --purple: #8A5BB8; --pink: #C74E83; --amber: #C98A12;
  --shadow-1: 0 1px 2px rgba(60, 34, 20, .07);
  --shadow-2: 0 6px 20px rgba(60, 34, 20, .1);
  --shadow-3: 0 20px 48px rgba(60, 34, 20, .15);
  --glass: rgba(255, 255, 255, .84);
  --grid-line: rgba(70, 40, 24, .05);
  --floor-a: #FDF9F5; --floor-b: #F7F0E9;
  color-scheme: light;
}

/* ---------- 主题：赛博·霓虹 ---------- */
[data-theme="cyber"] {
  --bg: #08070F;
  --bg-grad: radial-gradient(1000px 620px at 10% -10%, #2A0B45 0%, transparent 58%),
             radial-gradient(880px 560px at 96% 2%, #05283A 0%, transparent 56%);
  --bg-soft: #0E0C1B;
  --surface: #141127;
  --surface-2: #1B1733;
  --surface-3: #241F44;
  --surface-hi: #2E2857;
  --border: rgba(255, 92, 224, .14);
  --border-strong: rgba(120, 240, 255, .26);
  --text: #F0ECFF;
  --text-dim: #A79FD0;
  --text-mute: #746CA0;
  --accent: #FF5CE0;
  --accent-soft: rgba(255, 92, 224, .16);
  --accent-text: #14081A;
  --accent-2: #4BF3FF;
  --accent-2-soft: rgba(75, 243, 255, .14);
  --ok: #4BF3FF; --warn: #FFD15C; --danger: #FF5C7A; --info: #9B8CFF;
  --purple: #9B8CFF; --pink: #FF5CE0; --amber: #FFD15C;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, .5);
  --shadow-3: 0 18px 52px rgba(0, 0, 0, .62);
  --glass: rgba(20, 17, 39, .8);
  --grid-line: rgba(255, 92, 224, .055);
  --floor-a: #120F24; --floor-b: #0D0B1A;
  color-scheme: dark;
}

/* ---------- 基础重置 ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
h1, h2, h3, h4, h5, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
img, svg { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong); border: 3px solid transparent;
  background-clip: content-box; border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); background-clip: content-box; }

::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   跨平台降级层
   data-glass : on | off   毛玻璃能力（app.js 检测后写入）
   data-motion: on | off   动效开关（用户可手动关闭）
   data-os    : mac | win | linux
   ============================================================ */

/* 毛玻璃关闭：所有玻璃层回退为实色，保证内容不丢失 */
[data-glass="off"] {
  --glass: var(--glass-fallback);
  --glass-blur: 0px;
}
[data-glass="off"] .sidebar,
[data-glass="off"] .topbar,
[data-glass="off"] .drawer,
[data-glass="off"] .popover,
[data-glass="off"] .modal,
[data-glass="off"] .login-left {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 动效关闭：保留状态色，去掉所有运动 */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}