:root {
  --ss-color-white: #ffffff;
  --ss-color-black: #111111;
  --ss-color-ink-strong: #1d2530;
  --ss-color-text-muted: #5f666d;
  --ss-color-accent: #6e7d67;
  --ss-color-surface: #f5f3ef;
  --ss-color-surface-alt: #f3f1ec;

  --ss-color-border-soft: rgba(17, 17, 17, 0.08);
  --ss-color-border-softer: rgba(17, 17, 17, 0.06);
  --ss-color-hover-soft: rgba(17, 17, 17, 0.03);
  --ss-color-hover-soft-strong: rgba(17, 17, 17, 0.035);
  --ss-color-active-soft: rgba(128, 128, 128, 0.08);

  --ss-color-shadow-header: rgba(0, 0, 0, 0.06);
  --ss-color-shadow-mega: rgba(0, 0, 0, 0.08);
  --ss-color-shadow-tab: rgba(0, 0, 0, 0.18);
  --ss-color-shadow-tab-active: rgba(0, 0, 0, 0.14);
  --ss-color-overlay: rgba(255, 255, 255, 0.14);

  --ss-radius-none: 0;
  --ss-radius-sm: 4px;
  --ss-radius-md: 14px;
  --ss-radius-lg: 18px;
  --ss-radius-pill: 999px;

  --ss-desktop-header-height: 60px;
  --ss-desktop-panel-max-width: 1120px;
  --ss-desktop-panel-side-margin: 40px;
  --ss-desktop-account-panel-width: 320px;
  --ss-desktop-panel-padding-top: 24px;
  --ss-desktop-panel-padding-side: 28px;
  --ss-desktop-panel-padding-bottom: 18px;
  --ss-desktop-account-panel-padding-y: 20px;
  --ss-desktop-account-panel-padding-x: 24px;
  --ss-desktop-submenu-offset: 10px;
  --ss-desktop-hover-bridge-height: 36px;

  --ss-language-chevron-size: 6px;
  --ss-language-chevron-stroke: 1.5px;
  --ss-language-chevron-opacity: 0.85;
  --ss-language-chevron-reserve: 12px;
  --ss-language-label-padding-right: 8px;

  --ss-mobile-header-height: 52px;
  --ss-mobile-control-size: 40px;
  --ss-mobile-language-size: 46px;
  --ss-mobile-icon-size: 18px;
  --ss-mobile-header-padding-left: 16px;
  --ss-mobile-header-padding-right: 134px;
  --ss-mobile-utils-right: 2px;

  --ss-mm-vh: 100dvh;
  --ss-mm-section-sticky-height: 48px;

  --ss-template-content-max-width: 1120px;
  --ss-template-wide-max-width: 1280px;
  --ss-template-narrow-max-width: 760px;
  --ss-template-section-spacing-desktop: 72px;
  --ss-template-section-spacing-mobile: 44px;

  --ss-template-card-radius: 8px;
  --ss-template-card-padding: 24px;
  --ss-template-card-shadow: 0 18px 45px rgba(29, 37, 48, 0.08);
  --ss-template-card-border: 1px solid rgba(29, 37, 48, 0.1);
  --ss-template-card-background: #ffffff;

  --ss-template-hero-min-height: 460px;
  --ss-template-hero-compact-min-height: 300px;
  --ss-template-hero-overlay: linear-gradient(90deg, rgba(17, 24, 32, 0.68), rgba(17, 24, 32, 0.28));
  --ss-template-hero-text-color: #ffffff;
  --ss-template-hero-fallback-background: #283733;

  --ss-template-chip-background: rgba(255, 255, 255, 0.86);
  --ss-template-chip-border: 1px solid rgba(255, 255, 255, 0.44);
  --ss-template-chip-text: #1d2530;
  --ss-template-badge-background: rgba(255, 255, 255, 0.92);
  --ss-template-badge-text: #1d2530;

  --ss-template-muted-text: #68737d;
  --ss-template-soft-background: #f7f5f0;
  --ss-template-border-color: rgba(29, 37, 48, 0.12);
  --ss-template-surface-color: #ffffff;

  --ss-template-button-primary-background: #1d2530;
  --ss-template-button-primary-text: #ffffff;
  --ss-template-button-secondary-background: rgba(255, 255, 255, 0.9);
  --ss-template-button-secondary-text: #1d2530;
  --ss-template-button-secondary-border: 1px solid rgba(29, 37, 48, 0.18);

  --ss-template-image-surface-background: #d9ded8;
  --ss-template-editorial-background: #faf8f3;
  --ss-template-mobile-text-size: 16px;
}

@supports not (height: 100dvh) {
  :root {
    --ss-mm-vh: 100vh;
  }
}
