/* ==========================================================================
   2dto3d.com.cn — shared design tokens
   Style direction: fresh, natural, slightly realistic. Sky blue / foliage green
   as primaries, warm wood + amber as accents. Frosted-glass panels, soft radii,
   soft shadows, light hairline borders. Modern sans-serif for CJK.
   ========================================================================== */

:root {
  /* ---- brand palette ---- */
  --sky-100: #eaf5ff;
  --sky-300: #a9d6f7;
  --sky-500: #5aa9e6;
  --sky-600: #3f8fd4;
  --green-300: #a8d99a;
  --green-500: #5fb85a;
  --green-600: #47a344;
  --green-700: #3a8a38;
  --wood-500: #b98a5a;
  --wood-700: #8a6238;
  --amber-400: #f7c85c;
  --amber-500: #f2ad3a;
  --orange-500: #ef8f3c;

  /* ---- ink & surfaces ---- */
  --ink-900: #1d2b36;
  --ink-700: #354957;
  --ink-500: #5b7183;
  --ink-300: #93a7b5;
  --paper: #ffffff;

  /* ---- frosted glass ---- */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-dark: rgba(24, 46, 62, 0.42);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-blur: 16px;

  /* ---- radii ---- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* ---- shadows ---- */
  --shadow-sm: 0 2px 8px rgba(18, 44, 66, 0.10);
  --shadow-md: 0 8px 24px rgba(18, 44, 66, 0.16);
  --shadow-lg: 0 18px 44px rgba(18, 44, 66, 0.22);
  --shadow-glow-green: 0 10px 30px rgba(71, 163, 68, 0.38);

  /* ---- type ---- */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans SC", "Hiragino Sans GB", "Segoe UI", Roboto, system-ui,
    -apple-system, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 34px;
  --fs-3xl: 52px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
}

/* ---- shared primitives ---- */

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
}

.glass-dark {
  background: var(--glass-bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  color: #f4fbff;
}

.pill {
  border-radius: var(--radius-pill);
}

* {
  box-sizing: border-box;
}