/* Atunus Home — tokens.css compiled from tokens.json for local use (2026-10-22). Edit tokens.json, not this file. */
:root, [data-theme="atunus-home"] {
  --brand-100: #eeefe6;
  --brand-200: #e2e3d7;
  --brand-500: #8b8f7c;
  --brand-600: #707461;
  --brand-700: #565a49;
  --brand-800: #3d4134;
  --brand-900: #292d23;
  --neutral-white: #ffffff;
  --neutral-400: #bebbb4;
  --bg-base: #fafaf9;
  --bg-white: #ffffff;
  --bg-section: #f3f3f0;
  --surface-brand: #f7f8f2;
  --surface-card: #ffffff;
  --surface-muted: #e8e7e2;
  --surface-subtle: #f3f3f0;
  --surface-fill-selected: #eeefe6;
  --text-primary: #2a2926;
  --text-secondary: #56534f;
  --text-text-2: #696765;
  --text-tertiary: #98958f;
  --text-disabled: #bebbb4;
  --text-brand: #707461;
  --text-inverse: #fafaf9;
  --border-subtle: #e8e7e2;
  --border-base: #d7d5cf;
  --border-strong: #98958f;
  --border-brand: #707461;
  --action-primary: #707461;
  --action-primary-hover: #565a49;
  --action-primary-active: #3d4134;
  --action-secondary: #eeefe6;
  --action-secondary-hover: #e2e3d7;
  --action-disabled: #e8e7e2;
  --state-error: #b94a3e;
  --state-warning: #b8895a;
  --sale-sale: #b96a4c;
  --other-overlay: rgba(23, 22, 19, 0.48);
  --logo-ink: #171613;
  --overlay-image: rgba(0, 0, 0, 0.2);
  --header-gradient: rgba(86, 90, 73, 0.8);
  --neutral-500: #8f8c86;
  --sale-700: #a85a3d;
  --warning-700: #936637;
  --state-error-100: #f9f1f0;
  --state-warning-100: #f8f3ee;
  --overlay-strong: rgba(23, 22, 19, 0.64);
  --text-subtle: var(--text-text-2);
  --control-border: var(--neutral-500);
  --control-border-hover: var(--text-secondary);
  --control-border-focus: var(--border-brand);
  --choice-border: var(--neutral-500);
  --choice-checked: var(--action-primary);
  --action-secondary-text: var(--brand-700);
  --text-eyebrow: var(--brand-700);
  --action-outline-text: var(--brand-700);
  --rating-star: var(--text-primary);
  --price-sale: var(--sale-700);
  --price-compare: var(--text-secondary);
  --badge-neutral-bg: var(--brand-100);
  --badge-neutral-text: var(--brand-700);
  --badge-set-bg: var(--brand-600);
  --badge-set-text: var(--text-inverse);
  --badge-new-bg: var(--brand-100);
  --badge-new-text: var(--brand-700);
  --badge-bestseller-bg: var(--brand-800);
  --badge-bestseller-text: var(--text-inverse);
  --badge-sale-bg: var(--sale-700);
  --badge-sale-text: var(--neutral-white);
  --count-badge-bg: var(--sale-700);
  --feedback-error-text: var(--state-error);
  --feedback-error-bg: var(--state-error-100);
  --feedback-warning-text: var(--warning-700);
  --feedback-warning-bg: var(--state-warning-100);
  --feedback-success-text: var(--brand-700);
  --feedback-success-bg: var(--brand-100);
  --delivery-extended-text: var(--text-secondary);
  --focus-ring-color: var(--brand-800);
  --focus-ring-inverse-color: var(--text-inverse);
  --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.02), 0 4px 5px rgba(0, 0, 0, 0.02);
  --shadow-overlay: 0 12px 32px rgba(23, 22, 19, 0.16), 0 2px 6px rgba(23, 22, 19, 0.08);
  --focus-ring: 0 0 0 2px #fafaf9, 0 0 0 4px #3d4134;
  --focus-ring-inverse: 0 0 0 2px #292d23, 0 0 0 4px #fafaf9;
}
:root {
  --padding-lr: 40px;
  --padding-lr-t: 20px;
  --page-gutter-m: 16px;
  --padding-tb: 60px;
  --padding-tb-t: 40px;
  --padding-tb-m: 32px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-80: 80px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --display-1: 72px;
  --display-1-t: 56px;
  --display-1-m: 36px;
  --display-2: 56px;
  --display-2-t: 44px;
  --display-2-m: 34px;
  --heading-h1: 48px;
  --heading-h1-t: 40px;
  --heading-h1-m: 32px;
  --heading-h2: 40px;
  --heading-h2-t: 32px;
  --heading-h2-m: 28px;
  --heading-h3: 32px;
  --heading-h3-t: 28px;
  --heading-h3-m: 22px;
  --heading-h4: 24px;
  --heading-h4-m: 20px;
  --heading-h5: 20px;
  --heading-h5-m: 18px;
  --heading-h6: 18px;
  --heading-h6-m: 16px;
  --body-large: 18px;
  --body-large-m: 16px;
  --body-base: 16px;
  --body-base-m: 14px;
  --body-small: 14px;
  --body-small-m: 12px;
  --body-caption: 12px;
  --price-large-m: 24px;
  --zh-display-1: 64px;
  --zh-display-1-t: 48px;
  --zh-display-1-m: 32px;
  --zh-display-2: 48px;
  --zh-display-2-t: 40px;
  --zh-display-2-m: 30px;
  --zh-heading-h1: 40px;
  --zh-heading-h1-t: 34px;
  --zh-heading-h1-m: 28px;
  --zh-heading-h2: 34px;
  --zh-heading-h2-t: 28px;
  --zh-heading-h2-m: 24px;
  --zh-heading-h3: 28px;
  --zh-heading-h3-t: 24px;
  --zh-heading-h3-m: 20px;
  --zh-heading-h4: 22px;
  --zh-heading-h4-m: 19px;
  --zh-heading-h5: 18px;
  --zh-heading-h5-m: 17px;
  --zh-heading-h6: 16px;
  --zh-heading-h6-m: 15px;
  --zh-body-base-m: 15px;
  --zh-body-small-m: 13px;
  --control-lg: 48px;
  --control-md: 40px;
  --control-sm: 36px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-btn-md: 18px;
  --icon-btn-lg: 22px;
  --bp-mobile: 390px;
  --bp-tablet: 800px;
  --bp-desktop: 1440px;
  --bp-max-mobile: 599px;
  --bp-max-tablet: 1023px;
  --container-max: 1360px;
  --grid-gap: 24px;
  --grid-gap-m: 16px;
  --z-header: 100;
  --z-drawer: 300;
  --z-toast: 500;
  --font-title: "Archivo", sans-serif;
  --font-text: "Archivo", sans-serif;
  --font-zh-title: "Archivo", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-zh-text: "Archivo", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
}
.display-1-semibold { font-family: var(--font-title); font-size: 72px; line-height: 1.1; font-weight: 600; }
.display-2-semibold { font-family: var(--font-title); font-size: 56px; line-height: 1.12; font-weight: 600; }
.heading-h1-semibold { font-family: var(--font-title); font-size: 48px; line-height: 1.16; font-weight: 600; }
.heading-h2-semibold { font-family: var(--font-title); font-size: 40px; line-height: 1.2; font-weight: 600; }
.heading-h3-medium { font-family: var(--font-title); font-size: 32px; line-height: 1.25; font-weight: 500; }
.heading-h3-semibold { font-family: var(--font-title); font-size: 32px; line-height: 1.25; font-weight: 600; }
.heading-h4-medium { font-family: var(--font-title); font-size: 24px; line-height: 1.3; font-weight: 500; }
.heading-h5-medium { font-family: var(--font-title); font-size: 20px; line-height: 1.35; font-weight: 500; }
.heading-h6-medium { font-family: var(--font-title); font-size: 18px; line-height: 1.4; font-weight: 500; }
.body-large-regular { font-family: var(--font-text); font-size: 18px; line-height: 1.5; font-weight: 400; }
.body-large-medium { font-family: var(--font-text); font-size: 18px; line-height: 1.5; font-weight: 500; }
.body-base-regular { font-family: var(--font-text); font-size: 16px; line-height: 1.5; font-weight: 400; }
.body-base-medium { font-family: var(--font-text); font-size: 16px; line-height: 1.5; font-weight: 500; }
.body-small-regular { font-family: var(--font-text); font-size: 14px; line-height: 1.45; font-weight: 400; }
.body-small-medium { font-family: var(--font-text); font-size: 14px; line-height: 1.45; font-weight: 500; }
.caption-base-regular { font-family: var(--font-text); font-size: 12px; line-height: 1.4; font-weight: 400; }
.caption-base-medium { font-family: var(--font-text); font-size: 12px; line-height: 1.4; font-weight: 500; }
.button-base { font-family: var(--font-text); font-size: 16px; line-height: 1.2; font-weight: 600; }
.button-small { font-family: var(--font-text); font-size: 14px; line-height: 1.2; font-weight: 600; }
.label-base { font-family: var(--font-text); font-size: 14px; line-height: 1.2; font-weight: 500; }
.label-large { font-family: var(--font-text); font-size: 16px; line-height: 1.2; font-weight: 500; }
.commerce-price-base { font-family: var(--font-title); font-size: 20px; line-height: 1.2; font-weight: 600; }
.commerce-price-large { font-family: var(--font-title); font-size: 32px; line-height: 1.25; font-weight: 500; }
.zh-display-1 { font-family: var(--font-zh-title); font-size: 64px; line-height: 1.2; font-weight: 600; }
.zh-display-2 { font-family: var(--font-zh-title); font-size: 48px; line-height: 1.25; font-weight: 600; }
.zh-heading-h2 { font-family: var(--font-zh-title); font-size: 34px; line-height: 1.3; font-weight: 600; }
.zh-heading-h3 { font-family: var(--font-zh-title); font-size: 28px; line-height: 1.35; font-weight: 600; }
.zh-heading-h4 { font-family: var(--font-zh-title); font-size: 22px; line-height: 1.4; font-weight: 600; }
.zh-heading-h6 { font-family: var(--font-zh-title); font-size: 16px; line-height: 1.5; font-weight: 600; }
.zh-body-large { font-family: var(--font-zh-text); font-size: 18px; line-height: 1.75; font-weight: 400; }
.zh-body-base { font-family: var(--font-zh-text); font-size: 16px; line-height: 1.75; font-weight: 400; }
.zh-body-small { font-family: var(--font-zh-text); font-size: 14px; line-height: 1.7; font-weight: 400; }
.zh-caption { font-family: var(--font-zh-text); font-size: 12px; line-height: 1.6; font-weight: 400; }
.zh-button { font-family: var(--font-zh-text); font-size: 16px; line-height: 1.2; font-weight: 600; }
.zh-label { font-family: var(--font-zh-text); font-size: 14px; line-height: 1.2; font-weight: 500; }