:root {
  --site-color-ink: #1d1d1b;
  --site-color-accent: #ef2c03;
  --site-color-accent-dark: #c92302;
  --site-color-accent-soft: #fff0ec;
  --site-color-bg: #e4e9ee;
  --site-color-surface: #fbfcfd;
  --site-color-surface-strong: #ffffff;
  --site-color-soft: #dce2e8;
  --site-color-muted: #56616d;
  --site-color-line: #bdc7d1;
  --site-color-graphite: #2f3842;
  --site-radius-card: 8px;
  --site-radius-control: 5px;
  --site-control-height: 48px;
  --site-header-height: 66px;
  --site-header-height-compact: 54px;
  --site-header-logo-width: 50px;
  --site-header-logo-height: 32px;
  --site-header-gap: 22px;
  --site-header-nav-gap: 28px;
  --site-header-action-gap: 12px;
  --site-header-cta-height: 38px;
  --site-theme-toggle-height: 34px;
  --site-theme-track-width: 42px;
  --site-theme-track-height: 22px;
  --site-container-wide: 1280px;
  --site-container-product: 1180px;
  --site-shadow-card: 0 18px 42px rgba(23, 27, 33, .075);
  --site-shadow-strong: 0 24px 58px rgba(23, 27, 33, .14);
  --site-dark-bg: #0f151c;
  --site-dark-surface: #141b22;
  --site-dark-surface-strong: #18212a;
  --site-dark-soft: #202a34;
  --site-dark-text: #f1f4f6;
  --site-dark-muted: #b7c1cb;
  --site-dark-line: #34404c;

  --stp-color-black: var(--site-color-ink);
  --stp-color-accent: var(--site-color-accent);
  --stp-color-accent-dark: var(--site-color-accent-dark);
  --stp-color-accent-soft: var(--site-color-accent-soft);
  --stp-color-bg: var(--site-color-bg);
  --stp-color-card: var(--site-color-surface);
  --stp-color-muted: var(--site-color-muted);
  --stp-color-gray: #e8e8e8;
  --stp-color-marker: var(--site-color-graphite);
  --stp-color-marker-soft: var(--site-color-soft);
  --stp-border-light: var(--site-color-line);
  --stp-radius-card: var(--site-radius-card);
  --stp-radius-control: var(--site-radius-control);
  --stp-shadow-card: var(--site-shadow-card);
  --stp-shadow-strong: var(--site-shadow-strong);

  /* Compatibility aliases are global so shared modules do not depend on page type. */
  --stp-bg: var(--stp-color-bg);
  --stp-surface: var(--stp-color-card);
  --stp-soft: var(--site-color-soft);
  --stp-text: var(--stp-color-black);
  --stp-muted: var(--stp-color-muted);
  --stp-marker: var(--stp-color-marker);
  --stp-marker-soft: var(--stp-color-marker-soft);
  --stp-line: var(--stp-border-light);
  --stp-graphite: var(--stp-color-black);
  --stp-brick: var(--stp-color-accent);
  --stp-brick-dark: var(--stp-color-accent-dark);
  --stp-brick-soft: var(--stp-color-accent-soft);
  --stp-light-gray: var(--stp-color-gray);
}

[data-site-header] [aria-current="page"] {
  color: var(--site-color-accent);
}

#site-lead {
  scroll-margin-top: 82px;
}
