:root {
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --font-sans: system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.24s var(--ease-out);

  --content-max: 680px;
  --content-max-wide: 820px;

  --bg-image: url('../img/bg.svg');
  --fast: #5cb896;
  --medium: #7eb8d4;
  --slow: #98b8d8;
}

/* ============ 夜间（默认） ============ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg-deep: #050608;
  --bg-base: #101620;
  --bg-elevated: rgba(16, 22, 32, 0.94);
  --theme-color-meta: #050608;
  --page-bg-wash: transparent;
  --bg-image-opacity: 1;

  --glass-bg: rgba(255, 255, 255, 0.035);
  --glass-bg-strong: rgba(255, 255, 255, 0.05);
  --glass-bg-fallback: rgba(14, 20, 30, 0.96);
  --glass-border: rgba(180, 200, 225, 0.08);
  --glass-border-bright: rgba(180, 200, 225, 0.14);
  --glass-blur: 20px;

  --text-primary: #e9eef5;
  --text-secondary: rgba(233, 238, 245, 0.8);
  --text-muted: rgba(233, 238, 245, 0.5);
  --text-faint: rgba(233, 238, 245, 0.34);
  --on-accent: #eef3f9;

  --accent: #6b94c8;
  --accent-2: #7ba8d4;
  --accent-3: #9bb8dc;
  --accent-deep: #4a6fa5;

  --gradient-brand: linear-gradient(145deg, #a8c0dc 0%, #8aafd0 52%, #9bb8d8 100%);
  --gradient-cta: linear-gradient(175deg, #5580b4 0%, #4a72a3 50%, #426690 100%);
  --gradient-cta-main: linear-gradient(175deg, #3ecf7a 0%, #2db864 48%, #25a356 100%);
  --border-cta-main: rgba(62, 207, 122, 0.38);

  --accent-bg: rgba(100, 140, 190, 0.09);
  --accent-border: rgba(130, 165, 210, 0.2);

  --surface-inset: rgba(0, 0, 0, 0.15);
  --surface-raised: rgba(255, 255, 255, 0.03);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-chip: rgba(255, 255, 255, 0.04);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-dashed: rgba(150, 175, 210, 0.18);
  --divider: rgba(180, 200, 225, 0.12);
  --card-shine: rgba(255, 255, 255, 0.35);
  --entry-card-bg: linear-gradient(165deg, rgba(80, 120, 170, 0.08) 0%, rgba(70, 110, 150, 0.04) 45%, rgba(255, 255, 255, 0.02) 100%);
  --entry-shine: rgba(160, 190, 220, 0.35);
  --btn-ghost-bg: rgba(255, 255, 255, 0.05);
  --btn-ghost-hover: rgba(255, 255, 255, 0.09);
  --status-dot-idle: rgba(255, 255, 255, 0.2);
  --toast-border: var(--glass-border-bright);

  --shadow-accent: 0 4px 18px rgba(35, 60, 100, 0.16);
  --shadow-cta: 0 6px 24px rgba(35, 60, 100, 0.2);
  --shadow-cta-main: 0 6px 24px rgba(37, 160, 86, 0.34);
  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 6px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(200, 215, 235, 0.04);
}

/* ============ 白天 ============ */
[data-theme="light"] {
  color-scheme: light;

  --bg-deep: #f4f6fa;
  --bg-base: #ffffff;
  --bg-elevated: rgba(255, 255, 255, 0.96);
  --theme-color-meta: #f4f6fa;
  --page-bg-wash: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.52) 42%,
    rgba(255, 255, 255, 0.38) 100%
  );
  --bg-image-opacity: 1;

  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-bg-strong: rgba(255, 255, 255, 0.95);
  --glass-bg-fallback: #ffffff;
  --glass-border: rgba(30, 50, 80, 0.08);
  --glass-border-bright: rgba(30, 50, 80, 0.12);
  --glass-blur: 16px;

  --text-primary: #1a2433;
  --text-secondary: rgba(26, 36, 51, 0.78);
  --text-muted: rgba(26, 36, 51, 0.52);
  --text-faint: rgba(26, 36, 51, 0.36);
  --on-accent: #ffffff;

  --accent: #4a72a8;
  --accent-2: #3d6a9e;
  --accent-3: #5a84b8;
  --accent-deep: #355d8a;

  --gradient-brand: linear-gradient(145deg, #5a84b8 0%, #4a72a8 52%, #6b94c8 100%);
  --gradient-cta: linear-gradient(175deg, #5b86c4 0%, #4a72a8 50%, #3f6496 100%);
  --gradient-cta-main: linear-gradient(175deg, #3dba6e 0%, #2fa85c 50%, #289652 100%);
  --border-cta-main: rgba(47, 168, 92, 0.34);

  --accent-bg: rgba(74, 114, 168, 0.08);
  --accent-border: rgba(74, 114, 168, 0.22);

  --surface-inset: rgba(74, 114, 168, 0.05);
  --surface-raised: rgba(255, 255, 255, 0.9);
  --surface-hover: rgba(74, 114, 168, 0.06);
  --surface-chip: rgba(255, 255, 255, 0.95);
  --border-subtle: rgba(30, 50, 80, 0.08);
  --border-dashed: rgba(74, 114, 168, 0.22);
  --divider: rgba(30, 50, 80, 0.1);
  --card-shine: rgba(255, 255, 255, 0.9);
  --entry-card-bg: linear-gradient(165deg, rgba(74, 114, 168, 0.06) 0%, rgba(255, 255, 255, 0.9) 55%, #ffffff 100%);
  --entry-shine: rgba(74, 114, 168, 0.2);
  --btn-ghost-bg: rgba(30, 50, 80, 0.04);
  --btn-ghost-hover: rgba(30, 50, 80, 0.07);
  --status-dot-idle: rgba(30, 50, 80, 0.15);
  --toast-border: rgba(30, 50, 80, 0.1);

  --shadow-accent: 0 4px 16px rgba(74, 114, 168, 0.14);
  --shadow-cta: 0 6px 22px rgba(74, 114, 168, 0.2);
  --shadow-cta-main: 0 6px 22px rgba(47, 168, 92, 0.3);
  --shadow-soft: 0 4px 20px rgba(30, 50, 80, 0.06);
  --shadow-card: 0 4px 24px rgba(30, 50, 80, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@supports not (backdrop-filter: blur(1px)) {
  :root,
  [data-theme="dark"] {
    --glass-bg: var(--glass-bg-fallback);
    --glass-bg-strong: var(--glass-bg-fallback);
  }

  [data-theme="light"] {
    --glass-bg: var(--glass-bg-fallback);
    --glass-bg-strong: var(--glass-bg-fallback);
  }
}