:root {
  /* Canvas */
  --hero-canvas-width: 1920px;
  --hero-canvas-height: 1080px;

  /* Font families */
  --font-display: "TT Firs Neue Trl", "Inter", Arial, sans-serif;
  --font-ui: "Inter", Arial, sans-serif;

  /* Colors */
  --color-text-gradient-start: #f2f0ea;
  --color-text-gradient-end: #bdb8ad;
  --color-text-dark: #0f0f0f;
  --color-status-green: #69cf74;
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-button-stroke-1: #686662;
  --color-button-stroke-2: #000000;

  /* Gradients */
  --gradient-text-metal: linear-gradient(
    90deg,
    var(--color-text-gradient-start) 0%,
    var(--color-text-gradient-end) 100%
  );
  --gradient-button-metal: linear-gradient(180deg, #ffffff 0%, #a7a7a7 100%);

  /* Hero layout */
  --hero-content-x: 250px;
  --hero-content-y: 672px;
  --hero-content-width: 1420px;
  --hero-content-gap: 40px;
  --hero-copy-gap: 14px;
  --hero-cta-gap: 18.566px;
  --hero-benefits-gap: 22px;

  /* Typography */
  --text-hero-title-family: var(--font-display);
  --text-hero-title-weight: 500;
  --text-hero-title-strong-weight: 700;
  --text-hero-title-size: 38px;
  --text-hero-title-align: center;

  --text-hero-subtitle-family: var(--font-display);
  --text-hero-subtitle-weight: 500;
  --text-hero-subtitle-size: 23.5px;
  --text-hero-subtitle-width: 1240px;
  --text-hero-subtitle-align: center;

  --text-button-family: var(--font-ui);
  --text-button-weight: 500;
  --text-button-size: 16px;
  --text-button-case: uppercase;

  --text-benefit-family: var(--font-display);
  --text-benefit-weight: 600;
  --text-benefit-size: 12.5px;

  /* Components */
  --button-primary-width: 405.65px;
  --button-primary-height: 49.15px;
  --button-primary-padding: 10.921px;
  --button-primary-gap: 10.921px;
  --button-primary-radius: 13.106px;
  --button-primary-stroke-width: 2.184px;
  --button-primary-label-width: 315.16px;

  --secondary-link-width: 126px;
  --secondary-link-height: 39.43px;
  --secondary-link-dot-width: 8.71px;
  --secondary-link-dot-height: 8.76px;

  --benefit-icon-width: 21px;
  --benefit-icon-height: 12.5px;
  --benefit-item-gap: 9px;
}

.u-text-metal {
  background: var(--gradient-text-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.u-font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}