/* WJS Home — generated from tokens.json */
:root, [data-theme="default"] {
  --global-black: #111111;
  --global-white: #ffffff;
  --global-primary: #a28f79;
  --global-red: #d35c1a;
  --global-secondary: #e7d5bf;
  --bg-white: #fcfbfa;
  --bg-black: #53443c;
  --bg-1: #f5f2ed;
  --bg-2: #ebe2d8;
  --bg-3: #e5d7c5;
  --text-1: #53443c;
  --text-2: #666564;
  --text-3: #c9c9c9;
  --text-4: #dfdfdf;
  --text-white: #ffffff;
  --border-black: #333333;
  --border-1: #e5e2df;
  --border-2: #d6d3d0;
  --surface-page: var(--bg-1);
  --surface-raised: var(--bg-white);
  --surface-card: var(--global-white);
  --surface-section: var(--bg-2);
  --surface-warm: var(--bg-3);
  --surface-sand: var(--global-secondary);
  --surface-inverse: var(--bg-black);
  --fg-primary: var(--text-1);
  --fg-secondary: var(--text-2);
  --fg-placeholder: var(--text-2);
  --fg-disabled: var(--text-4);
  --fg-on-inverse: var(--text-white);
  --fg-on-inverse-secondary: var(--text-3);
  --fg-accent-large: var(--global-primary);
  --link: var(--text-1);
  --action-primary-bg: var(--bg-black);
  --action-primary-fg: var(--text-white);
  --action-primary-hover-bg: var(--border-black);
  --action-primary-active-bg: var(--global-black);
  --action-secondary-fg: var(--text-1);
  --action-secondary-border: var(--text-1);
  --action-secondary-hover-bg: var(--bg-2);
  --action-warm-bg: var(--global-secondary);
  --action-warm-hover-bg: var(--bg-3);
  --action-inverse-bg: var(--bg-1);
  --price-fg: var(--text-1);
  --price-sale-large: var(--global-red);
  --price-compare: var(--text-2);
  --badge-sale-bg: var(--global-red);
  --badge-sale-fg: var(--global-black);
  --badge-new-bg: var(--bg-black);
  --badge-new-fg: var(--text-white);
  --badge-feature-bg: var(--global-secondary);
  --badge-feature-fg: var(--text-1);
  --rating-star: var(--global-primary);
  --control-border: var(--text-2);
  --control-border-hover: var(--text-1);
  --control-border-focus: var(--text-1);
  --control-border-error: var(--global-red);
  --choice-checked: var(--bg-black);
  --divider: var(--border-1);
  --divider-strong: var(--border-2);
  --divider-emphasis: var(--border-black);
  --focus-ring-color: var(--text-1);
  --focus-ring-inverse-color: var(--global-white);
  --feedback-error-accent: var(--global-red);
  --feedback-neutral-accent: var(--text-1);
  --logo-ink: var(--bg-black);
  --logo-ink-inverse: var(--global-white);
  --overlay-scrim: rgba(83, 68, 60, 0.6);
  --overlay-scrim-strong: rgba(83, 68, 60, 0.75);
  --shadow-card: 0 2px 10px rgba(83, 68, 60, 0.06);
  --shadow-soft: 0 6px 24px rgba(83, 68, 60, 0.08);
  --shadow-lift: 0 12px 36px rgba(83, 68, 60, 0.12);
  --focus-ring: 0 0 0 2px #f5f2ed, 0 0 0 4px #53443c;
  --focus-ring-inverse: 0 0 0 2px #53443c, 0 0 0 4px #ffffff;
}
:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-64: 64px;
  --space-96: 96px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --container-max: 1200px;
  --page-gutter: 40px;
  --page-gutter-t: 24px;
  --page-gutter-m: 16px;
  --section-pad: 64px;
  --section-pad-m: 40px;
  --grid-gap: 24px;
  --grid-gap-m: 16px;
  --bp-max-mobile: 599px;
  --bp-max-tablet: 1023px;
  --control-lg: 48px;
  --control-md: 40px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 2px;
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-title: "Mulish", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-zh-title: "Mulish", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-zh-text: "Archivo", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
.title-28 { font-family: var(--font-title); font-size: 28px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; }
.title-24 { font-family: var(--font-title); font-size: 24px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; }
.title-18 { font-family: var(--font-title); font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; }
.title-16 { font-family: var(--font-title); font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; }
.title-14 { font-family: var(--font-title); font-size: 14px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; }
.body-16 { font-family: var(--font-text); font-size: 16px; line-height: 1.4; font-weight: 400; letter-spacing: 0px; }
.body-14 { font-family: var(--font-text); font-size: 14px; line-height: 1.4; font-weight: 400; letter-spacing: 0px; }
.body-12 { font-family: var(--font-text); font-size: 12px; line-height: 1.4; font-weight: 400; letter-spacing: 0px; }
.zh-title-28 { font-family: var(--font-zh-title); font-size: 28px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; }
.zh-title-24 { font-family: var(--font-zh-title); font-size: 24px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; }
.zh-title-18 { font-family: var(--font-zh-title); font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; }
.zh-title-16 { font-family: var(--font-zh-title); font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; }
.zh-title-14 { font-family: var(--font-zh-title); font-size: 14px; line-height: 1.4; font-weight: 700; letter-spacing: 0px; }
.zh-body-16 { font-family: var(--font-zh-text); font-size: 16px; line-height: 1.7; font-weight: 400; letter-spacing: 0px; }
.zh-body-14 { font-family: var(--font-zh-text); font-size: 14px; line-height: 1.7; font-weight: 400; letter-spacing: 0px; }
.zh-body-12 { font-family: var(--font-zh-text); font-size: 12px; line-height: 1.6; font-weight: 400; letter-spacing: 0px; }
@font-face { font-family: "Mulish"; src: url("../project/fonts/mulish-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../project/fonts/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }