@use './styles/variables' as *;

// 应用外壳：主题色通过 CSS 变量下发，结构样式在 pages 目录
.app {
  --app-bg: #f5f7fb;
  --app-surface: #ffffff;
  --app-border: rgba(15, 23, 42, 0.08);
  --app-text: #1f2430;
  --app-text-muted: #5b6577;
  --app-header: rgba(255, 255, 255, 0.72);
  --app-glow: rgba(91, 143, 249, 0.18);

  display: flex;
  flex-direction: column;
  // antd 的 App 组件会额外包一层 div，这里直接用视口高度保证铺满
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--app-text);
  background:
    radial-gradient(1200px 600px at 12% -10%, var(--app-glow), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
    var(--app-bg);
  transition:
    background-color $transition-base,
    color $transition-base;

  &.dark {
    --app-bg: #0b1020;
    --app-surface: #121a2e;
    --app-border: rgba(148, 163, 184, 0.18);
    --app-text: #e5e9f2;
    --app-text-muted: #93a0b8;
    --app-header: rgba(11, 16, 32, 0.72);
    --app-glow: rgba(91, 143, 249, 0.22);
  }
}