@use 'sass:color';

@import "_variables";

.home {
  .hero {
    .description {
      color: var(--textColorLighten40);
    }

    .action-button {
      &.primary {
        color: #fff;
        background-color: var(--accentColor);
        border-color: var(--accentColor);
        &:hover {
          background-color: var(--accentColorLighten8);
        }
      }

      &.secondary {
        color: var(--accentColor);
        background-color: #fff;
        border-color: var(--accentColor);
        &:hover {
          color: #fff;
          background-color: var(--accentColorLighten8);
        }
      }
    }
  }

  .features {
    border-top: 1px solid var(--borderColor);
  }

  .feature {
    h2 {
      color: var(--textColorLighten25);
    }

    p {
      color: var(--textColorLighten25);
    }
  }

  .footer {
    border-top: 1px solid var(--borderColor);
    color: var(--textColorLighten25);
  }
}