/* ----------------------------------------------------------------------
   WIN1STEP design tokens
   一套设计变量，所有页面共享。视觉系统按用户 v17 参考稿对齐：
   红黑配色 + 白卡片 + 圆角 + 顶部渐变细线 + Mono 数字。
   ---------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f7f7f7;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --surface-3: #ebebed;

  /* Text */
  --text: #111111;
  --fg: var(--text);
  --text-2: #2f2f33;
  --muted: #6b7280;

  /* Lines */
  --line: #e5e5e5;
  --line-soft: #eeeeee;

  /* Brand colors (red is primary, black is accent) */
  --brand-red: #c8322a;
  --brand-red-dark: #a92822;
  --brand-red-soft: #fff1f0;
  --brand-red-ring: rgba(200, 50, 42, 0.18);

  --brand-black: #050505;

  /* Status */
  --success: #166534;
  --success-soft: #eefbf3;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;

  /* Default accent — single red theme across the whole app */
  --accent: var(--brand-red);
  --accent-dark: var(--brand-red-dark);
  --accent-soft: var(--brand-red-soft);
  --accent-ring: var(--brand-red-ring);
  --accent-on: #ffffff;

  /* Typography */
  --font-display: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Inter",
    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: var(--font-display);
  --font-sans: var(--font-display);
  --font-mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;

  /* Sizing */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

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

  /* Elevation (taken from v17) */
  --shadow-sm: 0 4px 12px rgba(5, 5, 5, 0.04);
  --shadow-md: 0 10px 28px rgba(5, 5, 5, 0.06);
  --shadow-lg: 0 18px 45px rgba(5, 5, 5, 0.07);
  --shadow-hero: 0 20px 60px rgba(5, 5, 5, 0.08);

  /* Brand gradient bar (red → black) used at the top of cards */
  --gradient-brand-bar: linear-gradient(90deg, var(--brand-red), var(--brand-black));

  /* Background wash (the soft red glow + paper feel) */
  --page-wash:
    radial-gradient(circle at 80% 10%, rgba(200, 50, 42, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 48%);

  /* Motion */
  --motion-fast: 140ms;
  --motion-base: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Theme variants kept for backwards compatibility — both map to the red brand. */
body.theme-blue,
body.theme-red {
  --accent: var(--brand-red);
  --accent-dark: var(--brand-red-dark);
  --accent-soft: var(--brand-red-soft);
  --accent-ring: var(--brand-red-ring);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}