/* ============================================================
   VEMAX — design tokens (single source of truth, from DESIGN.md)
   ============================================================ */
:root {
  /* colour */
  --color-background: #ffffff;
  --color-surface-muted: #f5f5f7;
  --color-surface-inverse: #000000;
  --color-surface-footer: #1d1d1f;
  --color-text-primary: #1d1d1f;
  --color-text-strong: #0a0a0a;
  --color-text-secondary: #86868b;
  --color-text-secondary-accessible: #6e6e73;
  --color-text-inverse: #ffffff;
  --color-text-on-dark-muted: #a1a1a6;
  --color-primary: #0071e3;
  --color-primary-hover: #0077ed;
  --color-primary-active: #0062c4;
  --color-primary-disabled: #d2d2d7;
  --color-border: #d2d2d7;
  --color-border-inverse: rgba(255, 255, 255, 0.16);
  --color-border-strong: #1d1d1f;
  --color-accent-sale: #d70015;
  --color-accent-sale-indicator: #ff3b30;
  --color-accent-success: #1a7f37;
  --color-accent-success-indicator: #34c759;
  --color-header-glass: rgba(255, 255, 255, 0.8);
  --color-header-glass-fallback: rgba(255, 255, 255, 0.96);
  --color-scrim: rgba(0, 0, 0, 0.32);
  --color-pressed: #e8e8ed;
  --color-focus-ring: #0071e3;
  --color-focus-ring-inverse: #ffffff;
  --gradient-hero-scrim: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.15) 45%,
    rgba(0, 0, 0, 0.55) 100%
  );

  /* typography */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --font-arabic: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, "Segoe UI", sans-serif;

  --fs-display-xl: 72px; --lh-display-xl: 72px; --ls-display-xl: -1.8px; --fw-display-xl: 600;
  --fs-display-lg: 60px; --lh-display-lg: 60px; --ls-display-lg: -1.5px; --fw-display-lg: 600;
  --fs-heading-xl: 36px; --lh-heading-xl: 40px; --ls-heading-xl: -0.9px; --fw-heading-xl: 600;
  --fs-heading-lg: 30px; --lh-heading-lg: 36px; --ls-heading-lg: -0.75px; --fw-heading-lg: 600;
  --fs-heading-md: 24px; --lh-heading-md: 32px; --ls-heading-md: -0.6px; --fw-heading-md: 600;
  --fs-heading-sm: 18px; --lh-heading-sm: 28px; --ls-heading-sm: 0; --fw-heading-sm: 600;
  --fs-body-lg: 20px; --lh-body-lg: 28px; --ls-body-lg: 0; --fw-body-lg: 400;
  --fs-body: 18px; --lh-body: 28px; --ls-body: 0; --fw-body: 400;
  --fs-body-sm: 16px; --lh-body-sm: 24px; --ls-body-sm: 0; --fw-body-sm: 400;
  --fs-body-xs: 14px; --lh-body-xs: 20px; --ls-body-xs: 0; --fw-body-xs: 400;
  --fs-caption: 12px; --lh-caption: 16px; --ls-caption: 0; --fw-caption: 400;
  --fs-label: 14px; --lh-label: 20px; --ls-label: 0; --fw-label: 600;
  --fs-eyebrow: 14px; --lh-eyebrow: 20px; --ls-eyebrow: 0.08em; --fw-eyebrow: 500;
  --fs-nav: 16px; --lh-nav: 24px; --ls-nav: 0; --fw-nav: 400;
  --fs-button: 16px; --lh-button: 24px; --ls-button: 0; --fw-button: 400;
  --fs-price: 16px; --lh-price: 24px; --ls-price: 0; --fw-price: 600;

  /* spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 40px;
  --space-section-sm: 48px;
  --space-section: 80px;
  --space-section-lg: 96px;
  --space-header-offset: 80px;

  /* radii */
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --radius-hero: 980px;

  /* structure */
  --container: 1200px;
  --gutter: 24px;
  --header-height: 52px;
  --header-height-sm: 48px;
  --z-sticky: 10;
  --z-header: 50;
  --z-nav-sheet: 60;
  --z-scrim: 69;
  --z-panel: 70;
  --z-toast: 80;

  /* motion */
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-carousel: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-color: 150ms;
  --dur-panel: 200ms;
  --dur-media: 300ms;
}

/* ============================================================
   Locale overrides — tracking/leading must never be inherited blindly
   ============================================================ */
html[lang="zh"] {
  --ls-display-xl: 0; --ls-display-lg: 0; --ls-heading-xl: 0; --ls-heading-lg: 0; --ls-heading-md: 0;
  --ls-caption: 0.01em; --ls-label: 0.01em;
  --lh-display-xl: 83px; --lh-display-lg: 69px; --lh-heading-xl: 46px; --lh-heading-lg: 41px;
  --lh-heading-md: 37px; --lh-body-lg: 32px; --lh-body: 32px; --lh-body-sm: 28px;
}
html[lang="ar"] {
  font-family: var(--font-arabic);
  --font-sans: var(--font-arabic);
  --ls-display-xl: 0; --ls-display-lg: 0; --ls-heading-xl: 0; --ls-heading-lg: 0; --ls-heading-md: 0;
  --ls-heading-sm: 0; --ls-body-lg: 0; --ls-body: 0; --ls-body-sm: 0; --ls-body-xs: 0;
  --ls-caption: 0; --ls-label: 0; --ls-eyebrow: 0; --ls-nav: 0; --ls-button: 0; --ls-price: 0;
  --lh-display-xl: 86px; --lh-display-lg: 72px; --lh-heading-xl: 48px; --lh-heading-lg: 43px;
  --lh-heading-md: 38px; --lh-body-lg: 33px; --lh-body: 33px; --lh-body-sm: 28px;
}
html[lang="ru"] {
  --lh-body-lg: 30px; --lh-body: 30px; --lh-body-sm: 25px;
  --ls-display-xl: -1.6px; --ls-display-lg: -1.3px;
}
html[lang="zh"] .t-eyebrow,
html[lang="ar"] .t-eyebrow,
html[lang="zh"] .t-label,
html[lang="ar"] .t-label {
  text-transform: none;
}

/* ============================================================
   Base
   ============================================================ */
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.on-dark :focus-visible,
.hero :focus-visible,
.footer :focus-visible {
  outline-color: var(--color-focus-ring-inverse);
}
[id] {
  scroll-margin-top: var(--space-header-offset);
}

/* ============================================================
   Typography utilities
   ============================================================ */
.t-display-xl,
.t-display-lg,
.t-heading-xl,
.t-heading-lg,
.t-heading-md,
.t-heading-sm {
  margin: 0;
  color: var(--color-text-primary);
}
.t-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); font-weight: var(--fw-display-xl); }
.t-display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--ls-display-lg); font-weight: var(--fw-display-lg); }
.t-heading-xl { font-size: var(--fs-heading-xl); line-height: var(--lh-heading-xl); letter-spacing: var(--ls-heading-xl); font-weight: var(--fw-heading-xl); }
.t-heading-lg { font-size: var(--fs-heading-lg); line-height: var(--lh-heading-lg); letter-spacing: var(--ls-heading-lg); font-weight: var(--fw-heading-lg); }
.t-heading-md { font-size: var(--fs-heading-md); line-height: var(--lh-heading-md); letter-spacing: var(--ls-heading-md); font-weight: var(--fw-heading-md); }
.t-heading-sm { font-size: var(--fs-heading-sm); line-height: var(--lh-heading-sm); letter-spacing: var(--ls-heading-sm); font-weight: var(--fw-heading-sm); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--ls-body-lg); font-weight: var(--fw-body-lg); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: var(--fw-body); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); letter-spacing: var(--ls-body-sm); font-weight: var(--fw-body-sm); }
.t-body-xs { font-size: var(--fs-body-xs); line-height: var(--lh-body-xs); letter-spacing: var(--ls-body-xs); font-weight: var(--fw-body-xs); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); font-weight: var(--fw-caption); }
.t-label { font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); font-weight: var(--fw-label); }
.t-eyebrow { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-eyebrow); text-transform: uppercase; }
.t-nav { font-size: var(--fs-nav); line-height: var(--lh-nav); letter-spacing: var(--ls-nav); font-weight: var(--fw-nav); }
.t-button { font-size: var(--fs-button); line-height: var(--lh-button); letter-spacing: var(--ls-button); font-weight: var(--fw-button); }
.t-price { font-size: var(--fs-price); line-height: var(--lh-price); letter-spacing: var(--ls-price); font-weight: var(--fw-price); font-variant-numeric: tabular-nums; }
.muted { color: var(--color-text-secondary-accessible); }
.muted-display { color: var(--color-text-secondary); }
.numeric { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html[lang="zh"] .clamp-2,
html[lang="ar"] .clamp-2 {
  -webkit-line-clamp: 3;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Layout primitives
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band {
  width: 100%;
  padding-block: var(--space-section);
}
.band--muted {
  background: var(--color-surface-muted);
}
.page-offset {
  padding-block-start: var(--space-header-offset);
}
.stack-sm > * + * { margin-block-start: var(--space-sm); }
.stack-base > * + * { margin-block-start: var(--space-base); }
.stack-lg > * + * { margin-block-start: var(--space-lg); }

@media (max-width: 1023px) {
  .band { padding-block: var(--space-section-sm); }
}
@media (min-width: 1280px) {
  .band--editorial { padding-block: var(--space-section-lg); }
}
@media (max-width: 767px) {
  :root {
    --fs-display-xl: 48px; --lh-display-xl: 52px; --ls-display-xl: -1.2px;
    --fs-display-lg: 40px; --lh-display-lg: 44px; --ls-display-lg: -1px;
    --fs-heading-xl: 30px; --lh-heading-xl: 36px; --ls-heading-xl: -0.6px;
    --fs-heading-lg: 24px; --lh-heading-lg: 32px; --ls-heading-lg: -0.5px;
    --fs-heading-md: 22px; --lh-heading-md: 30px; --ls-heading-md: -0.4px;
    --fs-body-lg: 18px; --lh-body-lg: 28px;
    --header-height: var(--header-height-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}