:root {
  color-scheme: light dark;
  --tpk-color-brand-primary: #009b74;
  --tpk-color-action: #009B74;
  --tpk-color-action-hover: #009B74;
  --tpk-color-background: #ffffff;
  --tpk-color-surface: #f7f9f8;
  --tpk-color-text: #111111;
  --tpk-color-muted: #666666;
  --tpk-color-border: #e6e9ed;
  --tpk-color-focus: #009b74;
  --tpk-font-sans: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  --tpk-content-max: 1360px;
  --tpk-page-gutter: clamp(18px, 3vw, 40px);
  --tpk-section-y: clamp(56px, 7vw, 112px);
  --tpk-reading-max: 68ch;
	--tpk-motion-fast: .22s;
	--tpk-motion-standard: .35s;
	--tpk-motion-emphasis: .75s;
	--tpk-underline-gap: 2px;
	--tpk-underline-thickness: 1px;
	--tpk-underline-duration: .95s;
	--tpk-footer-background: #080a09;
	--tpk-footer-text: #f2f5f4;
	--tpk-footer-muted: #a9b1af;
	--tpk-footer-subtle: #7f8986;
	--tpk-footer-border: rgba(255, 255, 255, .12);
	--tpk-footer-hover: #55d0b0;
  --tpk-header-height: 72px;
  --tpk-radius-none: 0;
  --tpk-radius-control: 10px;
  --tpk-radius-card: 10px;
  --tpk-radius-pill: 999px;
  --tpk-space-1: 4px;
  --tpk-space-2: 8px;
  --tpk-space-3: 12px;
  --tpk-space-4: 16px;
  --tpk-space-5: 24px;
  --tpk-space-6: 32px;
  --tpk-space-7: 48px;
  --tpk-space-8: 72px;
  --tpk-space-9: 96px;
  --shadow: 0 18px 46px rgba(16, 24, 40, .04);
  --shadow-soft: 0 14px 34px rgba(16, 24, 40, .035);
  --shadow-dark: 0 24px 56px rgba(16, 24, 40, .16);
  --shadow-circle: 0 8px 22px rgba(16, 24, 40, .12);
  --shadow-pill-light: var(--shadow);
  --shadow-pill-ink: 0 14px 34px rgba(16, 24, 40, .16);
  --tpk-shadow-soft: var(--shadow-soft);
  --tpk-green: #009B74;
  --tpk-text-primary: var(--tpk-color-text);
  --radius-card: var(--tpk-radius-card);
  --radius-pill: var(--tpk-radius-pill);
  --tpk-header-height-desktop: 80px;
  --tpk-header-height-sticky: 68px;
  --tpk-header-height-tablet: 72px;
  --tpk-header-height-mobile: 64px;
  --tpk-transition-standard: 0.35s ease;
  --tpk-transition-sticky: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  --image-scale-hero: 1.012;
  --image-scale-case: 1.024;
  --image-scale-product: 1.035;
  --image-duration-hero: 1.28s;
  --image-duration-case: 1.18s;
  --image-duration-product: .7s;
  --ease-image: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tpk-color-background: #101514;
    --tpk-color-surface: #17201f;
    --tpk-color-text: #edf3f1;
    --tpk-color-muted: #b8c3c0;
    --tpk-color-border: #34413e;
    --tpk-color-focus: #64d7b9;
  }
}