/* GENERATED by tools/build_tokens.py from design/tokens.json. Do not edit by hand. */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Oswald-500.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Oswald-600.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Oswald-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Barlow-600.woff2") format("woff2");
}

:root {
  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Barlow", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 56px;
  --space-8: 96px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --container-max: 1320px;
  --text-max: 70ch;
  --header-h: 72px;
  --grid-cols-desktop: 4;
  --grid-cols-tablet: 3;
  --grid-cols-mobile: 2;
  --tap-min: 44px;
  --gutter-mobile: 16px;
  --test-widths: 360px 375px 390px 412px;
  --bp-tablet: 991px;
  --bp-mobile-l: 767px;
  --bp-mobile: 478px;
  --img-product: 2 / 3;
  --img-category: 4 / 5;
  --img-hero: 16 / 7;
  --img-banner: 3 / 1;
  --type-m-display-hero-size: 36px;
  --type-m-display-hero-line: 40px;
  --type-m-display-hero-weight: 700;
  --type-m-display-hero-tracking: 0.01em;
  --type-m-display-hero-family: var(--font-display);
  --type-m-display-h1-size: 28px;
  --type-m-display-h1-line: 34px;
  --type-m-display-h1-weight: 700;
  --type-m-display-h1-tracking: 0.01em;
  --type-m-display-h1-family: var(--font-display);
  --type-m-display-h2-size: 24px;
  --type-m-display-h2-line: 30px;
  --type-m-display-h2-weight: 600;
  --type-m-display-h2-tracking: 0.01em;
  --type-m-display-h2-family: var(--font-display);
  --type-m-display-h3-size: 20px;
  --type-m-display-h3-line: 26px;
  --type-m-display-h3-weight: 600;
  --type-m-display-h3-tracking: 0.02em;
  --type-m-display-h3-family: var(--font-display);
  --type-m-price-lg-size: 24px;
  --type-m-price-lg-line: 28px;
  --type-m-price-lg-weight: 600;
  --type-m-price-lg-family: var(--font-display);
  --type-m-price-md-size: 17px;
  --type-m-price-md-line: 22px;
  --type-m-price-md-weight: 600;
  --type-m-price-md-family: var(--font-display);
  --type-m-text-lead-size: 16px;
  --type-m-text-lead-line: 24px;
  --type-m-text-lead-weight: 400;
  --type-m-text-lead-family: var(--font-sans);
  --type-m-text-body-size: 16px;
  --type-m-text-body-line: 26px;
  --type-m-text-body-weight: 400;
  --type-m-text-body-family: var(--font-sans);
  --type-m-text-card-title-size: 15px;
  --type-m-text-card-title-line: 20px;
  --type-m-text-card-title-weight: 600;
  --type-m-text-card-title-family: var(--font-sans);
  --type-m-text-caption-size: 12px;
  --type-m-text-caption-line: 16px;
  --type-m-text-caption-weight: 500;
  --type-m-text-caption-family: var(--font-sans);
  --type-display-hero-size: 56px;
  --type-display-hero-line: 60px;
  --type-display-hero-weight: 700;
  --type-display-hero-tracking: 0.01em;
  --type-display-hero-family: var(--font-display);
  --type-display-h1-size: 40px;
  --type-display-h1-line: 46px;
  --type-display-h1-weight: 700;
  --type-display-h1-tracking: 0.01em;
  --type-display-h1-family: var(--font-display);
  --type-display-h2-size: 32px;
  --type-display-h2-line: 38px;
  --type-display-h2-weight: 600;
  --type-display-h2-tracking: 0.01em;
  --type-display-h2-family: var(--font-display);
  --type-display-h3-size: 22px;
  --type-display-h3-line: 28px;
  --type-display-h3-weight: 600;
  --type-display-h3-tracking: 0.02em;
  --type-display-h3-family: var(--font-display);
  --type-label-eyebrow-size: 13px;
  --type-label-eyebrow-line: 16px;
  --type-label-eyebrow-weight: 500;
  --type-label-eyebrow-tracking: 0.08em;
  --type-label-eyebrow-family: var(--font-display);
  --type-label-button-size: 15px;
  --type-label-button-line: 20px;
  --type-label-button-weight: 600;
  --type-label-button-tracking: 0.05em;
  --type-label-button-family: var(--font-display);
  --type-label-nav-size: 15px;
  --type-label-nav-line: 20px;
  --type-label-nav-weight: 500;
  --type-label-nav-tracking: 0.04em;
  --type-label-nav-family: var(--font-display);
  --type-price-lg-size: 28px;
  --type-price-lg-line: 32px;
  --type-price-lg-weight: 600;
  --type-price-lg-family: var(--font-display);
  --type-price-md-size: 19px;
  --type-price-md-line: 24px;
  --type-price-md-weight: 600;
  --type-price-md-family: var(--font-display);
  --type-text-lead-size: 19px;
  --type-text-lead-line: 30px;
  --type-text-lead-weight: 400;
  --type-text-lead-family: var(--font-sans);
  --type-text-body-size: 17px;
  --type-text-body-line: 28px;
  --type-text-body-weight: 400;
  --type-text-body-family: var(--font-sans);
  --type-text-small-size: 15px;
  --type-text-small-line: 24px;
  --type-text-small-weight: 400;
  --type-text-small-family: var(--font-sans);
  --type-text-card-title-size: 16px;
  --type-text-card-title-line: 22px;
  --type-text-card-title-weight: 600;
  --type-text-card-title-family: var(--font-sans);
  --type-text-label-size: 14px;
  --type-text-label-line: 20px;
  --type-text-label-weight: 500;
  --type-text-label-family: var(--font-sans);
  --type-text-caption-size: 13px;
  --type-text-caption-line: 18px;
  --type-text-caption-weight: 500;
  --type-text-caption-family: var(--font-sans);
  --surface: #ffffff;
  --surface-alt: #f6f3f4;
  --surface-raised: #ffffff;
  --line: #e5dfe1;
  --line-strong: #8c8386;
  --ink: #141112;
  --ink-body: #2e292b;
  --ink-muted: #675f62;
  --rose: #c8234a;
  --rose-hover: #a61c3c;
  --on-rose: #ffffff;
  --rose-tint: #fbeef1;
  --success: #1d7a4c;
  --warning: #9a5b0b;
  --star: #b7791f;
  --price-was: #7a7174;
  --shadow-hover: 0 6px 20px rgba(20, 17, 18, 0.10);
  --shadow-pop: 0 12px 32px rgba(20, 17, 18, 0.16);
  color-scheme: light;
}
[data-theme="dark"] {
  --surface: #121011;
  --surface-alt: #1c1819;
  --surface-raised: #231e20;
  --line: #332d2f;
  --line-strong: #6e6568;
  --ink: #f5f1f2;
  --ink-body: #dcd5d7;
  --ink-muted: #a69ea1;
  --rose: #e9416a;
  --rose-hover: #f26489;
  --on-rose: #141112;
  --rose-tint: #3a1520;
  --success: #4cc48a;
  --warning: #e5a93b;
  --star: #e5a93b;
  --price-was: #8f878a;
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
  background-color: var(--surface);
  color: var(--ink-body);
}