/* ============================================================
   THEME.CSS - Design System Token 汇聚入口
   这个文件把所有 Token 导入在一起，方便管理
   ============================================================ */

@import './tokens/_colors.css';
@import './tokens/_typography.css';
@import './tokens/_spacing.css';
@import './tokens/_radius.css';
@import './tokens/_elevation.css';

/* ============================================================
   全局基础样式
   ============================================================ */

:root {
  --app-page-bg:
    radial-gradient(circle at 15% 15%, rgba(22, 163, 74, 0.24), transparent 38%),
    radial-gradient(circle at 85% 85%, rgba(13, 90, 46, 0.28), transparent 38%),
    linear-gradient(180deg, #0b130f 0%, var(--surface-base) 52%, var(--neutral-950) 100%);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  :root {
    --app-page-bg:
      radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--brand-500) 24%, transparent), transparent 38%),
      radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--brand-700) 28%, transparent), transparent 38%),
      linear-gradient(180deg, var(--surface-base) 0%, color-mix(in srgb, var(--surface-base) 62%, var(--neutral-950)) 50%, var(--neutral-950) 100%);
  }
}

html {
  font-size: 16px;
  min-height: var(--app-viewport-height);
  background-color: var(--surface-base);
  background: var(--app-page-bg);
}

body {
  /* Keep body/html background in sync to avoid iOS PWA bottom strip color leaks */
  background-color: var(--surface-base);
  background: var(--app-page-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  min-height: var(--app-viewport-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Root Layout Baseline
   ============================================================ */

body {
  padding: 0;
}

:root {
  --app-viewport-height: var(--vvh, 100vh);
  --app-viewport-height-85: var(--vvh-85, 85vh);
  --mobile-subpage-safe-top: env(safe-area-inset-top, 0px);
  --app-mobile-bottom-visual-gap: 0px;
  --mobile-tabbar-reserve: calc(120px + env(safe-area-inset-bottom, 0px));
}

#app,
.app-shell {
  min-height: var(--app-viewport-height);
  background-color: var(--surface-base);
  background: inherit;
}